One of the improvements I've been wanting to make to my blog theme is support for icons next to URL links which indicate if the link is offsite, meaning that it'll cause you to browse to another domain. As you can see from
this search there are lots of different approaches largely because not all browsers support the latest standards. For the time being I've opted for a CSS only solution which means it's only supported in Firefox (2.0 is what I've tested) and IE7. IE6 and less will continue to render the links normally without any offsite icon indicator. I've opted for this route because it was really easy to add the following CSS.
1 #centercolumn a[href^="http://"] {
2 background: url(/blog/themes/stevewhite/images/external.png)
3 no-repeat center right;
4 padding-right: 13px;
5 }
6 #centercolumn a[href^="http://www.stevetrefethen.com"],
7 a[href^="http://stevetrefethen.com"] {
8 background: transparent;
9 padding-right: 0;
10 }
This means that offsite links appearing only in the center column will be denoted with an icon like this
. Supporting IE versions < 7 is a bit more involved than I have time to
spelunk. I came across the above solution by digging into the theme used for
MediaWiki which is the wiki engine the Delphi R&D team uses. It has a solution for IE6 but it's more involved than I care to dig into. On my blog, IE7 usage has eclipsed IE6 (50% to 44%) so it's a matter of time before this becomes a non-issue anyway. Regardless, if someone has a simple solution that works for IE6 which they'd like to share I'd be more than happy to add it.