Firefox 1.0 was released today.

One of the fun things you can do is alter the way Firefox (or Mozilla or Galeon) displays web pages by using custom CSS. Today I changed userContent.css to add these rules:

:link:before {
  content: "\0025c7";
  color: blue;
}

:visited:before {
  content: "\0025c6";
  color: purple;
}

*[href*="=http"]:before {
  content: "\0021b7";
  color: red;
}

*[href^="mailto:"]:before {
  content: "\002709";
  color: red;
}

*[href^="javascript:"]:before {
  content: "\002707";
  color: red;
}

These will display a blue ◇ next to unvisited links, a purple ◆ on visited links, and a red ↷ on links that have another URL embedded inside (usually indicating a tracking redirect), a red ✉ on email links, and a red ✇ on javascript links.

You can pick lots of fun shapes and symbols from Alan Wood’s Unicode page (note: there are lots more pages on his site with lots more symbols). To use a different symbol, just put in its Unicode hexadecimal value in the CSS, with six hex digits (i.e., use a leading 00).

I don’t know if I will keep these customizations, but it’s fun to play with. You can put any text or the value of any attribute before or after any HTML element. Mix this with hover effects for lots of fun! Opera users can also have fun with generated counters (for example, to number all the links on the page).

2 comments:

Hob Gadling wrote at Wednesday, November 10, 2004 at 11:01:00 AM PST

Hey Amit,

I hacked around and little more and got something like this. I'm using it all the time now.

(BTW, I couldn't figure out how to give you trackback?)

Hob

Hob Gadling wrote at Wednesday, November 3, 2010 at 10:50:00 PM PDT

Hey Amit,

I hacked around and little more and got something like this. I'm using it all the time now.

(BTW, I couldn't figure out how to give you trackback?)

Hob