怎么优化优化css动画_使用CSS优化网站结构以进行打印

怎么优化优化css动画

As much as I read articles online, I still print a fair amount of them out. Sometimes I print them to pass on to others, other times to read again when I have more time. Unfortunately a great deal of websites put no effort into providing their content in a printer-friendly fashion. The result of them overlooking the print audience is a great article not being read. If only these writers knew how easy it can be to optimize their site for print and how it can greatly enhance the value of their website.

尽管我在网上阅读了很多文章，但仍然打印出相当多的文章。 有时我打印它们以传递给其他人，其他时间则在我有更多时间时再次阅读。 不幸的是，许多网站都没有努力以易于打印的方式提供其内容。 他们忽视印刷品受众的结果是一篇很棒的文章未被阅读。 如果只有这些作家知道优化网站以进行印刷是多么容易，以及如何极大地提高网站的价值。

The secret to creating printable pages is being able to identify and control the "content area(s)" of your website. Most websites are composed of a header, footer, sidebars/subnavigation, and one main content area. Control the content area and most of your work is done. The following are my tips to conquering the print media without changing the integrity of your website.

创建可打印页面的秘密在于能够识别和控制您网站的“内容区域”。 大多数网站由页眉，页脚，侧边栏/子导航和一个主要内容区域组成。 控制内容区域，大部分工作已完成。 以下是我在不改变网站完整性的情况下征服印刷媒体的提示。

创建打印样式表 (Create A Stylesheet For Print)

Of course you have at least one stylesheet to control the layout of the page and formatting of the content, but do you have a stylesheet to control how your page will look like in print? Add the print style sheet, with the media attribute set to "print", at the end of the list of stylesheets in the header. This will allow you to create custom CSS classes applied only at the time of print. Make sure your structure CSS file is given a media attribute of "all."

当然，您至少有一个样式表来控制页面的布局和内容的格式，但是您是否有样式表来控制页面在打印中的外观？ 在标题的样式表列表的末尾添加媒体属性设置为“ print”的打印样式表。 这将允许您创建仅在打印时应用的自定义CSS类。 确保您的结构CSS文件的媒体属性为“ all”。

<!-- Main stylesheet on top -->
<link rel="stylesheet" type="text/css" href="/global.css" mce_href="/global.css" href="/global.css" mce_href="/global.css" media="all" />
<!-- Print only, on bottom -->
<link rel="stylesheet" type="text/css" href="/print.css" mce_href="/print.css" href="/print.css" mce_href="/print.css" media="print" />

避免不必要HTML表 (Avoid Unnecessary HTML Tables)

As much as I try to steer clear of using tables, there's no way to avoid the occasional <tr><td> experience. Forms are much easier to code when using tables. Tables are also great for...get this...data tables. Other than these two situations, a programmer should try to avoid using table, especially when considering print. Controlling the content area of your website can be extremely challenging when the page structure is trapped in a table.

尽管我尽力避免使用表，但还是无法避免偶尔的<tr> <td>体验。 使用表格时，表单更容易编码。 表也​​非常适合...获取此数据表。 除上述两种情况外，程序员应尽量避免使用表格，尤其是在考虑打印时。 当页面结构陷于表格中时，控制网站的内容区域可能会极具挑战性。

知道页面的哪些部分没有任何打印价值 (Know Which Portions Of The Page Don't Have Any Print Value)

You know that awesome banner you have at the top of your site? Ditch it. And those ads on the right and left sides of the page? Goodbye. Web visitors print your page because of the content on it, not to see the supporting images on your website. Create a class called no-print and add that class declaration to DIVS, images, and other elements that have no print value:

您知道网站顶部有很棒的横幅吗？ 抛开它。 以及页面右侧和左侧的那些广告？ 再见。 Web访问者根据页面上的内容来打印您的页面，而不是在您的网站上看到支持的图像。 创建一个名为no-print的类，并将该类声明添加到DIVS，图像和其他没有打印值的元素中：

.no-print		{ display:none; }

<!-- Example -->
<div id="navigation" class="no-print">
	.... <!-- who needs navigation when you're looking at a printed piece? -->
</div>

使用分页符 (Use Page Breaks)

Page breaks in the browser aren't as reliable as they are in Microsoft Word, especially considering the variable content lengths on dynamically created pages, but when utilized well make all the different in printing your website. The CSS specs don't provide a lot of print flexibility but the page-break-before / page-break-after properties prove to be useful. Page breaks are much more reliable when used with DIV elements instead of table cells.

浏览器中的分页符没有Microsoft Word中的分页符可靠，特别是考虑到动态创建的页面上可变的内容长度，但是如果使用得当，则在打印网站时会有所不同。 CSS规范没有提供很多打印灵活性，但事实证明page-break-before / page-break-after属性是有用的。 与DIV元素而不是表单元格一起使用时，分页符要可靠得多。

.page-break	{ page-break-before: always; } /* put this class into your main.css file with "display:none;" */

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce eu felis. Curabitur sit amet magna. Nullam aliquet. Aliquam ut diam...
<div class="page-break"></div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit....

调整页面大小以进行打印 (Size Your Page For Print)

Obviously your computer monitor can provide a large amount of width to view a page, but I recommend setting the content area width to 600px (an inch equivalent may be better, but I try to deal with one unit specifically, which is pixels). This ensures that words wont bleed outside the print area. Use this width measurement with the page break DIVs you've created in your stylesheet. After you know the width of your printed content area, adjust the dimensions of content blocks inside the main content area if necessary.

显然，您的计算机监视器可以提供大量的宽度来查看页面，但是我建议将内容区域的宽度设置为600px (等效于一英寸，但是我尝试专门处理一个单位，即像素) 。 这样可以确保单词不会在打印区域外流血。 将此宽度度量与您在样式表中创建的分页符DIV一起使用。 在知道打印内容区域的宽度后，如有必要，请调整主内容区域内内容块的尺寸。

测试！ (Test!)

Like any type of programming, testing is important. Note that if you have a website that serves dynamic data, you wont be able to win all the time but you may be able to figure a scheme to format content well most of the time. Be sure to test in multiple browsers (when creating customer websites, I try to check all "Grade A" browsers).

像任何类型的编程一样，测试也很重要。 请注意，如果您有一个提供动态数据的网站，那么您将不会一直赢得胜利，但是您可能能够找到一种在大多数时间里都能很好地格式化内容的方案。 确保在多个浏览器中进行测试(在创建客户网站时，我尝试检查所有“ A级”浏览器) 。

Modifying your page structure for better print results is probably easier than you think -- at least improving your existing template will be. Check back soon for part two, where we analyze optimizing a website's content for print.

修改页面结构以获得更好的打印效果可能比您想象的要容易-至少可以改善现有模板。 请稍后再查看第二部分，我们将在其中分析优化网站内容以进行打印的过程。

翻译自: https://davidwalsh.name/optimizing-structure-print-css

怎么优化优化css动画