Staticfree Blog

Firefox's slogan, "taking back the web" isn't just about blocking pop-up ads. One of the new features that comes in it out-of-the-box in version 1.5 is a way to add custom CSS to other peoples' websites (when viewed on your computer). This lets you fix the little quirks that may make themselves evident on websites that you frequent, but have no ability to fix.

One such site is my Livejournal friends page. When I view it in my normal 2-up browser mode (with 2 Firefox windows open, side by side each 640px wide), images embedded in the page often cause a horizontal scroll bar. This then causes the text to fill to fit the resized area and makes me maximize the window to be able to read it. While I can tweak the colors and such, I can't actually modify the CSS without getting a paid account (and I don't think I care that much).

My solution? Close Firefox then edit my ~/.mozilla/firefox/profilename/chrome/userContent.css file. Then add this block:

@-moz-document url-prefix(http://xxv.livejournal.com/friends/){
  img {
     max-width: 70%;
     height: auto;
  }
}

(If you are trying to use this, make sure you modify the URL for your username).

Now if I open my friends page in Firefox, it scales down all the images so they fit in the browser. If I want to look at one, I can maximize the window or open the image in a new tab.

userContent.css has been around for a long time to allow you to inject default CSS into all the pages that you view. Firefox 1.5 supports a special selector type @-moz-document which lets you match based on the current URL.

Being able to change the way you look at websites is really what "taking back the web" is all about. Platypus is another wonderful example of this, ultimately more useful than the hack mentioned above. With it you can change content in addition to simple style. Don't like an aspect of a website you frequent? Platypus lets you click on it and delete it, making it go away the next time you visit too.

Remember: a website is just text and links to images organized in a standard way. You can do anything to text, if you know how it's arranged and if you have control of what presents it. Could you do this in a closed, binary format such as Flash? No. Never.