HTML and CSS Reference
In-Depth Information
The final rule we have for these updates is as follows:
* {
background: transparent !important;
color: #000 !important; /* Black prints
faster: */
box-shadow:none !important;
text-shadow: none !important;
Better links
Not many designers now use text-decoration: underline to style links on
pages. Typically, people use colors to indicate something is a link. However, under-
lines 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 vis-
ited) to be styled with a line below the text by using the following code snippet:
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) ")";
Search WWH ::

Custom Search