• Home  / 
  • Blog
  •  /  Getting Around the “CSS History Leak” Limitations

Make sure you don't miss the latest insights and tips. Click here to sign up for my mailing list now! »

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

About the author

Dan Johnson

Dan used to be a WordPress developer at WDFS, but now he has gone off to pursue his passion for art, and he blogs about making a living from creativity at Right Brain Rockstar

Anonymous - 3 years ago

This is absolutely fucking brilliant.

Tim - 3 years ago

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 - 3 years ago

    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.

swhiteman - 3 years ago

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

Andrei Vasilescu - 3 years ago

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

Comments are closed