You can find more information here ( http://snipplr.com/view/9340/css-browser-selector/ ) or download it from here (http://github.com/rafaelp/css_browser_selector ).

http://www.digital-web.com/articles/everything_you_know_about_CSS_is…

Improving the Icon Display;

In the original post, I put forward the following code for adding link icons;

a[href$='.pdf'] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(Images/PDFIcon.gif) center left no-repeat;
}

The code is ok, but it’s a little temprimental when you come to using it on small fonts. It seems that setting a line-height property just doesn’t cut it where most browsers are concerned, and your icons can get cropped if they’re bigger than the height of your characters. Let’s adjust this a bit, to ensure that we don’t have our icons cropped by the line-heights…

a[href$='.pdf'] {
display:inline-block;
padding:2px 0px 2px 20px;
line-height:18px;
min-height:18px;
overflow:visible;
background:transparent url(Images/PDFIcon.gif) center left no-repeat;
}

That’s much more cross-browser consistant, although it’s one that might need a little tweaking, depending on your overall layout.

Dealing with incompatible browsers;

There’s not much CSS can do on its’ own for the browsers that don’t understand it.

And that, in itself, is part of the beauty of this method. Quite unusually for CSS, if something in this example is incompatible with the browser, its’ unlikely to throw other things out of alignment. However, help is there for those with diligence. You can quite easily expand your selectors to include a class, so that icons can be manually applied (or un-applied) to links. Thus;

a[href$='.pdf'], .pdflink {
display:inline-block;
padding:2px 0px 2px 20px;
line-height:18px;
min-height:18px;
overflow:visible;
background:transparent url(Images/PDFIcon.gif) center left no-repeat;
}

There are other ways than just CSS, however. Check out this post by Rebecca Murphey, “Unobtrusive, cross-browser method to add icons to links” – using javascript to get the same end-result.

More than just file types;

Why stop at file types? A pet peeve of mine is not being able to anticipate browser behaviour once I click a link. Will I get a new window? Won’t I? In the first version of this post, we touched on wikipedia-style external link signifiers. So let’s expand this to react to the target attributes of links.

a[target='_blank'] {
display:inline-block;
padding:2px 20px 2px 0px;
line-height:18px;
min-height:18px;
overflow:visible;
background:transparent url(Images/NewWindowIcon.gif) center right no-repeat;
}

More than just link targets;

Talking of wikipedia, wouldn’t it be useful to include a little more context to your links? There’s personal blogs, there’s company websites, reference sites and there’s search engines. If you’re linking to an article at wikipedia the information is likely to be a very different style to a personal blog. And both those articles are going to be directly more useful than a page of search results. So why not include the target websites’ logo? Or perhaps come up with some generic ‘classification’ icons to accompany your links? A collection of the favicons of several core websites could be a good idea. But then it could get out of hand.

Anyway, this technique would be little different than that for ‘absolute’ links, except that we are specifying more of the complete url;

a[href^="http://en.wikipedia"] {
display:inline-block;
padding:2px 20px 2px 0px;
line-height:18px;
min-height:18px;
overflow:visible;
background:transparent url(Images/WikiIcon.gif) center right no-repeat;
}

What you include special icons for is up to you. Wikipedia is an obvious choice, and so are the most visited sites, like search engines, social network sites, online shops, and journals. This idea requires hard graft rather than offering a unilateral CSS solution. I suggest picking the sites important to your website and going with them. You’ve got some decision making to do on this one. I’d love to be able to autogenerate urls based on the link attributes but – so far as I can tell – that’s beyond CSS at the moment. Perhaps this calls for some server scripting?

More than networking;

What else is there? Well, we haven’t even looked at Microformats or ‘rel‘ attributes yet. True, some things like rel-nofollow can be utterly useless to the user, but hCard links can be. Then there’s trackback links, bookmarks, rss feeds, practically anything. The format is all pretty similar;

a[rel='bookmark'] {
display:inline-block;
padding:2px 20px 2px 0px;
line-height:18px;
min-height:18px;
overflow:visible;
background:transparent url(Images/BookmarkIcon.gif) center right no-repeat;
}

Putting it all together;

One of the difficult things about CSS when you’re doing this, is working out the inheritance models for your links. Things at the end of your CSS file will override those at the top, so be wary how you organise your links. This is unfortunately the point where you can come up against the brick wall that is the limitations of CSS. Sofar as I know, there’s no way of using multiple selectors – say for instance, external links and new windows – it’s a case of either-or.

External links / More…

Since I started writing this post, I’ve found a few other good examples online – none of which I knew about before I started (darn!)

• Alexander Kaiser has a similar implimentation to what I’ve mentioned here, but with working examples and a downloadable version. Have a look at “Iconize Textlinks with CSS.”
• The CSS Guy kickstarted this idea a while ago, with his post “Showing Hyperlink Cues with CSS”
• And Rebecca Murphey has an example of achieving the same effect using javascript with her post, “Unobtrusive, cross-browser method to add icons to links”

How often is it the case that you’re not quite sure where a link is going to take you? Ok, so it’s not a major issue for mainstream browsers – after all, that’s what the “Status bar” is for. But beyond your normal browser operation – say on an unusual machine or if you’re looking at a print-off – just how can you tell where a link should be going? If the link text is good, you might be able to track down the target page, but that’s nothing compared to the usefullness of a full URL.

Luckily with a smidgen of CSS and an up-to-date browser, you can solve at least a few of these problems in a nice, clever way. A List Apart covered this in the misty old era of 2002, back when I was still making HTML pages with notepad and cobbling together images with Trial versions of Paint Shop Pro. In the article, CSS Design: Going to Print, they Eric Meyer covers – amongst other things – the issue of displaying ‘Printed links’, making links that are as useful in print as they are functional onscreen.

What do I have to do?

The long and short of it is this snippet of code;

#content a:link:after, #content a:visited:after {
content: " (" attr(href) ") ";
font-size: 90%;
}

How does it work?

Well, the ‘:after’ selectors are pseudo-selectors under the CSS 2.1 spec, and can add styles to an imaginary object that is created after the chosen item. In this case, it’s doubled up with the ‘content:’ property, one that can generate basic text. This is really the usage that the ‘:before’, ‘:after’ and ‘content:’ properties / selectors were invented for.

Following the ‘content:’ property is a bit of calculation – about as complex as CSS calculations can get – and is effectively adding two strings and a property together to generate the content. The ‘attr(href) ‘ is dynamically pulls in the href attribute of the selected HTML object. It could pretty much be used on any attribute, though.

What’s the final result? That’s simple. Any links in the #content element of the page will automatically have their href / url displayed as text after the link itself. That way you can easily see where they go, without relying on things like the status bar. Especially useful if you’re creating printable version of pages, because of how seemlessly it will display.

It seems curious that I haven’t seen this in action much – presumably because the article was so old before the major browsers caught up with the CSS 2 specs. Who knows?

In action…

Nick La, over at Web Designer Wall, uses a very similar technique for the comments section of his website. When you roll over the commenters’ name, it displays – in plain text – the url associated with that commenter. This is however, done without this method, in favor of what I assume to be a nice cunning bit of ‘:hover’ pseudoclasses and ‘display:’ properties. It just goes to show that this idea doesn’t have to be limited to print stylesheets.

There is now an example using this technique to display email address locations at http://css-tricks.com/better-email-links-featuring-css-attribute-selectors/. Check it out!