How To De-Asshole-ify Links


Category: Code
Tags: Firefox   assholes  css  design   links user experience

I loathe sites that set unvisited and visited links to be the same color. There are exactly two reasons that sites do this:

  1. A graphic designer thought it would be more harmonious to have them the same color.
  2. A business guy thought it would increase pageviews.

The worst part is, they’re both right. But they’re assholes because they’re selling out user experience to avoid picking a color or to inflate a not-very-useful statistic. Users are deliberately confused and led to click in circles for their trivial convenience or wrongheaded book-cooking.

This boiled over for me when I was trying to read CopyBlogger. They have some really nice writing, but I found myself opening the articles over and over because I couldn’t see that I’d visited it. I just gave up on reading the site, who needs assholes?

A few days later I remembered that Firefox has a setting in the preferences to override page and link colors. Unfortunately, it doesn’t let me override link colors and leave page colors alone.

The way to do undo the damage these assholes have done to their own site is to add a user stylesheet to Firefox. It’s a styling file that Firefox loads for every single page you visit. In Linux it’s \~/.mozilla/firefox/*random junk*/chrome/userContent.css. On other systems, search for the file userContent.css, though you may just need to search for the chrome directory and create the file. Here’s what to put in there:

` p > a { color: blue !important; text-decoration: underline !important; } p > a:visited { color: purple !important; text-decoration: underline !important; } `{lang=”css”}

This forces all unvisited links in the text of a page to be blue and underlined, and all visited links to be purple and underlined. This isn’t perfect, sometimes the text of a page will be on a blue background, but it works well for nearly all pages I visit. The best part about is is the p \> keeps it from changing link colors in headers and other parts of the page that are almost never on white backgrounds.