
This is a legacy document, and retained on the site in order to avoid link rot. The content is likely no longer (a) accurate, (b) representative of the views and philosophies of current site management, or (c) up to date.
Anchors and CSS
CSS and the Amazing Technicolor Anchors
With the deployment of CSS implementations, presentation suggestions of anchors of different colors has become trivial. CSS authors would be well advised to understand the issue of link colours from the standpoint of useability, as described in #8 in Jakob Nielsen's Top Ten Mistakes in Web Design article.
The easiest way to suggest different colours is to assign classes to the CSS anchor pseudo-class, such as:
a.important:link {color: red; background: white; text-decoration: none;} a.onsite:link {color: blue; background: white; text-decoration: none;} a.internal {color: green; background: white; text-decoration: none;} a:hover {color: purple; background: transparent;} a.important:visited {color: black; background: white; text-decoration: underline;} a.onsite:visited {color: black; background: white; text-decoration: underline;}
Then, simply call them out in the html with:
<P><A CLASS="important" HREF="http://www.useit.com/alertbox/9605.html"> Top Ten Mistakes in Web Design</A></P> <P><A CLASS="onsite" HREF="anchors.html">This document</A></P> <P><A CLASS="internal" HREF="#links">Links</A></P>
The links then look like this in your browser:
Top Ten Mistakes in Web Design
Implementation Bugs
- Netscape
- rules on 'a' override more specific rules on 'a:'
- Some background colors only appear if 'text-decoration: underline' is included in the rule
- Background color is rounded to the nearest of the 16 colors on the VGA pallette
- A:hover is unsupported
- A:active is unsupported
Caveats
- a:hover and a:visited are mutually exclusive
- declarations are just *suggestions*; users can easily override suggestions through user preference dialogs or personal style sheets
- Underlined links are an important clue to new users that a link exists; removing this visual clue may confuse users.