August 6, 2003

I’ve only tried this in Safari, but imagine it would work in some other browsers.

Safari allows you to set a custom base CSS stylesheet. In fact, this is the only way to turn off link underlining in Safari. Since I prefer this, I had already set one up. Simply create a text file, call it “mystyles.css” (or whatever) and drop it in ~/Library/Safari. Put the appropriate CSS in the file, quit Safari, and restart. For example, to turn off underlined links, I used the following:

a:link { text-decoration: none; }
a:active { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: underline; }

It occurred to me that I could use the often-ignored attribute-matching selector capability of CSS to create a primitive ad blocker. Banner ads are normally 468 x 60 pixels. Using CSS, it is possible to select images that have declared height and width values, and style them as invisible. Here’s how:

img[width="468"][height="60"] {visibility: hidden;}

You can add variations on this with different dimensions for the tall sidebar ads one occasionally sees, use it with different tags, etc. For example the New York Times hides gigantic sidebar ads inside an IFRAME, and use javascript to indirectly load an image (actually, I think it’s a flash animation). This makes it hard to block the image if you have javascript turned on, but you can just block the IFRAME instead

iframe[width="352"][height="852"] {visibility: hidden;}

I’d be eager to hear any other uses for this trick. It would be nice if CSS allowed partial matches, so that we could match on, say *[href="*doubleclick.net*"] As far as I know, this isn’t possible.