Firefox site specific stylesheets


One of Firefox’s capabilities that I’ve always thought to be rad but never particularly useful to me* is the ability to assign custom CSS rules to a particular domain or page. Nearly all the sites I frequent employ a design that works for my needs and tastes so there hasn’t been a reason for me to go messing them up.

A colleague recently pointed me to the Drug Music Webcast. Being new to the webcast, I’ve been making my way up through the archives. I’m not familiar with all the bands so like keeping the playlist open in the background so I can reference who I am listening. This is a design that just doesn’t do it for me. I cleaned the page up with some temporary CSS using the Web Developer Toolbar and needed away to keep those styles intact for the next visit. This is where userContent.css comes in.

Any styles added to userContent.css will be applied to ever page you open online. To target a specific site, Mozilla has included the @-moz-document url-prefix(). Add the domain (and page if needed) between the parenthesis and wrap standard CSS rules between the familiar {..}. Here is the CSS I’m using for the Drug Music archive:

@-moz-document url-prefix( {
  body  { background: #fff !important; }
  font  { color: #333 !important; }
  a     { color: #f90 !important; }
  a img { display: none; }
  a[href^=""] {
	background: #333 url(;
	border: 1px solid #f90;
	display: block;
	float: left;
	height: 15px;
	margin-right: 5px;
	width: 15px;
  a[href^=""]:hover {
        border-color: #333;
  b      { font-family: Arial, Helvetica, sans-serif; font-weight: normal; }
  a+a+b	 { font-weight: bold; }

The !important‘s are needed to overwrite inline styles and font tags. Firefox’s support for attribute and sibling selectors also make for alternative ways to manipulate HTML that lacks any class or id hooks. I only want to listen to the high quality versions, so hid the link for low quality using an attribute selector. Images can be referenced from userChrome.css as well. I tried pointing to the image locally but was unsuccessful so went the webserver route. Why a bass clef? It’s hot.

And that’s it. I can now listen to an awesome webcast and know who I am listening to without a headache. I did decide to leave the flying saucers in the header though – I dig them in moderation.

* I do have all these rules saved in userContent.css to protect from ads, but those are assigned to all websites and I just had to copy/paste.

Skateboards and bikes are better at nights

Skateboards and bikes are better at nights. 0 comments.

Search WayTooCrowded
The Header Should Always Point Home