There is a lot of research that was done to arrive at the defaults that are part of HTML5 Boilerplate. It is really fun to understand how different browsers behave and what drove us to choose the defaults as they are.

We have inlined all our print styles within a CSS media query called "print". This media query is matched whenever a user selects a page for printing, and these style rules will be applied in that case. We declare all of our rules within the @media print query as shown in the following code snippet:

@media print {
  a, a:visited { text-decoration: underline; }
  /* More Styles below */
}

We then make sure we optimize the page to appear most readable when printed and also ensure we are not wasting too much printing ink printing superfluous images, colors, and text. This means we make sure we remove all background images or images, which are just of a slightly different shade of white or transparent for all elements. We also make sure all of the colors are black as it means the printer does not have to mix any ink and hence can print faster. We also remove shadows, as that would make the text less readable.

The final rule we have for these updates is as follows:

* {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow:none !important;
        text-shadow: none !important;
    }

Not many designers now use text-decoration: underline to style links on pages. Typically, people use colors to indicate something is a link. However, underlines are easier to discern in case of print, especially when you have no control over the printer and colors used to render them. Hence, we have all links (active or visited) to be styled with a line below the text by using the following code snippet:

    a,
    a:visited {
        text-decoration: underline;
    }

It would also be helpful to have a reference to the actual link in print as there is no way for the user to navigate to that link if they are reading from a printed page and would like to visit the link. We do this by using the attr() function in CSS. attr() returns the value of an attribute of the element that the current rule will be applied to. In this case, as we are applying it on links, we can use attr() to obtain the value of the href attribute of links and print them. A space character is used to concatenate strings together when they are used as a value in the content property. We also want to make sure that if a link has a title, we print that too as a title is only visible on hovering on a link. All of this expressed in CSS looks like the following code snippet:

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

But, this means even links that are just linking to another location in the same page or are used for JavaScript actions (with the javascript: prefix) would render the same way! So, we would need to make sure we do not do this for these links.

For this, we use the attribute selector that allows us to select elements that have properties that begin, end, or contain certain values. By using the selector a[href^="javascript:"]:after, we ensure we are only selecting the :after pseudo-elements of links that have the attribute href, whose value starts with the string javascript:.

Similarly, we also select all links which have the href attribute that begin with the # character, as that means such links are inline links linking to another location within the same page.

We then make sure we render no content for pseudo-elements within these links. The rule then looks like the following code snippet:

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

Do note that these rules are not available for IE6 and if it is highly necessary to offer this functionality in IE6, you would like to use JavaScript that provides this.

It sometimes happens that your printed page would contain quotes or code, and as a reader, it is annoying to keep referring back to a previous page when the code (or the quote) could all have been within one page without any break. For this, we can use the CSS page-break-inside property that allows you to tell the browser if you prefer these elements to break over two pages or stay within the same page. The code for this is shown in the following code snippet:

pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

Do note that page-break-inside is not supported in Firefox, but is available in all other browsers.

By default, putting headings within the thead tag would ensure that the headings get repeated every time a table breaks across two pages. However, only Firefox and Opera have support for this at the moment. In IE, you can do this but you would have to explicitly state it, as stated in the following code snippet:

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

Ideally, we want to prevent table rows and images from breaking across pages, so we use the now familiar page-break-inside property to tell the browser of our preference, as shown in the following code snippet:

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

It also does not appear too well, when images run off beyond the page or print cropped while appearing in full on the website. Hence, we restrict the maximum width to be as wide as the page itself and no more, as shown in the following code snippet:

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

The @page rule allows you to modify the properties of a page when printing. All browsers except Firefox support this rule. This rule sets the margins to be 0.5 cm per page, as shown in the following code snippet:

    @page {
        margin: 0.5cm;
    }

Orphans are the lines of text that appear at the bottom of the page. Widows are those that appear at the top of the page. We make sure that lines do not break in a manner that leaves fewer lines at the bottom or top than desired. This will create a more readable experience. The following code snippet is used for that purpose:

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

It is not readable to have the headings appear at the bottom of one page and the content that the heading is for, appearing on the next. To tell the browsers to avoid doing this, we can use the page-break-after setting, as shown in the following code snippet:

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

