web analytics

CSS History Leak workaround

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.

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.

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.

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.

Article Source: http://www.webdesignfromscratch.com/html-css/getting-around-the-css-history-leak-limitations/