Using CSS 3 selectors to apply link icons
I mentioned earlier this year a tutorial which shows how to use CSS 3 selectors to enhance hyperlinks. Of course, you don’t need to limit yourself to just the href attribute; with CSS 3 selectors, you can use the same technique for any tag which has an attribute. I’m going to give a couple of quick examples, which will output the following result (of course, you’ll need a browser better than IE6 to see them!):
All icons are from the fantastic collection at famfamfam.com.
The first list item uses the general attribute selector to look for any tags with an accesskey attribute and display an icon to alert users to its presence:
#test_selectors a[accesskey] {
background: url(’icon_key.gif’) no-repeat 0 50%;
text-indent: 20px;
}
The second item looks for links with a type attribute value of ‘application/pdf’ (you do mark up links to documents using the type attribute, right?) using the exact attribute selector, then inserts an icon advising you of the destination document:
#test_selectors a[type='application/pdf'] {
background: url(’file_acrobat.gif’) no-repeat 0 50%;
text-indent: 20px;
}
Finally, if you have a multi-language site you can link to another version using the lang attribute with the value of that language, then use the language attribute selector to apply that country flag:
#test_selectors a[lang|='fr'] {
background: url(’fr.gif’) no-repeat 0 50%;
text-indent: 20px;
}
As always there is much more you can do with the selectors; if you use or develop this idea on your site, post links here for us to see.
“Flag as a symbol of language - stupidity or insult?” by Jukka Korpela:
http://www.cs.tut.fi/~jkorpela/flags.html
Debates on what icons to use aside, the technique still stands.
Lovely Article… *starts marking the type attribute on his links*
A similar point as Vakio: the accesskey icon isn’t good… as user I might think that there is a secure HTTP connection used when I click on that link.
But sure, the technology stands, and I use it already on my web log.
You give examples using hyperlinks ;)
You’re right, Arjan, that sentence wasn’t as clear as I wanted it to be; I’ve changed it now.
Also, the icons were just what was available to me; I wanted to use a keyboard key instead, but there wasn’t one!
Unfortunately I cannot use these neat tricks because most of my users wouldn’t see them. This is especially annoying as the semantics of using actual images in these cases are questionable.
I would love to see more examples and maybe with no hyperlinks. :)
It’s nice, but you are using CSS 2 selectors in this article.. :p
http://www.w3.org/TR/REC-CSS2/selector.html
Well, I can’t really argue with that, nemeseri; however, there are a few different CSS2.1 declarations we’ve ‘adopted’ into CSS 3 as they don’t yet have widespread (or any) browser support; attribute selectors are one example of this.
You may run into problems with IE…
IE positions backgrounds on inline elements differently to other browsers. It’s not doing it wrong, it just wasn’t in the CSS2 spec. If your link wraps across lines, you may find your icon won’t show in IE.
On your French link you should be using the
hreflangattribute and styling off that (although thelangattribute still holds as the text content of the link in in French).Also, CSS3 has the :lang() pseudoclass, which is better as it’s more general in its applicability besides being a byte shorter :)
Nice article Peter.
I think the comments about icon choice are valid but ultimately it’s the method that’s important. I’ve been using this on my blogroll showing XFN and it’s a great way show information without a ton of classes.
Also, I hadn’t thought of the type attribute on links.
Well, if IE6 doesn’t render this either, I see no reason why not to use the more sophisticated
selector:before { content: url(your/path/goes/here.extension) }
All set in one declaration.
@ Sebastian: IE doesn’t support generated content, and perhaps never will; at least this way, IE7 and above will show the icons.
In most cases, I prefer:
#test_selectors a[href$=".pdf"]
over
#test_selectors a[type='application/pdf']
because I don’t have to add extra properties. Another handy one is
a[href^="http://"], a[href^="https://"]
to flag external links assuming the rest of your page is relatively linked.
Using type=”application/pdf” is semantically better, and therefore better in terms of accessibility.
@ “Debates on what icons to use aside, the technique still stands.”
Negative. Accesskeys and flag use is actually being dropped.
Blind/non-blind people agree that accesskeys are a nuissance, due to different system implementation and (different) browser conflicts with shortcuts, et caetera.
And flag use… is not used. Text works pretty well for everybody.
Mail: The technique does still stand; you can debate the examples I provided all you like, but the technique is still perfectly usable.
[...] Clique e veja o exemplo implementado [...]
Nice article!
Does anyone know a solution or workaround for IE so the icons are visible if wrapping over a line?
Neat example! I understand the benefits of the TYPE attribute over the extension match (a[href$='.pdf'] { /* */ }) but I think both have their place.
[...] After completing my experiment, I ran across a similar one at css3.info. [...]
[...] 8.Using CSS 3 selectors to apply link icons [...]
Hi!
I would like extend my SQL knowledge.
I red so many SQL books and would like to
read more about SQL for my work as db2 database manager.
What would you recommend?
Thanks,
Werutz