No 'a:visited' in Safari 5… jQuery to the rescue?

With the release of Safari 5, it seems that the ‘:visited’ CSS pseudo selector no longer takes affect. I completely understand it being removed due to breadcrumb sniffing but from a user’s perspective, differentiating between links that you have visited and those that you have not is very handy.

jQuery to the rescue

Using jQuery, we can easily add this functionality back in, without the XSS problems associated with the browser handling it.


$('a:not(.visited)').click(function() {
  $(this).addClass('visited');
});

You can then go ahead and set a different style for links that have the ‘visited’ class.
The problem with this approach is that it will only work for links opened in a separate window or tab and not persist when you leave the current page, as all added classes will obviously be removed. There is probably a way to store a list of which links have been visited in a cookie, however each link would need a unique identifier… something for another time.

Update

It seems that the ‘:visited’ selector does work in some cases in Safari 5 but not sure of the circumstances, can anyone shed any light on this?

Join the conversation

4 Comments

  1. You should try to like this:
    $(‘a:not(:visited)’).click(function() {
    $(this).addClass(‘visited’);
    });

Leave a comment

Your e-mail address will not be published. Required fields are marked *