|MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA|
The CSS Anarchist's Cookbook
Eliminating ad banners
Tired of blinking, moving, annoying ad banners? Feel like protesting the capitalist hegemony? Just feeling cranky? Here's your chance to strike back at The Man by filtering out the standard-sized ad banners you see across the top of so many pages.
First, we have to realize that most of these ads are a certain size: 60 pixels tall by 468 pixels wide. This gives us the perfect opportunity to target and eliminate them. Here's how:
We've written selectors for both sets of attribute values (e.g., "60" and "60px") to make sure that we cover all our bases. With this in your user stylesheet, a large portion of Web ads will simply disappear. Remember that this rule only prevents display of the images. They're still downloaded by the browser, so you don't save any bandwidth.
Of course, if you simply want them to fade into the background, you could lower their opacity:
They'll still be visible, but only barely. That way, you can still figure out whose they are if you really care, but otherwise just ignore them. Because this approach uses opacity, though, it's restricted to Mozilla. Of course, given that the whole approach uses attribute selectors, you can't use it in MSIE5 or Opera 3.6 either.
The other thing to remember about this rule is that it will affect any image of the specified size, whether or not it's an ad banner. So if somebody's title graphic happens to be 468x60 pixels, it will disappear too. That's what we call "collateral damage." It can be grim, but it's the price we pay for striking back at the capitalist running-dog lackeys who have overrun the Web. (I don't know about you, but I kind of miss old-school Soviet rhetoric.)
Exposing linked images
The other thing designers spend lots of time doing is turning off borders on images that are also links. This can make them hard to pick out. Designers tell us that the changing mouse cursor will tell us which images are links, but that's obviously because they want us mousing over all of their images, thus spending more time looking at their work. I say, bah! Make those linked images stand out:
The first rule sets a border on any image which is contained within a hyperlink, visited or not, and the second rule changes that border to red for any image over which you've placed the mouse cursor.
An alternative approach which uses attribute selectors is this:
However, this will select any image with a border of 0, whether or not it's part of a link. This can be a little confusing if you're using the border to tell you where you can click, but fun if you just want to sprinkle borders around a page.
You could also take the step of changing the size of every image you encounter on the Web. All that's required is to change the height and width of the images on a page, like this:
This will make every image on a page 40 pixels tall and wide. An interesting side effect of this rule is that single-pixel GIFs will become 40-pixel GIFs, which will wreck a whole lot of page designs out there. Woohoo! If you want to be able to see images at normal size, then use this trick, which Andrew Wooldridge detailed in his article:
Now, all you have to do to make images "normal size" is move the mouse pointer over them. Move the pointer away, and they shrink back to 1/100th size.
Just the opening salvo
Ah, the dark side. It's so much fun, and even better, you don't have to stop here. The tricks I've discussed today are the barest beginning of what can be done to Web pages. All that's missing is a subversive outlook and some CSS experimentation. So let me know what you come up with, and I'll add it to the list of CSS terrorist recipes. Deconstruction was never so fun!
Discuss this article in the O'Reilly Network Forum.
Return to the O'Reilly Network Hub.