Welcome to Nerdville

I try very hard not to be a buzzkill; my cynical personality makes it hard for me not to trash talk things that offend my sense of aesthetics, but if I did that whenever I felt the urge, I fear I’d never do anything else. As a web developer in 2007, as much as it pains me to say so, there is still an awful lot to feel queasy about.

You don’t see a lot of “under construction” graphics around these days, let alone animated ones, so at least we have that to be thankful for. We have certainly come a long way since:

www.geocities.com/city/alley/dumpster/MYHOMEP~1.HTM

Still, the Internet—as most other places as well, unfortunately—is riddled with tasteless, colorblind people. Fortunately for those of us who are total hardcore nerds, even other people’s lack of taste doesn’t have to affect our web browsing experience thanks to a little something called (or at least, what I call) per-site styles.

Since the introduction of Cascading Style Sheets (what I will henceforth and forevermore refer to by its acronym “CSS”), it has been possible for a user to specify their own global stylesheet that would then be applied to every site they visited. I believe that all the major browsers support this feature thanks to urging by the W3C to do so. With a basis in accessibility concerns, the idea of a user stylesheet is quite a good one. The problem with making global changes in a user stylesheet for aesthetic (rather than accessibility) reasons is that you run the risk of having those styles applied to other sites in places that are inappropriate and/or ugly. Enter per-site styles.

Let’s say your friend has a blog and you really like reading it… Except for the minor detail that the light text on a bright background gives you a throbbing headache and even the most articulate and erudite posts can scarcely overcome the two boxes of Kleenex saturated in blood from your ears and nose that… I digress. With all the technology and extensibility available in the modern web browsing toolkit, certainly there must be a way to apply a single stylesheet to a single site.

Actually, there are quite a few ways. Using your favorite search engine I’m sure you could find three or four without much effort. But since you’re already reading this, why don’t you listen to my idea first? I’ve combined a couple of clever ideas into one strategy that works well for me using Firefox and an extension called Greasemonkey. If you don’t know what Greasemonkey is, you’re not very nerdy (but that’s okay, you can click my link and read all about it, then come back and pretend you already knew).

The basic idea is to use Greasemonkey to run a very short piece of JavaScript when every single page loads that adds a certain custom and unique class identifier to its body tag. For example, if you were on CNN’s website, cnn.com, this script would add a class attribute to the page’s body tag similar to www-cnn-com. Then, within your global user stylesheet you could use that unique selector to apply style changes to the page, knowing that they would only ever work within cnn.com.

So, how is it done? First, install Greasemonkey. Then, create a new user script. All of this stuff is covered in the Greasemonkey documentation, but really it’s so easy even a little newborn eight pound, six ounce infant baby nerd could probably figure it out.

Within your user script, add this code:

If you’re a good nerd you don’t need me to explain this to you. Nevertheless, for the sake of thoroughness, I will. First, we’re adding an event listener to the page so that this bit of code only runs after the page has finished loading. The first line of the function converts the hostname of the site into an ID by replacing periods with hyphens. The next line finds out if there is already a class identifier within the body tag and, if so, appends our new one. If there wasn’t one, it just adds ours.

So now, if you wanted to change all of the paragraph tags within CNN’s site so the text within them was red (for some stupid reason), you could use the following CSS:

In Firefox, you can put this bit of CSS into your userContent.css file, which lives in your profile directory. In OS X, that’s located in ~/Library/Application Support/Firefox/Profiles/<some terrible profile ID string>/chrome/. In Windows I think it’s in c:\Documents and Settings\Application Data\ etc., etc. Good nerds will use the Googles to find out more.

Happy styling!