Practical uses of the att() function

HTML & CSS
1

I can only think of one:

@media print{
       a:after{content:" (" attr(href) ") ";}
}

This places the whole URL after a link so that when somebody prints off your article they can see the whole URL rather than just the underlined link

Any others?

2

opps, spelt wrong in the title - should be attr()

3

I use it regularly… I do as you have above in my print stylesheets: any external links are going to begin with “http://” so any anchors with that in their href will take the whole url and post it after the link text, in bold, with ()'s around them, for just the reason you present.


a[href^=http] {
  text-decoration: none;
}
a[href^=http]:after {
  content: " ("attr(href)")";
  font-weight: bold;
  color: #000;
}

I also use it to show titles on anchors appear on :focus.


a[title]:focus:after { 
  content: " " attr(title);
}
a[title]:hover:focus:after { 
  content: "";
}

The second rule is to prevent Gecko from getting too confuzeld. This is not a good idea as a blanket statement, but on my small sites all links are fine. Sometimes there are links you do no good showing the title on (always always test your links with keyboard!!!). But this was great when the manager insisted on flag icons instead of links to language names. Users with a mouse got the name of the language in the tooltip, but that left out keyboarders.

What sucks is :focus doesn’t work on <abbr> tags. Arg.

You could also use it to show links as “next” and “previous” where they may have that text in rel attributes.
attr(rel).

4

The only other time I’ve used it is the same idea - to spell out the title of abbr/acronyms in the print stylesheet, because people won’t get the benefit of the tooltip.