Linking in Style… CSS3 Selectors for the Win Posted on March 22nd, 2007 by

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

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.

 


One Comment

  1. Ryan Rud says:

    In case you’re looking through our CSS and can’t find the above code, we’ve had to make special rules for each section main section of the page to account for different colors in #rCol .highlightedFeature and the way links are structured in the #lCol navigation.

    Eventually, we also plan on making different icons that match the various template flavors as well, but we just haven’t gotten to it yet.