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.
You should be able to reduce your CSS a bit. For example:
a:link { text-decoration: none; }
a:active { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: underline; }
could be replaced with:
a { text-decoration: none; }
a:hover { text-decoration: underline; }
I’ve been enjoying the benefits of user stylesheets on *zilla based browsers and Safari. Here are some examples of the rules I’m using (add additinoal sizes as you encounter them):
embed[type=”application/x-shockwave-flash”][width=”728″][height=”90″] {
display: none !important;
visibility: hidden !important;
}
iframe[width=”468″][height=”60″] {
display: none !important;
visibility: hidden !important;
}
blink {
text-decoration: none ! important;
}
Mikey–you’re probably right, although that might unexpectedly catch some <a name=…> tags. Certainly I could consolidate a little.
Alex–nice.
“Mikey—you’re probably right, although that might unexpectedly catch some <a name=…>”
Yeah it might, but how often do you see <a name=…> underlined? Designers rarely underline things intentionally as they tend to confuse visitors into thinking its a hyperlink…but anyways, this will do the trick then:
a:link,a:active,a:visited { text-decoration: none; }
a:hover { text-decoration: underline; }
Ultimately we are talking about a miniscule amount of overhead so I guess it doesn’t really matter ;)
Hi Adam, you can do that. The syntax is:
*[href^=”doubleclick”] (begins with)
*[href*=”doubleclick”] (contains)
*[href$=”doubleclick”] (ends with)
I suggest also using the src attribute for images and iframes. Be careful not to match on strings that are too short though, I recently removed this one from my user style sheet.
*[href*=”/ad”]
Because it cut out too much like:
friendster.com/addfriendrequest.jsp
Anyway, I just uploaded my userContent.css file and the images I use locally. Feel free to use it if you like. There is a bunch more in there that I won’t explain but you should look over and tweak is you know CSS.
http://www.cookiecrook.com/include/userStyles/
Just to clarify, those should all be straight quotes, not smart quotes. It looks like they were translated when I posted the comment.