(Updated September 25, 2005 with rules to hide Tribe.net 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.
One 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.
Instructions
- 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
Safarifolder within yourApplication Supportfolder for OS X consistency. This is found at/Users/<your username>/Library/Application Support. - Open Safari’s preferences (found under the Safari menu, top lefthand corner of your screen).
- Select the Advanced preferences.
- At the bottom of the preferences pane there’s a drop down menu for “Style Sheet”. Activate this menu and select Other…
- 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.
- 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.
- Firefox / Mozilla Users: Place this file in the
chromedirectory inside of your profile, and then restart your browser. The location of thechromedirectory depends on what browser you’re using:Firefox:
/Users/<your username>/Library/Application Support/Firefox/Profile/<em>random stuff</em>/chrome/Mozilla:/Users/<your username>/Library/Application Support/Mozilla/Profile/<em>random stuff</em>/chrome/ - 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 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!
