Getting around the "CSS History Leak" limitations

The Problem

When we last redesigned Web Design From Scratch, we added a css rule which displayed a ticked checkbox image next to any article links which had already been visited, as well as changing the colour of the links to give them less contrast. This is a fairly commonly-used effect which makes it easy to see at a glance which articles you have read on a site, and which you are yet to read.

Checkbox effect on visited links

The effect makes use of the :visited pseudo-class which allows you to apply different styles to visited links and unvisited links.

We recently noticed that in certain browsers, the checkbox image was no longer appearing. The visited links still changed colour, but the image was nowhere to be seen, and the padding which made room for the image was also no longer applied.

After a bit of Googling, we came across a problem identified by Mozilla as the “CSS History Leak“. This is a security issue whereby a hacker can potentially access your browser history using the JavaScript function getComputedStyle().  (The Mozilla article goes into more detail if you want to know the specifics.)

Now, the way they propose to get around the security issue,  in addition to some changes to their layout engine, is to disable certain css rules for the :visited pseudo-class.

The disabled styles include background-image, background-position, padding, and basically anything which changes the visual layout of the page, hence why our nice checkboxes had disappeared.

Strangely, the checkboxes still worked in Firefox at the time. It was only Chrome that seemed to be a problem, although I couldn’t find any articles by Google on the matter. I still don’t know which browsers have implemented the changes, but it’s likely that future versions of all major browsers will address the issue.

The workaround

To restore the checkboxes, we had to think about which css rules could still be applied to visited links, and how they could be manipulated to create the desired effect.

We knew that the color and background-color rules were still ok, so we hit upon the idea of using a transparent png combined with a change of background colour, to create the illusion of the checkbox image.

This works by applying a background image to unvisited links. This image is a large square, the same colour as the background of the sidebar (in this case #262626), with a transparent cut-out of the checkbox shape in the top left corner.

Here is the image (cropped) on a green background, so you can see how the background colour shows through the transparent checkbox area:

So, for unvisited links, we set the background colour to #262626, the same colour as the image, so that the checkbox cutout will be invisible.

And for visited links we simply change the background color to #c3c3c3, a light grey. The background image is inherited from the unvisited link and the light grey shows through the transparent section of the image, giving us our checkbox style. (See the sidebar for a live example.)

This won’t work in IE6 due to lack of support for transparent png-24 images. You could probably apply one of the IE png fix hacks to get this to work in IE6, but we didn’t feel the need, as the text color still gives an indication of which links have been visited for IE6 users.

Alternatives

The most elegant alternative is to do as most browsers do by default, and simply change the text colour of visited links. This may present accessibility issues for users who can’t see certain colours. A high difference in contrast between the two styles would solve this, but you may have trouble fitting this into a design.

If anyone has any other innovative workarounds for this problem, please leave a comment below.

References

• Plugging the CSS History Leak
• Preventing attacks on a user’s history through CSS :visited selectors