Taming websites in your own browser

HTML lets Web designers annoy you with tags like embed, marquee, and blink, or with light green text against a blue-sky background. You can just curse or use a different site, but there’s a way to fight back: custom CSS in your browser. It can not only disable whole tags, but modify or get rid of unwanted elements in a site by setting rules for their classes.

You need to know CSS pretty well to venture into this; I’m assuming you’re comfortable with it. If you are, the tricky part is just to find out where it goes. For Firefox under OS X, under the “Help” menu, choose “Troubleshooting information.” In the window that comes up, look under “Application Basics” for “Profile Folder.” There’s a “Show in Finder” button next to it. Click on this, and you’ll see the directory which holds your profile.

In an unaltered installation, you should see a file called userContent-example.css. Copy this to userContent.css and edit it to suit your taste. There are a few suggested rules to start with; uncomment them if you like them.

Here ‘s a page explaning how to use custom style sheets with various browsers. Every browser and operating system will be different, and even different versions might vary.

Userstyles.org offers customer browser-based styles ready made, and there’s a browser add-on called “Stylish” for Firefox, Chrome, and Opera.

Twitter recently started pushing suggestions for following too much in my face. I found the fix to this by right-clicking “Inspect Element” and noting that the containing div element had the class “big-avatar-list”. Add the following CSS, and it goes away:

div.big-avatar-list { display: none; }

Websites don’t have to stay compatible with your stylesheets, of course, so use caution and be ready to revert if things get weird. But knowing this technique can give you a lot more control over your browsing experience.