Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS :link and :visited pseudo-classes - are web browsers adhering to the spec?

The W3.org CSS specification states the following (emphasis mine):

  • The :link pseudo-class applies for links that have not yet been visited.
  • The :visited pseudo-class applies once the link has been visited by the user.

The two states are mutually exclusive.

This means that any style applied to the :link selector should only be applied to unvisited links. However, the only property for which this is true appears to be color. Applying font sizes, backgrounds and so on to the :link selector targets all links.

There is a note further down the page that states:

Note. It is possible for style sheet authors to abuse the :link and :visited pseudo-classes to determine which sites a user has visited without the user's consent.

UAs may therefore treat all links as unvisited links, or implement other measures to preserve the user's privacy while rendering visited and unvisited links differently.

However, as far as I'm aware this only applies to the styles returned by Javascript, not to the display of the styles themselves.

Here's a JS fiddle showing the issue. Are the browsers deviating from the spec here, or is there something I'm missing?

like image 377
DisgruntledGoat Avatar asked Oct 17 '11 09:10

DisgruntledGoat


People also ask

Which statements are correct about pseudo-class in CSS?

They can be used for styling visited and unvisited links differently. They can be used for styling an element when it gets focus. Answer: They can be used for styling an element when you hover mouse on it.

What is doing link pseudo-class in CSS?

The :link CSS pseudo-class represents an element that has not yet been visited. It matches every unvisited <a> or <area> element that has an href attribute.

Which CSS property is used to change the style of visited links?

The :visited selector is used to select visited links. Tip: Use the :link selector to style links to unvisited pages, the :hover selector to style links when you mouse over them, and the :active selector to style links when you click on them.

What pseudo-class is used to indicate a visitor has visited a hyperlink?

The :visited CSS pseudo-class represents links that the user has already visited.


1 Answers

The line,

"UAs may therefore treat all links as unvisited links, or implement other measures to preserve the user's privacy while rendering visited and unvisited links differently."

Isn't applicable to styles returned by JavaScript only — it is exactly as it sounds. This means that browsers may just ignore certain properties on :visited entirely (which is what's happening in this case). Since the font-size would increase the size of the containing element, allowing the property to be different for :visited links would undermine the other security measures implemented by the browser.

A browser could choose to recalculate the dimensions without the :visited styles applied, if it wanted to. Naturally, this is more work and less performant than just disallowing certain properties. It's clear that the decision has been made based on the fact that there is no real need to use different font sizes, backgrounds, etc to differentiate between visited and unvisited links and, generally, most developers will stick to just modifying the colour slightly.

So no, they're not deviating from the spec, they're taking advantage of a permissible exception.

like image 125
Andy E Avatar answered Sep 22 '22 21:09

Andy E