Anne van Kesteren

links: style (and markup)

Almost everyone who is interested in webdesign and has basic knowledge of it, knows :hover, less people know that this CSS pseudo-class can be applied to multiple elements and that therefore, you shouldn't use a:hover. Why? Think of this:

<h3><a name="blah" id="blah">TITLE</a></h3>

Now combine that with a browser, which has very good CSS support, like Mozilla (or Opera, what you like). If you hover over this h3 element, you will notice that the color changes if the author of the document has sloppy CSS like this:

a:hover{
 color:red;
 background:transparent; /* although it is not a rule, you should always specify both 'color' and 'background' properties */
}

Internet Explorer does not show this behavior, since Internet Explorer doesn't support :hover for a elements, which haven't got href specified.

Basically there are two solutions to this problem. Probably the best is using a:link:hover and a:visited:hover. The other solution is don't use out of date HTML and use the id attribute correct:

<h3 id="blah">TITLE</h3>

Of course you can claim that you are doing this for backwards compatibility and so you can't use this method. Well, then you will have to use the CSS method, which is recommended anyway, since sooner or later, we won't have a elements anymore. And please don't choose the illegal third option (<a name="blah" id="blah"></a>).

If you want to know everything about these little interesting issues. And you should, since you are a webdesigner/developer, read the following pieces of text:

Comments

  1. Just to confirm that yes, I'm the same person that wrote the article and contributed to Simon's work.

    Posted by Bill Mason at

  2. The a element will be with us for a very long time. Consider the number of people who actually use proper XHTML. Then consider the subset of those people who will use XHTML 2.0. That's less than a dozen people at the moment (I would speculate).

    It will be with us for at least 20 years, if it disappears at all. Remember: XHTML 2.0 is not supposed to replace XHTML or HTML.

    Posted by Gary F at

  3. Suggesting people shouldn't use a:hover is pretty farfetched since the document language determines which elements are hyperlink source anchors though if you mean that should be used with care then fair enough since it covers all anchors.

    Then again you always have the option of Attribute Selectors, for example: a[href] in conforming user-agents.

    Posted by Robert Wellock at

  4. I suggest people use a:link:hover and a:visited:hover if there document contains out of date use of the a element.

    Then again, correct use for styling the a element should be promoted. You will have to learn it sometime, since I think there is no other way of detecting a link (through a CSS selector) within a XML application.

    Posted by Anne at

  5. Anne: And please don't choose the illegal third option (). What's so illegal about it?

    Posted by rj at

  6. Well, you are reffering to the title. IMHO it is just weird to write down:

    <h3><a name="blah" id="blah"></a>TITLE</h3>

    More specifically: "It just looks like tag soup". Besides that, it is more difficult to convert, when you are updating your old archives to let's say, XHTML1.0 Strict.

    Posted by Anne at

  7. To correct myself: name is valid XHTML. Though it is still tag-soup IMHO to use it like the example in the previous comment.

    Posted by Anne at

  8. To be even more precise, name is valid XHTML 1.0, but not valid XHTML 1.1

    Posted by Minz Meyer at