Mark external links on your site

Much to the chagrin of Web designers everywhere, the HTML 4.0 Strict and XHTML 1.0 Strict recommendations of the W3C no longer include the target attribute of the <a> tag. The Transitional versions of the specifications still include it, but by definition, these specs are on the way out.

This shows you how to create links that will open in a new browser window without violating the latest W3C standards. But most people would like to know in advance if a link is going to open a new window by default.

In up-to-date browsers like Mozilla (including Netscape 6+), Opera 7, and Internet Explorer 5 for Macintosh let you use CSS to apply styles specific to element attributes. Consider the following CSS rule:

a[target=_blank]:link, a[target=_blank]:visited {
   text-decoration: none;
   border-bottom: 1px dashed;
   }

Assuming normal links are underlined on your site, adding this rule to your site's style sheet will remove that underline from new-window links and replace it with a dashed border of the same color (borders are the same color as the element text by default).

In this issue's feature article, external links are marked with rel="external" instead of target="_blank", and we can extend our rule to apply to those links as well:

a[target=_blank]:link, a[target=_blank]:visited,
   a[rel=external]:link, a[rel=external]:visited {
   text-decoration: none;
   border-bottom: 1px dashed;
   }

Unfortunately, Internet Explorer for Windows does not support the attribute selectors used in these rules. If you want to support that browser as well, you can assign a CSS class (e.g. class="external") to new-window links and add a separate CSS rule for them:

a.external:link, a.external:visited {
   text-decoration: none;
   border-bottom: 1px dashed;
   }

We use a separate rule because MSIE ignores the entire rule when it encounters a selector type it doesn't support.

*SitePointArticle:
http://www.sitepoint.com/newsletter/viewissue.php?id=3&issue=60&format=html