Visited links can only be differentiated by colour

Showing whether a link on a web page has been visited or not can be very useful. One example that many will be familiar with is how it helps you know which links you have already followed from a Google search results page—links to pages you have already visited are a different colour than the other links.

Changing only the colour can be a bit subtle though, especially for people with colour vision deficiency. Depending on which colours are used to differentiate between visited and unvisited links it can be hard to tell them apart. To make the difference more obvious, there are a number of techniques involving background images, generated content (like the one I describe in Check marking visited links), and other CSS properties. However, if you’ve been using any similar tricks to style visited links, it’s time to forget about those and start relying on colour alone.

For privacy reasons, most browsers now limit the styling that can be applied to visited links to those that are colour related: color, background-color, border-*-color, outline-color, column-rule-color, fill, and stroke. I won’t go into the details, but in summary the problem is that without this limitation, malicious web pages can check if a certain URL is in the browser history by loading different background images or using JavaScript to detect style changes. This privacy hole has been or will be plugged by browser vendors.

For details and discussion about this, see Plugging the CSS History Leak on the Mozilla Security Blog, Preventing attacks on a user’s history through CSS :visited selectors by L. David Baron, and privacy-related changes coming to CSS :visited on Mozilla Hacks. See also Limitations on Styling Visited Links, a recent article by Louis Lazaris.

So what does this mean for web developers? Well, obviously you will have to settle for changing the previously mentioned colours only. No font styling, padding, background images (not even background-position), generated content or other things you may think of will be applied. This limitation seems to be implemented in the latest versions of all major browsers except Opera.

One trick that remains is that you can change the background colour of a visited link if you also give the unvisited state a background colour (which can be identical to the page’s background colour if you want to). That way it is still possible to make sure visited links are different enough to be easily distinguished, even by people with colour vision deficiency.

I made a quick styling visited links demo page where visited links will be black on yellow, with a red bottom-border, in browsers that have implemented the styling restrictions. In older browsers (and Opera, currently at version 11.60), visited links will be large, bold, have a 4px border, a left padding and a background image. I also added a test for the sibling combinator (+) that makes the text that follows the links green and bold unless the change has been implemented.

While I can understand that some don’t like this limitation, I think it’s good that browsers plug this privacy hole and that they’ve managed to find a reasonable balance. Having to rely on colour alone is a valid accessibility concern, but it is still possible to change both the text and background colour to make the difference more obvious.

Posted on December 8, 2011 in Browsers, CSS