CSS 开发和测试打印样式表的更快方法（避免每次打印预览）？

Faster way to develop and test print stylesheets (avoid print preview every time)?

提问by Michael

This is my process right now:

这是我现在的流程：

1. Save changes to print.css
2. Open browser and refresh page.
3. Right-click and choose Print > Print Preview (Firefox, but any browser really)

1. 保存对 print.css 的更改
2. 打开浏览器并刷新页面。
3. 右键单击并选择“打印”>“打印预览”（Firefox，但实际上是任何浏览器）

It's step 3 that bugs me and I'm wondering if it's possible to cut it out of the process with a plugin or something. Just choose to view a page as print media, and then simply refresh to see the changes.

第 3 步让我感到困扰，我想知道是否可以使用插件或其他东西将其从流程中删除。只需选择将页面作为打印媒体查看，然后只需刷新即可查看更改。

How do you test your print stylesheets? Do you always click print preview after a refresh?

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

回答by Patrik Affentranger

You can use the ChromeMedia Type Emulationas accepted in the post See print css in the browser.

您可以使用帖子中接受的Chrome媒体类型仿真，请参阅在浏览器中打印 css。

UPDATE 21/11/2017

更新 21/11/2017

The updated DevTools doc can be found here: View a page in print mode.

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

To view a page in print mode:
1. Open the Command Menu. (tl;drCmd+Shift+P(Mac) or Ctrl+Shift+P(Windows, Linux))
2. Start typing Renderingand select Show Rendering.
3. For the Emulate CSS Mediadropdown, select print.

在打印模式下查看页面：
1. 打开命令菜单。( tl;drCmd+Shift+P(Mac) 或Ctrl+Shift+P(Windows, Linux))
2. 开始输入Rendering并选择Show Rendering。
3. 对于Emulate CSS Media下拉菜单，选择print。

---

---

UPDATE 29/02/2016

更新 29/02/2016

The DevTools docs have moved and the above link provides inaccurate information. The updated docs regarding Media type emulation can be found here: Preview styles for more media types.

DevTools 文档已经移动，上面的链接提供了不准确的信息。可以在此处找到有关媒体类型仿真的更新文档：更多媒体类型的预览样式。

Open the DevTools emulation drawer by clicking the More overrides •••more overrides icon in the top right corner of the browser viewport. Then, select Mediain the emulation drawer.

单击浏览器视口右上角的More overrides •••more overrides 图标，打开 DevTools 仿真抽屉。然后，在仿真抽屉中选择媒体。

UPDATE 12/04/2016

更新 12/04/2016

Unfortunately, it seems the docs have not been updated in regards to print emulation. However, the Print Media Emulator has moved (again):

不幸的是，文档似乎还没有关于打印仿真的更新。但是，打印媒体模拟器已（再次）移动：

1. Open Chrome DevTools
2. Hit escon your keyboard
3. Click ?(vertical ellipsis)
4. Choose Rendering
5. Tick Emulate print media

1. 打开 Chrome 开发者工具
2. 敲击esc你的键盘
3. 单击? （垂直省略号）
4. 选择渲染
5. 勾选模拟打印媒体

See screenshot below:

请看下面的截图：

UPDATE 28/06/2016

更新 28/06/2016

Google Developers Docs around Chrome DevTools and the "Emulate Media" option have been updated for Chrome >51:

谷歌开发者文档围绕 Chrome DevTools 和“模拟媒体”选项已针对 Chrome > 51 进行了更新：

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

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

To view a page in print preview mode, open the DevTools main menu, select More Tools> Rendering Settings, and then enable the emulate mediacheckbox with the dropdown menu set to print.

要在打印预览模式下查看页面，请打开 DevTools 主菜单，选择More Tools> Rendering Settings，然后启用emulate media复选框并将下拉菜单设置为print。

UPDATE 24/05/2016

更新 24/05/2016

The naming of settings have changed once again:

设置的命名再次更改：

To view a page in print preview mode, open the DevTools main menu, select More Tools> Rendering, and then enable the Emulate CSS Mediacheckbox with the dropdown menu set to print.

要在打印预览模式下查看页面，请打开 DevTools 主菜单，选择More Tools> Rendering，然后启用Emulate CSS Media复选框，并将下拉菜单设置为print。

回答by Szymon ?wita?a

In Firefox you can type Shift+F2to open a Developer Toolbar command line, and then type media emulate print

在 Firefox 中，您可以键入Shift+F2以打开开发人员工具栏命令行，然后键入media emulate print

You can also emulate other media types this way.

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

回答by slolife

Firefox + Web Developer toolbarextension has a way to enable/disable various stylesheets.

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

Look under the CSS menu. There is a menu to disable and enable individual stylesheets and a "Display by media type" menu as well.

在 CSS 菜单下查看。有一个菜单可以禁用和启用单个样式表，还有一个“按媒体类型显示”菜单。

Also, to just reduce the steps to get to PrintPreview in Firefox, try the PrintPreview extension, that will create a toolbar button.

