Friday 10 September 2010

Google Chrome goes wonky over CSS a:link and a:visited

Arriving back in the wee hours of this morning I took a look at some Toxic Drums web pages. To my amazement and distress I noticed there was something wrong with the web site. The problem was that a lot of the links (particularly in the generic "see also" link bar) had gained a black background.

I investigated and found that this only appeared using Google's "Chrome". All other browsers were displaying the web pages as they had always appeared. This was slightly consoling but still a major worry. Eventually I tracked this down to the way Google Chrome was interpreting the CSS (Cascading Style Sheet) info.

In short if the "link" pseudo-class actually specifies a background color then if the "visited" pseudo-class doesn't specify a background color then Chrome set the background colour to black. Quite where it ascertains the "black" value remains a mystery for me but I guess it could be arbitrary or a default within Chrome.

e.g.

.style4 a:link{color: #CC0000; background-color: #FFFFFF;}
.style4 a:visited{color: #6600FF;}
.style4 a:hover{color: #FFFFFF; background-color: #CC0000;}


the above used to behaves as expected with only the color changing if the link has been visited. Basically an anchor in style4 has red text on a white background for a link and the color changes to purple for a link that has been visited. The hover psuedo-class is kind of irrelevant to this issue. But the display behaviour seems to have changed in Chrome and now the "visited" links were appearing with a black background. A remedy was found by specifying the background color in the "visited" CSS psuedo-class as below.

.style4 a:link{color: #CC0000; background-color: #FFFFFF;}
.style4 a:visited{color: #6600FF; background-color: #FFFFFF;}
.style4 a:hover{color: #FFFFFF; background-color: #CC0000;}


On further investigation I also found that by removing the specification of the background color in the "link" and having no background color in the "visited" also did the job as illustrated below:

.style4 a:link{color: #CC0000;}
.style4 a:visited{color: #6600FF;}
.style4 a:hover{color: #FFFFFF; background-color: #CC0000;}


What I would be interested to find out is whether Google has got the interpretation of the CSS right and all other browsers are actually fudging things or has Google gone and made a mistake with their latest "update" of Chrome. It could be that the interpretation can go either way but I would like to know.