Grow your CSS skills. Land your dream job.

CSS for Blockin’ Stuff

Published by Chris Coyier

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/classnames 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

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!

Comments

  1. That is a good list of ways to control what renders on your computer – love the name Floppy Moose, rather cheeky.

  2. bill
    Permalink to comment#

    Firefox (or Chrome) + Adblock is all you need.

  3. I agree with Bill, but I never knew it was possible to block ads with CSS, pretty innovative! Thanks for sharing Chris!

  4. Completely forgot about the custom CSS in Firefox. I love how making websites helps you in other things that average users simply won’t be able to do.

    @bill: I don’t like add-ons that completely block ads since most of them don’t bother me like Chris. Others are simply annoying though and slow down the page and it would be great to hide them on a site by site basis. That’s just me though.

  5. brn
    Permalink to comment#

    Great article. I had forgotten about the custom CSS in Firefox tool. Thanks

  6. senshikaze
    Permalink to comment#

    no chrome love? whats up with that?

    • Ant
      Permalink to comment#

      Yeah, I want analogue of stylish plugin from Firefox. One stylesheet is not enough for me.

      One of reasons I still not switched from Firefox to Chrome.

    • There is information in the article about Chrome.

    • senshikaze
      Permalink to comment#

      and so there is. yay for reading! sorry! :)

  7. I dont use any Adblock. There is a reason the content we read on the web is free, and thats adds. The adds is not annoying (mayby som flash adds). I love the site Chris, keep up the good work!

  8. Permalink to comment#

    +1 for ClickToFlash. It’s great.

  9. +1

    there are some hacked sites that incorporate css popups. this definitely helps.

  10. Marc
    Permalink to comment#

    Use clickToFlash for a while now and it’s pretty good. Has anybody a good solution against popUNDERS? They seem to be getting worse all the time…

  11. Great article Chris. Thank you.

  12. Havvy
    Permalink to comment#

    Stylish extension for Firefox + userstyles.org also works.

  13. Ant
    Permalink to comment#

    I am big fan of user css and adblock. I use stylish plugin for css (so you can have more than one stylesheet and enable / disable when you want) and adblock+ VS banners.

    And I use css to block not only banners, I also hide sidebars on wordpress blogs /* evil laughter goes here */

  14. There’s a prank here somewhere…

    *{ border: 10px solid red; }

  15. bokman
    Permalink to comment#

    OT:

    Chris, how do you make the green arrow in the second image?

    Thanks.

  16. I am a big fan of Safari Adblock. I know advertising raises a large proportion of many blogs revenue and I do whitelist blogs with attractive and relevant advertising but until the online advertising industry clears up their act I don’t want the misleading content they impose on our screens.

    @Prydie

  17. DJ
    Permalink to comment#

    Like Chris – no bit deal UNTIL ABOUT THE LAST YEAR. Ads have gotten to the point (like the &!%# watermarks which have escalated into motion ads now taking nearly 45% of the TV screen) where advetisers now think they OWN your attention and it is their God given right to be noticed always and at all times.

    Until recently I’ve always been able to select “open all in tabs” on by webdev bookmark very easily. NOW, the 10 sites NEVER FULLY LOAD, they time out first! You can’t read an article for all the wild color changes and motion in the flash ads. Of course the site won’t even display until after the 30-40 seconds that it takes for the flash ads to load – most of us wouldn’t even come close to tolerating that crap if it was Microsoft slowing something like that.

    So, more power to the blockers and no bleeding-heart “poor advertisers” for me. When they get back to acting responsibly I’d be happy to turn them back on.

    Keep it up Chris!

  18. Firefox users may find this add-on very useful.

    It allows you to turn on and off custom styles sheets or to assign any styles sheet to specific domains.

  19. We don’t need to block ads from sites that we like, but maybe block the ads from sites that take forever to load.

  20. Todd F.
    Permalink to comment#

    In the past few weeks alone I have seen Hostgator ads everywhere on my laptop when I surf. They must be on a campaign.

  21. James
    Permalink to comment#

    Ad-block for me. Basic security measures make it mandatory when even Blizzard suffers from malware-pushing ads. However, deserving sites like arstechnica.com can still earn a place on the whitelist.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".