Friday Feast #49: CSS Approaches to External Links
All around the Web you’ll see quite a range of approaches to handling links to external sites. Some force a new window to open, some give visitors a choice of opening in a new window or not, some sites provide visual cues to identify external links, and some treat internal and external links visually the same. What if you’d like to visually identify external links for users without having to change your existing markup in any way and without knowing a programming language? Today’s Feast explores user-friendly options for external links, including possibilities with CSS.
External Links and New Windows
There was a time when all the external links here opened in a new window by adding the
target attribute within the
anchor element. I stopped doing that for a variety of reasons, including accessibility, usability, and some people’s abhorrence. There are still plenty of sites that try to force external links to open in new windows, though. I also confess that my older posts here unfortunately still contain the
target attribute on external links since Blogger doesn’t have a global search/replace capability.
I’ve noticed a few sites that visually differentiate between external and internal links. Rebecca Blood uses CSS to provide visual differences between external and internal links, for example. Some sites use a small inline icon before or after an external link as a visual cue. Matterform Media’s QBullets and Nate’s micro icons via web-graphics.com are available for these and other purposes.
Why are some sites providing these visual cues? I personally think a subtle visual cue that a link leads to another website can be helpful. Sometimes the content will provide sufficient cues that a link goes to another site, but that’s not always the case. A site ought to still function just fine without the visual cue, much like the CSS hover attribute, while also enhancing the user experience to some degree.
Looking around at various approaches to adding an inline image to external links, some use a CSS class with the
anchor element for each external link, something like Eric Meyer’s fine example at Bringing Hyperlinks to Life. Eric’s example is especially helpful for avoiding some quirky IE bugs, too.
Available for Movable Type users are helpful plugins and template modules that automate this process, including Brad Choate’s Off-site/on-site hyperlink differentiator, Adam Kalsey’s External Links in new windows, and Mark Pilgrim’s Automatically inserting images before offsite links.
What if you don’t use Movable Type or Blosxom, though? Adding a CSS class to each external link could be impractical to implement for an existing weblog using a weblog program that doesn’t provide global search/replace. Or maybe you’d prefer not to add a class attribute anyway.
New CSS3 selectors offer a possible solution. Stuart Langridge’s External link icons the CSS way provides a CSS3 selectors approach. William Cox’s Mini Icons article and comments to follow provide a CSS3 selectors approach with helpful browser-support information, too. According to the comments there, it seems that the CSS3 selectors approach will work with Safari and Camino (Mac OS X) and Mozilla 1.3 (PC). If you’re OK with your external link images only showing up in those browsers and not others, this may be a workable solution for you.