Linking in Style… CSS3 Selectors for the Win

Today, we made a couple subtle but visually helpful additions to hyperlink styles in our site-wide CSS. We used some advanced features of CSS3 to isolate off-site links, to add an extra background image and padding to the link, based on how MediaWiki handles off-site links. We also added a mail icon to mailto: e-mail links.

We hope these additions will give hyperlinks clear visual classifications, so users can know roughly what to expect before they click or hover.

Examples

• an internal link: Gustavus smash club
• an external link: Google.com
• an e-mail link: Frank Smash

The CSS

a[href*="://"]:not([href*="gac.edu"]):not([href*="gustavus.edu"]) {
	background: url(/includes/css/sites/external.gif) center right no-repeat;
	padding-right: 13px;
}
a[href^="mailto:"] {
	background: url(/includes/css/sites/email.gif) center right no-repeat;
	padding-right: 13px;
}
a[href*="://"]:not([href*="gac.edu"]):not([href*="gustavus.edu"]):visited {
	background-image: url(/includes/css/sites/visitedexternal.gif);
}
a[href^="mailto:"]:visited {
	background-image: url(/includes/css/sites/visitedemail.gif);
}

Limitations

Unfortunately, the rules we’re using to establish whether or not a site is part of the Gustavus site aren’t perfect. If another website happens to contains the string “gac.edu” or “gustavus.edu”, like Google’s cache of the Gustavus site for example, the external CSS rule won’t apply to it. After spending some time brainstorming and experimenting, we’re pretty sure it’s not possible to check for this using only CSS3 selectors.

Additionally, only a handful of browsers currently support CSS3 selectors, and some of them only them in part. In our testing, only Mozilla Firefox correctly caught the external links, while the newest versions of Firefox, Opera, and Internet Explorer all added the mailto icons correctly. While this discrepancy isn’t ideal, it should hopefully correct itself over time as newer versions of these browsers come out.

On the other hand, these new icons degrade gracefully on older and unsupported browsers—the links still work fine, users just won’t happen to see helpful icons next to them.