CSS ad blocking for Firefox and Safari


Using Firefox’s CSS-based chrome feature or Safari’s advanced stylesheet preferences and a little clever CSS coding, you can disable most banner ads, making them invisible in your browser. This technique is considerably easier and more flexible than setting up a private DNS server or proxy to filter out images from ad-serving domains.

The trick is setting up a number of CSS rules that use “*=” substring selection on an element’s properties. For instance, matching an IFRAME tag with the SRC parameter containing doubleclick would look like IFRAME[SRC*="doubleclick"] and matching an anchor tag with an HREF containing a url with “ads.” in it would look like A:link[HREF*="ads."]. Giving the style “display: none ! important” to all of the possible combinations and adding the stylesheet to your browser’s chrome effectively turns off the ad-serving web. The site below has a comprehensive CSS file that’s been tailored to assassinate ads from most networks.

To be honest, I didn’t realize that you could do this type of parameter matching and subselection in CSS, so it’s worth looking at the CSS source for that alone. If you don’t use it for this purpose, perhaps the technique will come in handy for something else you are working on.

Better Ad Blocking for Firefox, Mozilla, Camino, and Safari
Ad Blocking userContent.css

Discuss this article with the rest of the community on our Discord server!


Ready to dive into the realm of hands-on innovation? This collection serves as your passport to an exhilarating journey of cutting-edge tinkering and technological marvels, encompassing 15 indispensable books tailored for budding creators.