Web DevCenter
oreilly.comSafari Books Online.Conferences.
MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA

Sponsored Developer Resources

Web Columns
Adobe GoLive
Essential JavaScript

Web Topics
All Articles
Scripting Languages

Atom 1.0 Feed RSS 1.0 Feed RSS 2.0 Feed

Learning Lab

The CSS Anarchist's Cookbook
Pages: 1, 2

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:

IMG[height="60"][width="468"], IMG[height="60px"][width="468px"]
   {display: none !important;}

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:

Cascading Style Sheets: The Definitive GuideCascading Style Sheets: The Definitive Guide
By Eric A. Meyer
May 2000
1-56592-622-6, Order Number: 6226
467 pages, $34.95

IMG[height="60"][width="468"], IMG[height="60px"][width="468px"]
   {opacity: 0.1 !important;}
Try the disappearing ads trick.

Try the disappearing ads trick (click for full-size view).

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:

A:link IMG, A:visited IMG {border: 2px solid blue !important;}
A:hover IMG {border: 2px solid red !important;}

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:

IMG[border="0"] {border: 2px solid blue !important;}

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.

Reducing images

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:

IMG {height: 40px !important; width: 40px !important;}
Make all images the same size for some interesting effects.

Make all images the same size for some interesting effects (click for full-size view).

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:

IMG:hover {height: 100% !important; width: 100% !important;}

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!

Eric A. Meyer is a member of the CSS&FP Working Group and the author of Cascading Style Sheets: The Definitive Guide.

Discuss this article in the O'Reilly Network Forum.

Return to the O'Reilly Network Hub.