Web page Production Tutorial: CSS print style tips

Article Introduction: for a printed style, not a screen display style.

Printing a page directly on a Web site without any processing will result in an undesirable effect.

Our web developers can simply use a few key points to achieve the more appropriate results:

• Use the response layout to set the effect of printing
• Print background pictures and colors, at the right time
• Add a Display URL or page link for reference
• Use CSS filter to improve the graphic effect of printing

for a printed style, not a screen display style

First, we need to use media queries for print style settings.

@media Print {}

It is not necessary to write CSS styles again for printing, and we only need to overwrite the default styles for the styles that are printed for the difference settings.

Most browsers will automatically change the color according to the print to save the printing material, but we can set it as manually as possible.

To achieve the best results and make the colors clear, we need to include at least the basic print style.

@media Print {body {color: #000; background: #fff;}}

For printing, in most cases we do not need to print the entire page, only need to print a concise page that can highlight the need for information, then we will not be relevant to hide the part (such as: Navigation bar, background image ).

/* Default Styles * * H1 {color: #fff; Background:url (banner.jpg);       @media Print {h1 {color: #000;    Background:none;    } nav, aside {display:none; } }

When writing a print style sheet, be careful to use centimeters or inches as units instead of pixel units, and the actual units are useful for printing.

To ensure that the print style is useful, the write CSS style makes the printed content look better from the edge of the paper, and you need to use @page this syntax:

@media Print {h1 {color: #000;    Background:none;    } nav, aside {display:none;       Body, article {width:100%;       margin:0;    padding:0;    } @page {margin:2cm; } }

To ensure not to be printed across pages, such as a title and content are separated at the bottom of the page:

H2, h3 {page-break-after:avoid;}

The other is to prevent the picture from being too wide and beyond the edge of the paper:

img {max-width:100%!important;}

The third point is to ensure that the content of the articles article label begins on a new page:

Article {page-break-before:always;}

Finally, note that lists and pictures are not separated on different pages:

UL, img {page-break-inside:avoid;}

Even though it's not perfect, it's a good start.

background pictures and colors

For some websites, colors and background maps are still very necessary to follow. If the user is printing on the WebKit kernel browser, we can force the printer to print the colors seen on the screen (that is, to force any background images and colors to appear on the printed page), which, in general, can be done by a color printer, and we need a separate media query:

@media print and (color) {* {-webkit-print-color-adjust:exact;    Print-color-adjust:exact; } }

Unfortunately, this is not immediately applicable to Firefox opera and IE.

extend a hyperlink in a print style

If you print directly, the hyperlink will be just a little bit of text, and there will be no linked URLs, so it doesn't make sense.

We can show the URL link on the printed page, we can use: after pseudo class to implement without affecting the surrounding element layout:

@media Print {article a {font-weight:bolder;    Text-decoration:none;    } article A[href^=http]:after {content: "<" attr (HREF) ">"; } }

Look below this is HTML:

' ve explored this website; Now it's time to read the other Web development documentation.

The following are the effects of the display:

One of the problems is that the anchor text and image links on the printed page will also expand. We can use CSS rules to fix it well.

Article a[href^= "#"]:after {content: "";}

The link around the image is more troublesome, ideally the link around the image will have a class.

$a: After > img {content: "";}

The CSS selector implementation will be simple:

A:not (: Local-link): After {content: "<" attr (HREF) ">";}

All of these methods assume that the user will continue to enter the URL by hand. A better solution is to make it easier to access the digital version of the page by providing a matching QR code.

Print link two-dimensional code to make it easier to access

The following figure:

We need to use Google Graphics API to achieve:

• We want Google to provide chart information (qr, in our case);
  Render size of the QR imprint in pixels;
  URL encoding;
  The character encoding used.
  

Usually we will have a URL associated with a heading element at the top of the page:

lizabeth ' s salon providing intellectual stimulation Online Since 2001

To create the expected print results, we will provide enough space for H1 to place the two-dimensional code, because this two-dimensional code needs to be added to each page, we need to add a CSS rule:

@media Print {header h1:after {Content:url (https://chart.googleapis.com/chart?cht=qr&chs=150x150&chl=h       TTP://YOURDOMAIN.COM&CHOE=UTF-8);       Position:absolute;       right:0;    top:0; } }

The disadvantage of this approach is that the developer requests an API for each element. If your host is PHP, you can automatically generate the URL of the current page:

@media Print {h1:after {content:url (https://chart.googleapis.com/chart?cht=qr&chs=150x150 &chl=http:// &choe=utf-8);       Position:absolute;       right:0;    top:0; } }

using CSS3 Filter to improve print quality

Browsers usually print out banner images, especially if there is a problem with the banner in the dark background is white:

@media Print {header {background:none;    Color: #000;       Header img {filter:url (inverse.svg#negative);       -webkit-filter:invert (100%);    Filter:invert (100%); } }

CSS3 filters do what you expect – reverse color in the head image, turn black and white, and vice versa – but they can only be in Chrome and Safari. To make up for Firefox, we need a different approach – the equivalent of a filter written as a separate SVG file:

Theoretically, you can use a CSS sprite to switch between different versions of the printed logo, but this will mean that adding a file size One times may not be good. Instead, I recommend using a CSS filter (and SVG equivalent, for Firefox) to invert the image before printing the page: printing two forms of logo (i.e. alpha-masked PNG or pure black background) results:

Summary

Because the printing is not convenient to track, and lack of attention. It's also often overlooked in web development, and most of the time we just read online pages instead of printing them. On the other hand even though people just occasionally need to print something from the site, it would be ideal if the page is designed to fit the printer, just like a modern web site adapted to a variety of screen sizes and devices. Another aspect of print's adaptive design, availability and accessibility, and the important components of web development. Another aspect of dealing with print adaptive design is that we realize the needs of more web users-and at the same time save ink, paper and other resources, all of which are important aspects of sustainable design.