Getting Around the “CSS History Leak” Limitations

UPDATE: We no longer use the checkbox method described in this article, but the method still works, should you choose to use it.

It came to our attention recently that our nice checkbox effect on visited links in the sidebar was no longer working in certain browsers

We discovered that this was due to a security issue, which meant that some css rules had been disabled for visited links.

This article describes the workaround we used to restore the effect, and suggests some alternatives.

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

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:

Transparent PNG checkbox mask

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

5 Comments Leave a comment

  1. Anonymous says:

    This is absolutely fucking brilliant.

  2. Tim says:

    Good workaround.

    How would you account for titles of varying length? I might have short title “Tim is Rad” but then one “OMG Tim is SuperRadtacular and Goodness me it sure is Cold This Summer in Melbourne (LOL)”…

    I’d hate to have loads of whitespace/margin between the short title and long one…

    • dan says:

      Hi Tim

      That shouldn’t be a problem. In our sidebar we have titles spanning one, two and three lines, and they all look fine. The whitespace and margin are the same no matter how long the title is.

  3. swhiteman says:

    Props, props, props. Now I can still do something graphical with my :visiteds.

  4. Andrei Vasilescu says:

    This workaround still work on Firefox 4/5 or IE 9?
    Is any method that work for firefox 4/5 or IE 9?
    Thank you in advance