我忘记了打印样式表（2016年）

一小部分有用的CSS技术和快速提醒，打印样式表仍然是一件事。

Aaron Gustafson最近向Indiegogo发送了一条推文，其中他指出了他们的订单详情页面在打印时无法使用。

当我看到这个推文时，它袭击了我，因为我意识到它已经很长时间了，因为我已经优化了一个页面以供印刷或甚至备受思考的思考.Maybe是由于我们的浏览器的持续大小，并确保我们的网站完美地工作在所有形状和大小，或者只是因为我自己很少打印网页。无论它是什么，我完全忘记了印刷式床单，这很糟糕。

优化打印网页是重要的，因为我们希望我们的网站尽可能可访问，无论媒介。我们不应该对我们的用户及其行为做出假设。人们仍然打印网页。只考虑文章或博客帖子，食谱，联系信息和方向或房地产地点。某处的人最终会尝试打印您所做的一个页面。

我很久以前放弃了家庭打印机，因为它们似乎总是在使用10分钟后突破。但不是每个人都像我一样，......

如果您在我的情况下看到自己在类似的位置，这篇文章将为您提供快速进修。如果您还没有使用CSS的打印页面，则以下提示将启动。

嵌入打印样式的最佳方法是在CSS中声明@Media规则。

身体{字体大小：18px; @Media Print {/ *打印样式Go这里* / body {font-size：28px; }}

或者，您可以在HTML中嵌入您的打印样式，但这将为您提供额外的请求。

每次进行小型更改时都不要打印页面。根据您的浏览器，您可以将页面导出为PDF，显示打印预览甚至直接在浏览器中调试。

更新2019年11月6日：这里是一个详细的帖子（您可以在浏览器中直接应用的打印样式表吗？）如何在2019年通过Chris模拟打印样式。

用于在Firefox中调试打印样式打开Developer工具栏（Shift + F2或Tools＆Gt; Web Developer＆Gt; Developer Toolbar），并在浏览器窗口底部的输入字段中输入介质在输入字段中进行打印，然后按Enter键。活动选项卡将充当介质类型打印，直到关闭它或刷新页面。 （2018年10月20日更新：这在Firefox 63+中不再工作，因为已删除了开发人员工具栏）

在Chrome Open DevTools（CMD + OPT + I（MACOS）或CTRL + SHIFT + I（Windows）或View＆Gt; Developer＆Gt; Developer＆Gt; Developer Tools）并显示控制台抽屉（ESC），打开渲染窗格，检查模拟CSS媒体并选择打印。

绝对单位对屏幕不利，但打印很棒。在打印样式表中，它完全安全，建议使用CM，MM，PT或PC等绝对单位。

可以定义特定于尺寸，方向和边距的页面特定的属性，使用@Page规则。如果您希望所有页面具有一定的保证金，这非常方便。

@Page规则是分页媒体模块的一部分，它提供各种令人敬畏的东西，例如，选择第一个打印页面或空页，位于页面的角落中的位置。你甚至可以用它来制作书籍。

由于打印页面并非无休止的网页，因此内容最终将在一页上打破并继续下一页。我们有5个属性来控制在这种情况下发生的事情。

如果我们希望将元素始终处于页面的开头，我们可以强制使用页面中断的页面中断。

如果您想避免在两页之间分配拆分，则此属性很棒

有时您可能不想强制挂钩中断，但至少控制当前或下一页上的线路上显示了多少行。例如，如果段落的最后一行不适合当前页面，则最后两个该段落的行将在下一页上打印，即使只是最后一个不适合。这是因为默认设置为寡妇的属性 - vidows - 已设置为2。我们可以改变这个。

如果它是另一种方式，并且只有一行适合当前页面，则整个段落将在下一页上打印。负责此行为的属性是孤儿，其默认值也是2。

上面的代码意味着至少3行必须适合当前页面，以便整个段落移动到下一页。 并非所有属性和值都在每个浏览器中都在，您应该在不同的浏览器中检查您的打印样式。 打印样式表是使用它可以使用的少数例外情况！重要;）。 为避免不必要的墨水浪费，您应该使用显示器删除呈现内容，广告，导航等等无关的东西：无。 如果您不知道在哪里领导，则打印链接是完全没用的。 当然，这将显示相对链接，到您的网站，锚等的绝对链接。也是如此。 这样的东西可能是更好的服务： 看起来很有趣，我知道。 这些线是指：显示具有HREF属性的每个链接旁边的HREF属性的值，它以HTTP开头，但在其价值中具有MyWebsite.com。

缩写应该包裹在＆lt; abbr＆gt;标题属性中包含的元素及其扩展。显示打印页面的页面有意义。

通常，如果您不告诉他们，浏览器将不会打印背景颜色和背景图像，但有时您可能想要强制打印它们。 NOT标准化属性打印颜色调整允许您覆盖某些浏览器的默认设置。

如果在以下示例中写入媒体查询，请注意，此媒体查询中的CSS规则不适用于打印样式表。

你为什么问？因为CSS规则仅适用，如果MIN宽度为48EM和介质型屏幕。通过删除屏幕关键字，媒体查询仅受min-宽度的限制。

Firefox和Chrome的当前版本能够打印映射，但例如Safari不是。有些服务提供您可以使用的静态地图。

这个粉碎的杂志文章有一些漂亮的提示。其中一个是为打印页面提供QR码，以便用户不必输入整个URL以获得Live版本。

在我的研究中，我发现了一个很棒的工具，可以帮助您打印非优化页面。使用PrintIminator，您可以单击它们可以删除元素。

如果您进入框架，您可能会喜欢古堡，这使得可以更轻松地进行打印。 就是这样！ 这是我制作的代号的链接（调试版本）如果您想在操作中看到一些内容。 我希望你享受了这篇文章。 2016年11月17日更新：增加了Hartija框架。 2018年10月20日更新：Firefox中的开发人员工具栏已被删除。 2019年11月6日更新：在CSS技巧上添加了链接到浏览器仿真帖子。