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) ")"; } }
Instructions
Set display
of the <nav>
element to none
when the web page is printed.
Next, inside the same @media print
query and underneath the nav
selector ruleset that we just added, display the href
value of the help link on the page when it is printed.