Different tab colors for different contexts

I love Firefox.  Love love love it, especially because I can tweak many things about it to make things work just the way I want.  (Like creating Greasemonkey scripts to make other peoples’ websites do my bidding.  Or syncing not only my bookmarks and passwords between computers, but also my Stylish userstyles.)  Google Chrome may be zippier, but until I can run AdBlock Plus, All-in-One Gestures, Colorzilla, Firebug, FireShot, Firefox Sync, Greasemonkey, Open With, Stylish, and Update Notifier in it, I’m sticking with Firefox.

Anyway, the point here is that I wanted to have my Firefox tabs for different environments show up as different colors in my browser.  As a web developer, I spend a lot of time in a localhost development server, on a staging dev server, and on a live web site.  I may have ten tabs open, each of which could be from any of my environments, and each of which may look identical until you click into it to see the actual URL.  So I spent a lot of time clicking back and forth between them trying to find the other page I’d been working on.  I wanted a quick visual representation to show which of those environments I was in.

If you’ve never heard of userChrome.css, you can use it to change a lot of stuff that you don’t like about the “chrome” (or the look of the browser window itself — completely unrelated to the browser Google Chrome).  You add some CSS to the file (which in Windows is found in %appdata%/Mozilla/Firefox/Profiles/<profile-id>/chrome ), then save it and restart Firefox, and voilà, some change has been made to your chrome.

I found a Stylish forum that asked about my very question: can you customize the color or other style of the tab based on the domain of the URL?  Fortunately, the answer was yes.  What you have to do is write a CSS selector based on the favicon in the tab window.  (So if a site doesn’t have a favicon, this hack won’t work.  Fortunately, all of the ones I wanted to style do have a favicon, and most other sites on the web do too.)  The basic CSS selector looks like this:

tab[image*="example.com"] {background:red !important;}

That means, “For every tab that has a favicon whose url includes the text ‘example.com’, give it a background-color of red.”  In my case, I wanted my localhost to show light green, the staging server to show light yellow, and the live server to show light red.  This is the css that I came up with:

tab[image*="localhost"] {background-color:#CBEDCB !important;} /* light green */
tab[image*="dev.mycompany.com"] {background-color:#EDEDCB !important;} /* light yellow */
tab[image*="live.mycompany.com"] {background-color:#EDCBCE !important;} /* light red */

This worked perfectly for me — now I can easily distinguish between all of my development environments.  Firefox even makes the active tab a brighter version of the same background color (or is it, “Firefox dims the non-active tabs”?  That seems more likely.), so you don’t have to specify a style to tell which tab is the active one.

I’d be interested to know if there’s a way to accomplish the same thing in other major browsers, but this is how I did it in Firefox.