CSS for Blockin’ Stuff

Avatar of Chris Coyier
Chris Coyier on (Updated on )

I am not a big proponent of ad blockers. Besides than the fact that this site has ads on it, I generally just don’t mind it. I am a big proponent of you doing whatever you want to on your computer to control what is displayed to you on your screen. If you want to use user stylesheets, ad blockers, flash blockers, or whatever else, more power to you. Here are some CSS projects intended for blockin’ stuff.

Floppy Moose userContent.css

This is some pretty old stuff here, but hey, CSS doesn’t move that fast. The idea is that some browsers allow you to add additional default CSS to all pages (Firefox and Safari). This is some CSS that will block a bunch of links, iframes, and miscellaneous elements based mostly on their src or href attribute, and some on class/ID.

To use it in Firefox, you put it in a special place:

To use it in Safari, it’s a preference:

Opera supports UserCSS as well, there are instructions here.

The best I could find for Google Chrome was the Advanced Page Injector extension, which should do the trick for applying your own CSS (or JS) or all viewed pages.

View CSS

Gozer.org Ad Blocking CSS

This is similar in spirit to the Floppy Moose CSS, but looks as if it’s been updated more recently and is far more ambitious with the domains it covers and types of elements it looks for. Usage would be the same as above.

View CSS

Steven Frank’s shutup.css

The idea here is to block the comment section on blogs. Sites like YouTube and Digg are notorious for having soul-crushingly bad comments, so perhaps for the thin-skinned amongst us, you’ll have an easier time getting through the day if you just don’t see them. The CSS has some specific ID’s/classes it hides for specific sites, but also some very generic ones like #comments and .comments, which would block the comments area on most WordPress sites.

Installation again would be just like the screenshots above.

View CSS Moved to this page.

Using Multiple

You’ll need to copy these CSS files locally to use them. That’s good anyway, as it means you can tweak things to your own preferences. It also means you could just copy one into the other to use both at the same time.

Flash Blocking

If it’s specifically flash that you want to prevent from seeing (or at least loading) there are browser extensions/add-ons you can use for that:

  • Firefox: Flashblock
  • Safari: ClickToFlash
  • Opera 10: Enter opera:config#UserPrefs|EnableOnDemandPlugin
  • IE 8: Tools > Manage add-ons > Flash player add-on > More information > Remove all sites (then when visiting a site with flash, you’ll get a notification where you can opt-in on a per-site basis)

If you have any other ideas or favorite techniques for using the userContent.css idea, let’s have um!