So far, we have been very concerned with how our page looks on screens, but we haven’t been considering the other ways in which users can consume the content of your web page. For example, how does the page look when printed? Luckily, there are some ways a page can be made more accessible, even when viewed on paper.

One way to do this is to use media queries, specifically the @media print query:

@media print {
  nav {
    display: none;
  }
}

The above code snippet causes the nav element to be removed when the page is printed. This is useful for reducing clutter on the page, especially for elements with no real benefit from being present on paper as they cannot be accessed properly.

Print media queries can also be used to display values of elements that otherwise couldn’t be understood. For example, we can display the value of the href attribute when printed so the user can still have access to the link. To expose an href in printed form, the following code can be used:

@media print {
  a[href^="http"]:after {
    content: " (" attr(href) ")";
  }
}