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.
Comments
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 "*"?
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.
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.
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.
More of the same:
http://tidakada.com/archives/p/1941/more/1/c/1
http://archivist.incutio.com/css-discuss/?id=13557
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.
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.
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.
i think you mean 'display:none' and not 'visibility:none'
Post a Comment
This discussion has been closed.