更快速地开发和测试打印样式表(每次都避免打印预览)？

Question

这是我现在的过程:

1. 保存对print.css的更改
2. 打开浏览器并刷新页面.
3. 右键单击并选择"打印">"打印预览"(Firefox,但确实是任何浏览器)

这是第3步让我烦恼,我想知道是否有可能用插件或其他东西将其删除.只需选择将页面视为打印介质,然后只需刷新即可查看更改.

你如何测试你的打印样式表？刷新后是否总是单击打印预览？

Answer 1

您可以使用帖子中接受的Chrome 媒体类型模拟在浏览器中查看print css.

更新21/11/2017

可以在此处找到更新的DevTools文档:以打印模式查看页面.

要以打印模式查看页面:
1.打开命令菜单.(tl; dr Cmd+Shift+P(Mac)或Ctrl+Shift+P(Windows,Linux))
2.开始输入Rendering并选择Show Rendering.
3.对于Emulate CSS Media下拉列表,选择print.

更新29/02/2016

DevTools文档已移动,上述链接提供了不准确的信息.有关媒体类型仿真的更新文档可在此处找到:预览更多媒体类型的样式.

通过单击浏览器视口右上角的" 更多覆盖•••更多覆盖"图标,打开DevTools仿真抽屉.然后,在仿真抽屉中选择" 媒体 ".

更新2016年4月12日

不幸的是,似乎文档没有在打印仿真方面进行更新.但是,Print Media Emulator已经(再次)移动:

1. 打开Chrome DevTools
2. 点击esc你的键盘
3. 点击⋮(垂直省略号)
4. 选择渲染
5. 勾选模拟打印介质

见下面的截图:

更新28/06/2016

适用于Chrome> 51的Google Developers围绕Chrome DevTools和"Emulate Media"选项的文档已经更新:

https://developers.google.com/web/tools/chrome-devtools/settings?hl=en#emulate-print-media

要在打印预览模式下查看页面,请打开DevTools主菜单,选择" 更多工具" >" 渲染设置",然后启用" 模拟媒体"复选框,并将下拉菜单设置为" 打印".

更新2016年5月24日

设置的命名再次改变:

要在打印预览模式下查看页面,请打开DevTools主菜单,选择" 更多工具" >" 渲染",然后启用" 模拟CSS媒体"复选框,并将下拉菜单设置为" 打印".

Answer 2

在Firefox中,您可以键入Shift+F2以打开Developer Toolbar命令行,然后键入media emulate print

您也可以通过这种方式模拟其他媒体类型.

Answer 3

Firefox + Web Developer工具栏扩展有一种启用/禁用各种样式表的方法.

在CSS菜单下查看.有一个菜单可以禁用和启用单个样式表,也可以使用"按媒体类型显示"菜单.

此外,要减少在Firefox中访问PrintPreview的步骤,请尝试PrintPreview扩展,这将创建一个工具栏按钮.

对于Chrome,有一个该扩展程序的端口.根据我的Chrome版本,您可以选择"显示打印样式"

Answer 4

我不会使用任何不涉及打印预览的测试方法.存在太多差异:背景图像在打印时根本不起作用,但在正常的屏幕环境中显示为主要的.

在Chrome中,control+p立即进行打印预览.(忘了留意你的菜单栏).这很简单.

Answer 5

在测试时,您可以简单地禁用屏幕样式并将介质类型更改为"屏幕"以用于打印样式表.这与使用真正的打印预览(分页符,文档宽度等)不完全相同,但它仍然为您提供了一个非常好的主意.

Answer 6

对我来说简单（没有@screen零件或类似的¹）与FF：

• 将@media print { ...零件放在CSS内容的末尾
• 仅注释包装器声明/*@media print {*/ ... /*}*/
  • 从而将打印内容应用于您的样式，并在适用时立即覆盖它们
• （我使用的是LiveReload，因此我的浏览器页面在保存更改后立即刷新）
• （否则，如果不使用LiveReload：）按CTRL+R重新加载页面
• 现在，您已经可以进行很多典型的打印CSS调整（字体样式，字体大小，间距，颜色），而其中不需要打印预览
• 按ALT+F+V打开打印预览，ALT+W然后再次关闭

¹：如果有它们，根据您所测试的媒体，对它们进行注释/取消注释可能并不重要