Ad Blocking in Safari (Firefox, OmniWeb, etc.) Using CSS

(Updated September 25, 2005 with rules to hide ads, seeing how there seems to be a lot of people being referred from there. Folks, the instructions below have been amended and are now current.

safariIcon.gifOne thing I’ve really missed in Apple’s Safari was the ability to block ads. This is something I’ve taken for granted after using Mozilla and Camino [nee Chimera]; once you’ve gotten used to surfing without the visual noise of ad banners, it’s pretty damn hard to go back.

Mike Solomon’s Pith Helmet came to the rescue early on by tapping into private APIs built into Safari to block ads. And it was good.

Well, you have to wonder how seriously some people are taking their NDAs seeing how often leaked builds are getting posted online. The good news is that the leaked builds have something that everyone has been talking about: Tabs.

The bad news is that the latest leaked builds broke Pith Helmet’s filtering completely. Mike has been good about releasing a fix within a day of the leaked builds hitting the Web, but the fix isn’t working quite right. Plus, I don’t believe Pith Helmet can filter out iframe or JavaScript ads, which are omnipresent online. (Edit: Mike informs me that Pith Helmet can filter iframe and Javascript ads.)

Cascading Style Sheets to the rescue! I was pretty chuffed to discover that the CSS3 selectors trick that works in the Gecko browsers (Mozilla, Firefox) seems to work just fine in Safari. Want to learn how to use this technique?

If you’re interested in using this technique to block ads, all you need to do is create a personal stylesheet for Safari to use that has the CSS3 selectors in it.


  1. Download this file to your hard drive (Control-click or right-click on the link and “Download link to disk”).
    Safari Users: I recommend you save this file to a Safari folder within your Application Support folder for OS X consistency. This is found at /Users/<your username>/Library/Application Support.
  2. Open Safari’s preferences (found under the Safari menu, top lefthand corner of your screen).
  3. Select the Advanced preferences.
  4. At the bottom of the preferences pane there’s a drop down menu for “Style Sheet”. Activate this menu and select Other…
  5. In the file selection sheet that appears, navigate your hard drive to where you saved the userContent.css file. Hit Choose to select the file.
  6. The stylesheet should start working immediately. Try going to a site with banner and embedded flash ads, like this strange CNN story or this Yahoo news story and bask in the ad-free goodliness. Ahh - Web standards rock the house.
  7. Firefox / Mozilla Users: Place this file in the chrome directory inside of your profile, and then restart your browser. The location of the chrome directory depends on what browser you’re using:
    Firefox: /Users/&lt;your username&gt;/Library/Application Support/Firefox/Profile/<em>random stuff</em>/chrome/ Mozilla: /Users/&lt;your username&gt;/Library/Application Support/Mozilla/Profile/<em>random stuff</em>/chrome/
  8. OmniWeb 5 Users: Save this file somewhere in your home folder (say, in your Documents folder) and then type this command in the Terminal - it all goes on one line:
    defaults write com.omnigroup.OmniWeb5 OWUserStyleSheetLocation file:///Users/your account/Documents/userContent.css
    The file:/// should be the path from your Users folder to the stylesheet..
The majority of this technique was hatched and put together by Joe at Floppy Mouse, and the excellent Texturizer Firebird resource. All I did was add a few filters, remove the image map filter (so that sites that use imagemap navigation would still work), and turned off link underlining, so send those folks your thanks.

The only catch with this technique is that your browser still downloads the ads to your computer, but the style sheet rules make them invisible. Because of this, you won’t see (pardon the pun) any bandwidth savings. I’m not sure if Pith Helmet uses a similar technique, or if it actually blocks the downloading of ad content. (Edit: Pith Helmet acts as a inline proxy and doesn’t download the blocked content at all, according to its developer.) Either way, this (in conjunction with Safari’s built-in pop-up blocking) will hopefully make life much nicer. Enjoy!

ISSN 1499-7894
Recent Posts
Contact Archives Web Love Writing Photos FAQs Home