Differentiate external link from internal link using an icon

Would be a nice piece of additional information to display in a different manner external links from the internal ones.

External links have usually this format
[[LABEL>>http://incubator.myxwiki.org/xwiki/bin/view/Improvements/Usability]]

For this case we could use something like:

a[href^='http:'] {
  background: url('externallinkicon.gif') no-repeat scroll right center transparent;
  padding-right: 12px;
}

The problem is that inter wiki links are rendered using the 'http://' pattern. So [[enterprise:Main.Roadmap]] will become 'http://enterprise.xwiki.org/xwiki/bin/view/Main/Roadmap'. For the user that link is still 'internal' do his site.

A possible solution is to add a "rel='external'" attribute to a non-rendered link. See http://www.w3.org/TR/html5/links.html#link-type-external.

a[rel='external'] {
  background: url("externallinkicon.gif") no-repeat scroll right center transparent;
  padding-right: 12px;
}

The problem with this solution is that IE6 doesn't have support for attribute selectors. In this case we should provide an additional CSS class like "'class='external'".

a[rel='external'] {
  background: url("externallinkicon.gif") no-repeat scroll right center transparent;
  padding-right: 12px;
}
a.external {
  background: url("externallinkicon.gif") no-repeat scroll right center transparent;
  padding-right: 12px;
}

The external relation also fixes case like: http, mailto, http, https, ftp, skype, etc. (Vincent)