Limitations on Styling Visited Links

You might remember about a year or so ago, there was some discussion about the potential privacy issues caused by the CSS :visited pseudo-class. In a nutshell, it was discovered that this pseudo-class along with some scripting, could be used by websites to “sniff” your web browsing history.

You can read more about the problem and subsequent solution here and here.

It seems now that most of the latest versions of all browsers have taken measures to combat this issue. Fortunately, you can still style text links using the :visited pseudo-class. This is a good thing, and I hope we always have that ability. Visited links are a staple of the web, and they should remain.

A Simple Example

Because of the measures taken with regards to visited links, I thought I’d demonstrate some of the limitations that you’ll face if you decide to add some unusual styles to a visited link state.

Here’s the HTML I’ll be using:

Example Link

I’m using google.com for the example link because it’s the most likely link to already be visited. If you want the demo to work, make sure you click the link to ensure you have google.com in your history.

And here’s the CSS:

a:link {
  font-size: 40px;
  color: #222;
}

a:visited {
  display: block;
  width: 300px;
  height: 300px;
  border: solid 4px green;
  margin: 10px;
  padding: 20px;
  outline: solid 4px red;
  float: left;
  background: black;
  font-family: sans-serif;
  font-size: 100px;
  font-weight: bold;
  font-style: italic;
  letter-spacing: 20px;
  border-radius: 20px;
  text-decoration: none;
  color: limegreen;
}

a:hover {
  color: white;
  background: #333;
}

Yep, that’s right. I’m adding the kitchen sink to the :visited pseudo-class so we can see if any of those styles get rendered.

I’ve set up a simple JS Bin that you can view and mess with at your leisure. Try it in different browsers. If your browser has not yet plugged the :visited privacy bug, then you should see a huge ugly block link.

In browsers that have dealt with this privacy bug, the only line from the :visited declaration block that should be visible is the color property. Everything else will be ignored.

Which Browsers Allow History Sniffing?

I can’t possibly test on all browsers and versions, so if anyone has any feedback on testing, feel free to comment. But according to my tests, the browsers that allow the :visited styles to take effect are IE6-8 and Opera 11.50.

I’m assuming all versions of Opera recognize the :visited styles, but I can only currently test in that one. Maybe Opera has done something else to combat the history issue that still allows that browser to render the styles, but I really don’t know. But it does seem odd that Opera allows the styles.

And remember to visit the link in each browser otherwise you’ll get the impression that they all have the bug patched.

So, if you’re trying to do anything fancy with visited links, just realize that you may run into some bugs and it’s probably best to just stick to the color of the text, and nothing more — which is really all you’ll ever need for visited links.