Tired of distracting ad images cluttering up your web experience, or even your email? Here is a simple way to keep many of these ads from displaying in your browser. The technique below works for any Gecko-based browser (Mozilla, Firefox, Camino, Netscape7).  It also works for Apple's browser: Safari.  See the special instructions for Safari below.  And it even works with the Thunderbird mail client!  See Thunderbird directions below.  Also, check out the new notes on dealing with Flash advertising, below.  Finally, I've improved the ad blocking based on user feedback.  Already using it?  Grab the latest for even better results.

Get the userContent.css file     Updated: now GMail compatible!

Download a pre-made userContent.css.

What is in userContent.css?

userContent.css is a text file that contains CSS rules.  These CSS rules are used by your browser to control the appearance of web pages.

How to use userContent.css with: Firefox/Mozilla/Camino/Netscape

You need to place the userContent.css file in the chrome directory of your browser user profile.  The different browsers store your profile in slightly different places.  For macos X, the profile chrome directory locations are:


Restart your browser to pick up the styles.  Go to your favorite sites and see that many ad images are gone, but other images are still there!

How to use userContent.css with Safari

Save userContent.css somewhere convenient (I suggest home:Library:Safari) and then launch Safari.  Go to the Preferences... menu item, and choose the Advanced tab.  Use the stylesheet popup to choose the new userContent.css file.  There is no need to restart Safari - it will immediately apply the stylesheet to all pages.

How to use userContent.css with Thunderbird         New!

You need to place the userContent.css file in the chrome directory of your Thunderbird user profile.   For macos X, the profile chrome directory locations is:

Why should you use a custom user stylesheet with Thunderbird?  For the same reason you should use it with your browser: to block unwanted ads!  Many mail providers can place ads in your email.  Using this stylesheet you can block almost all of them.

How does it work?

Once you have installed the userContent.css file, your browser will no longer show certain ad images and ad iframes.  If you have no idea what I'm talking about, no worries.  Simply install the userContent.css file and give it a try.  Many ads in web pages will no longer be there!

If you know a little HTML and CSS, here's how the rules in my userContent.css work.  One of the CSS rules in the file has a set of selectors that look like A:link[HREF*="ad."]  IMG and a rule that looks like { display: none ! important }.   This selector is CSS's way of saying Find all the images that are wrapped in links, where the link takes me to a url that has "ad." somewhere in it.  The rule is CSS-speak for Don't display that image. 

Then there are similar selectors paired with a rule that hides ad IFRAMES as well.

There are a bunch of different selectors I use, all of which are designed to match portions of urls that correspond to ads, without matching many urls that aren't ads. Matching urls which aren't ads are called false positives.  If you have a false positive, that means that something that wasn't an ad got blocked.

Quality Control - Minimizing False Positives

I run my browsers (both Mozilla and Safari) with my own ad blocking userContent.css full time.  I have carefully designed my CSS selectors to catch ads but not other content.  However, sometimes I still encounter a blocked image that should not have been blocked.   To fix these I  can do two things.  First, I can find which ad selector matched the blocked content, and try to refine it in a way that still catches all the ads it had been catching, but no longer catches the blocked content.  If I cannot find a way to do that, I simply ad a new selector to the rule at the very bottom of the userContent.css file.  That rule is { display: inline ! important }, which is CSS-speak for display this normally.  The selectors you see with this rule are all urls that correspond to false positives I found.  For example, the use of the selector  A:link[HREF*="netflix.com/AddToQueue."] IMG  fixed the problem of invisible buttons on Netflix's order form.

There are a number of other ad blocking css rule sets out there, several based on mine.  Most are not as conservative in their blocking strategies as mine, though.  If you have tried others and found they were too aggressive, give this one a try.  Because it is conservative, it is also a great starting point for building your own customized userContent.css.

Dealing with Flash ads       New!

The css rules I provide in userContent.css do not block Flash animations that are ads.  To do that there are a couple of things you can try.  The first is the simplest and works with any web browser: find the Flash library on your computer and delete it!  This will eliminate all Flash animations in your web browser.  If you are like me and don't care much about sites that using Flash for things other than advertising, this solution should work well for you. 

But what if you want to see something that is a Flash animation (like JibJab's hilarious singalongs)?  Well, if you use a Gecko-based browser like Firefox, Mozilla, Camino, or Netscape, you are in luck.  Jesse Rudderman has authored some css  that will hide all flash animations unless you click on them.  If you click on them they are played.  You can add his css directly into your userContent.css file and restart your browser to pick up this Flash blocking.  You should also check out the rest of his excellent site for other browser tips.

I wanted a more subtle look to my blocked Flash ads than Jesse provided, so I altered his css to this for my use:


Feel free to use that if you like the look better. 

Distribution

Everyone is welcome to use my userContent.css.  You may also redistribute it, with or without your own modifications.  All I ask is that you leave a comment in the userContent.css file indicating that is from, or derived from, the ad blocking css found at www.floppymoose.com.

Thanks

Thanks to Daniel Glazman for telling me about the substring (*=) selector in CSS3, and for implementing support for it in the Gecko layout engine, which is used in Firefox/Mozilla/Netscape/Camino/Thunderbird.  Thanks to Jesse Rudderman for the Flash blocking.  And thanks to the many folks who have given me feedback and helped to improve the css ad blocking rules.