NetNewsWire feed ad blocking with CSS

Using CSS for ad blocking is nothing new. It’s also been pointed out how similar CSS in your NetNewsWire style sheet can block many feed ads in the same way. Yesterday on the NetNewsWire email list a feature request was made to provide the means to add an independent CSS file for the purposes of ad blocking. Rancheo has already made their position clear:

Brent Simmons on Kottke - Blocking RSS advertising:

I don’t expect to get asked for ad-blocking-specific features, since I don’t think ad-blocking-specific features will be needed. These already-existing and already-planned features will be highly effective at ad-blocking.

Of course an independent ad blocking style sheet is not a feature of NetNewsWire, but that’s because it doesn’t need to be. You only need to make a small change to your existing style sheet to import an ad blocking CSS file into your selected style.

Locate your favourite installed style sheet in ~/Library/Application Support/NetNewsWire/StyleSheets/

Add this line of to the top of the contained stylesheet.css (Reveal this file in .nnwstlye styles by selecting “Show Package Contents” with a control click.)

@import url(../userContent.css);

Then add your userContent.css to the root of the “StyleSheets” directory.

This file can then be edited, refined or replaced without making further changes to your “style” sheets. Although keep in mind that changes will not be applied until you restart NetNewsWire.

There is a range of userContent.css out there written for ad blocking in browsers which should be a good starting point:

• Firefox Help: Tips & Tricks

• Better Ad Blocking for Firefox, Mozilla, Camino, and Safari