Privacy and the :visited selector

Historically, the CSS :visited selector has been a way for sites to query the user's history, by using getComputedStyle() or other techniques to walk through the user's history to figure out what sites the user has visited. This can be done quickly, and makes it possible not only to determine where the user has been on the web, but can also be used to guess a lot of information about a user's identity.

To mitigate this problem, changes have been made in Gecko 2 to limit the amount of information that can be obtained about visited links.

Little white lies

The first change is that Gecko will lie to web applications under certain circumstances. In particular, getComputedStyle() and similar functions such as element.querySelector() always return values indicating that a user has never visited any of the links on a page.

Also, if you use a sibling connector such as :visited + span, the <span> will be styled as if the link were unvisited.

And, in a rare scenario, if you're using nested link elements and the element being matched is different from the link whose presence in history is being tested, the element is drawn as if the link were unvisited as well.

You will still be able to visually style visited links, but there are now limits on what styles you can use. Only the following properties can be applied to visited links:

In addition, even for the properties you can set for visited links, you won't be able to change the transparency between unvisited and visited links, as you otherwise would be able to using rgba() or hsla() color values or the transparent keyword.

Here is an example how to use styles with discussed restrictions:

CSS
:link {
   outline: 1px dotted blue;
   background-color: white;
   /* The default value of background-color is 'transparent'.
      You need to specify a different value, otherwise changes on :visited don't apply */
}

:visited {
   outline-color: orange;     /* visited links have an orange outline */
   color: yellow;             /* visited links have yellow colored text */
   background-color: green;   /* visited links have a green background */
}

Impact on web developers

Overall, this shouldn't affect web developers too significantly. This may, however, require the following changes to sites:

  • Using background images to style links and indicate whether or not they've been visited will no longer work, since only colors can be used to style visited links.

See also

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/privacy_and_the_:visited_selector

CSS Security