此外，为了减少在 Firefox 中进入 PrintPreview 的步骤，请尝试使用PrintPreview 扩展程序，它将创建一个工具栏按钮。

For Chrome, there is a port of that extension. From what I can tell with the Chrome version, you can choose "Show print styles"

对于 Chrome，有一个该扩展程序的端口。根据我对 Chrome 版本的了解，您可以选择“显示打印样式”

回答by Faust

I wouldn't use any testing method that doesn't involve print preview. There are too many differences: background images not working at all in print, but showing up in normal screen contexts being chief among them.

我不会使用任何不涉及打印预览的测试方法。有太多差异：背景图像在打印时根本不起作用，但在正常屏幕上下文中显示是其中的主要内容。

In Chrome, control+pgoes immediately to print preview. (Just forget mousing up to your menu bar). That's pretty easy.

在 Chrome 中，control+p立即进入打印预览。（只是忘记将鼠标移到菜单栏上）。这很容易。

回答by Leo

You could simply disable your screen styles and change your media type to "screen" for your print stylesheet while testing. This will not be exactly the same as using a real print preview (page breaks, document width, etc.), but it still gives you a pretty good idea.

您可以在测试时简单地禁用您的屏幕样式并将您的媒体类型更改为您的打印样式表的“屏幕”。这与使用真正的打印预览（分页符、文档宽度等）不完全相同，但它仍然为您提供了一个很好的主意。

回答by Andreas Dietrich

simple for me(not having @screenparts or similar¹) with FF:

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

• put the @media print { ...part at the end of your CSS content
• out-commentonly the wrapper declaration /*@media print {*/ ... /*}*/
  • thus applying the print stuff to your styles immediately overriding them where applicable
• (I am using LiveReloadthus my browser page refreshes immediately after savingchanges)
• (otherwise, if not using LiveReload:) press CTRL+Rto reload the page
• now you already can do a lot of typical print CSS adjustments (font style, font size, spacings, colors)where one does not need the print preview yet
• press ALT+F+Vto open print preview and ALT+Wto close it again

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

¹: if one has them, out-/in-commenting those, depending on your tested media, may not be a big deal otherwise

¹：如果有的话，根据您测试的媒体对这些进行注释/注释，否则可能没什么大不了的

回答by Charity

As described in this other post (Using Chrome's Element Inspector in Print Preview Mode?), you can use chrome to simply emulate the print stylesheet. This is great as you can use the inspector to see where the styles are coming from rather than guess when you see the print dialog come up.

如另一篇文章中所述（在打印预览模式下使用 Chrome 的元素检查器？），您可以使用 chrome 来简单地模拟打印样式表。这很棒，因为您可以使用检查器查看样式的来源，而不是在出现打印对话框时猜测。

Access the Overrides Settings dialog by clicking the gear icon in the bottom right hand corner of Chrome's Element Inspector. Then select print as the target media type.

单击 Chrome 元素检查器右下角的齿轮图标，访问“覆盖设置”对话框。然后选择打印作为目标介质类型。

Awesome!

惊人的！

回答by nafg

At least in Chrome: During development, add to the body tag onload="window.print()". This will cause the print mode to open immediately after you refresh.

至少在 Chrome 中：在开发过程中，添加到 body 标签onload="window.print()"。这将导致打印模式在您刷新后立即打开。

Unfortunately it doesn't seem like the developer tools are much use since it's essentially an embedded PDF.

不幸的是，开发人员工具似乎没有多大用处，因为它本质上是一个嵌入式 PDF。

Incidentally there are ways to eliminate step 2. One popular one is LiveReload.

顺便提一下，有一些方法可以消除第 2 步。一种流行的方法是 LiveReload。

回答by Andrew

You could try temporarily removing your regular stylesheet, and only loading in the print one with a normal link tag.

您可以尝试暂时删除您的常规样式表，并仅加载带有普通链接标签的打印样式表。

回答by Mojo Techno

In Chrome 62, cmd-R/cmd-P works well on a Mac to bring up a nice preview of a @media print styled page.

在 Chrome 62 中，cmd-R/cmd-P 在 Mac 上运行良好，可以很好地预览@media 打印样式的页面。

This is accessible through the vertical elipsis in the upper right of the browser window itself (not Developer Tools) / Print...

这可以通过浏览器窗口本身右上角的垂直省略号（不是开发人员工具）/打印...

Use esc to cancel the preview window.

使用 esc 取消预览窗口。

So, for my workflow with IntelliJ IDEA and Chrome, it's: cmd-s, cmd-tab, cmd-r, cmd-p, esc, cmd-tab and I'm back in the IDE.

因此，对于我使用 IntelliJ IDEA 和 Chrome 的工作流程，它是：cmd-s、cmd-tab、cmd-r、cmd-p、esc、cmd-tab，我又回到了 IDE。

Chrome 62 in Windows 10 has the same Print... menu in the same place, accessible with ctrl-p:

Windows 10 中的 Chrome 62 在同一位置具有相同的打印...菜单，可通过 ctrl-p 访问：