Ad Blocking with CSS3 Selectors

joe comments on the old ad blocking post:

Check out my use of CSS3 selectors supported by mozilla and NS7. I use it to block ads based on substring matches in the href of a link for links that contain images. I find that matching on the link href is more reliable than matching on the image src.


His site shows how to add a few lines to a userConent.css file in the chrome directory of your profile dir to remove ads that originate from subdirectories. For example, the following line

A:link[HREF*="/ad"] IMG { display: none ! important }

blocks all images from the /ad subdirectory, which the current "Block Images from this Server" feature doesn't handle.

» posted by pinder on February 01, 2003 at 11:44 AM


Only problem with putting that in the userContent.css, is that it will also block any legitimate stuff from ANY directory on ANY website, that just happens to be "ad" ( which could be someone's abbreviated subdirectory name for something other than ads). Or am I misinterpreting the meaning of "*"?

# posted by Devon

This is pretty good, works a bit like those ad blockers for IE. but then, this CSS approach might be too advanced for some novices.

# posted by cheeaun

Instead of display:none'ing the ads, try a -moz-opacity:10%, and then set the opacity back to 100% on :hover. This will let you see the picture if it turns out not to be an advertisement. It happens to me about once a month.

# posted by Micah

Yeah, this is pretty good. Yahoo looks kinda cool without its header graphic, even though it's a side-effect of this tip, since, as Devon notes, it's one of those sites where the header image links to some pretty important stuff, like email. But overall I'm liking it.

# posted by Richard

More of the same:

# posted by Jan!

The reason the Yahoo header isn't coming up (and why a lot of nav bars also aren't showing up) is for some reason the floppymoose CSS also blocks imagemaps. I don't know why that is - I haven't seen a lot of ads that have imagemaps in them - but if you remove just that line, this tip is even better.

# posted by Neil

A more correct way to to this would be to do visibility: hidden; instead of display: none. This will hide the ad elements but keep the squares in place so the page layout is not broken.

Just search and replace the strings in the .css file to get this to work.

# posted by Gabriel Radic

Just an FYI: while you should definitely use visibility:hidden if you prefer to preserve page layout, many folks may find they prefer to use visibility:none. I know I do. If I can collapse some adspace out altogether and get more of the page used for real content, that's all the better.

# posted by floppymoose

i think you mean 'display:none' and not 'visibility:none'

# posted by bob

Post a Comment

This discussion has been closed.