The most prevalent technique is to use hacks in CSS style rules that target only one browser.

For IE6 and below, use the following code snippet:

* html #uno  { color: red }

For IE7, use the following code snippet:

*:first-child+html #dos { color: red }

For IE8, use the following code snippet:

@media \0screen {
   #tres { color: red }
}

There are more hacks that target two or more browsers (or exclude two or more browsers) all listed in the post at paulirish.com/2009/browser-specific-css-hacks/.

The problem with these hacks is that first they exploit holes in the browser's parsing technology. If browsers fix these parsing errors then they may not work. Luckily, we do not have to fear about this for older browsers such as IE6 and IE7.

These hacks are also not readable and without comments it is impossible to understand which browsers they target.

The advantage of these methods is that you can keep your style rules together, and you do not have to serve a separate stylesheet for the browsers requiring hacks.

When they make a request to a web server, browsers send a User Agent String along with the request. Servers can serve different resources based on their interpretation of the User Agent String. For example, if a browser identifies itself as IE6 with the following User Agent String:

Mozilla/4.0 (compatible; MSIE 6.0; Windows XP)

Then, the server can send back a different stylesheet to IE6. While this may seem like a simple, easy solution, the problem occurs when browsers lie. Historically, browsers have never exactly claimed to be which browser they are, and hence, it is likely that you may send the wrong stylesheet to a browser.

It also involves a little overhead server-side to process the request according to the browser's User Agent setting, and hence is not an ideal way to serve different stylesheets to IE8 and below.

Conditional comments are HTML comments with special syntax that are understood by IE9 and below. The following is a sample conditional comment:

<!--[if lt IE 9]>
<p>HTML Markup here</p>
<!--<![endif]-->

All browsers except Internet Explorer 9 and below ignore content within these conditional comments. IE9 and below try to interpret the if condition within these comments and selectively render the content if the version number of the IE browser matches the one within the if condition.

The previous example will render the p tag on all 8, 7, 6, and below versions of IE.

Conditional comments are perfect to target older versions of IE and this is what HTML5 Boilerplate uses. There are two ways of using them. The first is to output a separate stylesheet based on matching a conditional comment, as shown in the following code snippet:

<!--[if lt IE 9]>
<link rel="stylesheet" href="/css/legacy.css">
<![endif]-->

This will make IE8 and below use legacy.css and other browsers will ignore this snippet of code.

The problem with a standalone stylesheet is that while you develop your styles you have two different stylesheets to target, and occasionally IE-specific stylesheets could be forgotten.

Some people provide only a very basic experience for IE8 and below, as shown in the following code snippet:

<!--[if ! lte IE 6]><!-->
/* Stylesheets for browsers other than Internet Explorer 6 */
<!--<![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet" href="http://universal-ie6-css.googlecode.com/files/ie6.1.1.css" media="screen, projection">
<![endif]-->

But HTML5 Boilerplate prefers a more readable and targeted approach that provides the best possible styles to all browsers using class names, which we will look at next.

An iteration of the previous conditional comments method would be to append class names on the root element based on conditional comments, as shown in the following code snippet:

<!--[if IE 8]>
<html class="no-js lt-ie9">
<![endif]-->

Then in your stylesheet, you can use it to set styles in IE8 and below as follows:

.lt-ie9 h1 { color: red }

You can read more about this solution at paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/.

This solution does not require separate stylesheets, but allows you to write readable class names that indicate why that style rule exists in the stylesheet. This is the solution we have adopted in HTML5 Boilerplate, and recommend.

In this case, we merely add a meta tag between the <head></head> tag in your HTML pages as follows:

<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
</head>

In Apache, in the .htaccess file, writing the following would make the server send the X-UA-Compatible HTTP header as a response to any request on that parent folder:

LoadModule headers_module modules/mod_headers.so
Header set X-UA-Compatible "IE=EmulateIE7"

We recommend this method of setting its value because HTTP header values override any value set via the meta tag. Moreover, using the meta tag with IE conditional comments on the html element causes this meta tag to be ignored. The X-UA-Compatible header can have the following values.