CSS: Link and: Visited Pseudo-Classes - Are Web Browsers Adhering to The Spec

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

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.

The :link pseudo-class does match visited links

It's a bit confusing but if you refer to the specification you will find:

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.

This is what is happening here. The trick is to create some restrictions to avoid having a big difference between the styles of visited and unvisited links.

Technically, all the styles you will apply to a:link will also apply to a:visited unless you override them inside a:visited and you are limited to the styles that you can apply inside :visited so you cannot override everything:

You can style visited links, but there are limits to which styles you can use. Only the following styles can be applied to visited links:

• color
• background-color
• border-color (and its sub-properties)
• column-rule-color
• outline-color
• The color parts of the fill and stroke attributes

In addition, even for the above styles, you won't be able to change the transparency between unvisited and visited links, as you otherwise would be able to using rgba(), hsla(), or the transparent keyword. ^ref

Here is an example to illustrate:

a:link {
  font-size:50px;
  border:2px solid red;
  color:black;
  padding:20px;
  box-shadow:5px 5px 0 blue;
  display:inline-block;
  margin:10px;
}
a:visited {
 color:red; /* this will work */
 border:5px dotted green; /* only the color will work */
 background:black; /* This will not work because we cannot change transparent to opaque value */
 
 /*All the below will not work*/
  padding:0;
  box-shadow:-5px -5px 0 purple;
  display:inline;
  margin:9584px;
  font-size:10px;
}

<a href="www.something.comg">not visited</a>

<a href="#">visited</a>

Browsers don't honor a:visited { text-decoration: none; }

The only CSS property you can apply on a:visited links in most Webkit-based browsers (like Safari) or Blink-based (Chrome and Opera) is color. Anything else won't work. It has something to do with browser history stealing. You can read more about it from here:

http://seclists.org/fulldisclosure/2013/May/13

However you can change the style of all links with a {text-decoration: none;}.

The selector itself is not dangerous, but if you combine it with Javascript's functions like getComputedStyle() things can get pretty ugly and by ugly I mean that other users can view and read your personal browser history.

Mozilla (Gecko engine) limited the selector properties to color, background-color, border-*-color.

when is the :visited pseudo-class applied to a hyperlink

It's applied when a link has been visited based on the browser history. Clearing your history will clear the visited state. There's no "timeout", as far as I know.

Mystery in visited and unvisited links

Unlike color, text-decoration is not among the list of properties that can be changed with the :visited pseudo-class (see MDN).

This results in visited links using the same text decorations that are applied to unvisited links. You cannot work around this.

Link styling behaviour in IE6

The other browsers are right; IE6 is wrong.

The selector a should match any <a> elements, while a:link only matches <a> elements that are unvisited hyperlinks (the HTML 4 document type defines hyperlinks as <a> elements with a href attribute). Nowhere does it state in either specification that a should automatically translate to a:link or vice versa.

Since there's no such translation going on, your two CSS rules have equally specific selectors (your class selector shares equal specificity with each of your pseudo-classes). So, your second rule is supposed to override the first rule for any <a> elements within div.myclass, regardless of their link state, thereby making it always red and with no text decoration.

By the way, IE7 also fails to apply the font-weight: bold style when you test with an <a> element in div.myclass that isn't a link, even though it's supposed to as there is no overriding font-weight style in your second rule:

<div class="myclass">
<p>This is a <a href="2">test</a></p>
<p>This is a <a>test</a></p> <!-- does not bold on hover in IE7! -->
</div>

---

Related Topics