|MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA|
The CSS Anarchist Strikes Again!by Eric A. Meyer
Great news, my revolutionary brothers and sisters! In the months since the publication of The CSS Anarchist's Cookbook, thousands upon thousands of readers have, um, read it. Although the rightness of our cause was never in doubt, this only confirms what I have always said: Nothing can stop the spread of visual anarchy. Thanks to the power of user stylesheets, anyone can upend the Web and turn careful design into uncontrolled chaos. No force can contain it.
Now, like a cobra striking out of the shadows, the CSS Anarchist is back to further arm you in your war against the designer heathen who seek to impose their order on our Web browsers. I bring to you more powerful versions of old design bombs, new ways to strike fear into the hearts of marketing departments, and even methods to drive your bourgeois pigdog co-workers crazy. Forward, comrades!
Upgrading old weapons
Before we start talking about new weapons, let's take a look at improvements to some old ones. One of the most popular instruments of destruction is the banner-ad killer. Version 1 looked like this:
This isn't too bad, as far as it goes -- any image of standard banner-ad size will be prevented from display. However, this ignores other kinds of elements that might be used in banner ads, like Java applets. So we've upgraded the banner-killer to strike at multiple targets simultaneously:
Now any element with a height of 60 pixels and a width of 468 pixels will be eliminated without mercy. Remember, this weapon is even more indiscriminate than before: Any element of the targeted size, even those which are not actually banner-ads, will be destroyed. The odds of other elements being precisely this size are admittedly somewhat small, but they are non-zero.
It's also a good idea to remind you that this killer only works if the height and width of an element are explicitly set using the
This warning is especially important in the face of our Mark 2 banner-killer. The Internet Advertising Bureau just recently announced new standard banner sizes. Well, the movement never sleeps, so we've already built an agent to stop this latest assault. Here's how you blow those guys away:
In a similar vein, you probably recall the image-killer from our last session:
This turns off almost every possible image you might encounter ... but not every image. Why is that? Because some images are displayed as part of an
See Figure 1 for an example of using this.
By adding the
While we're at it, let's look at two new weapons which will completely eliminate certain types of data from the Web. The first will help calm down the occasional nervous page:
There you go -- no more
Okay, okay, so maybe you just want to neutralize
Now, assuming that the parent element has a
Okay, back to the hunter/killers. This one isn't as much fun to use on your own machine, but it can be downright deadly on somebody else's. How's this for a user stylesheet:
That's right, as soon as the mouse pointer moves over a link, it will completely disappear. Then, when the mouse moves away, it will come back. In many cases, actually, the link might flicker in and out of existence as it cycles in and out of a hover state. For that matter, thanks to the
Imagine installing this as a user stylesheet on the system of that annoying guy in the next cubicle over. Then imagine his call to the technical support folks. Now that's entertainment!
As fun as wanton destruction can be, there are times when you want to be a little more subtle. Rather than knock big gaping holes in page designs, you might just want to warp the browser's behavior so it doesn't match the norm.
Here's just one possibility: Instead of making hyperlinks disappear whenever the mouse pointer hovers over them (or the user tabs to a link with the keyboard), you want to make them appear to stop being links, and instead seem to be like normal text or images. Here's how:
Text links will be most affected by the first rule. First, we set the cursor to be "text," which is usually an
The second rule merely changes the cursor behavior if the linked element is an image. The value of
Speaking of making things not look right, here's a fun way to mangle traditional pixel-GIF/HTML layout schemes without messing up larger (and, presumably, more useful) images:
This time, we've declared that images shall be no smaller than 10x10 pixels. All those Siegel-inspired layout tricks will go kablooey. Heh heh heh.
If, on the other hand, you value compact visuals, you could try reversing the trick and keeping all image elements below a certain size:
Single-pixel GIFs will stay at a single pixel, so this won't have quite the same layout-destroying effects, but it will make all of the images on the page pretty darned small.
Tearing down the hierarchy
Enough with the meekness! Back to the anarchy!
Long-time revolutionary comrades will have realized that most of the weapons in our arsenal involve use of the property
That's right, every piece of text, and every image, will form the world's longest run-on paragraph. Even William Faulkner at his most verbose can't match it. We've reduced all the block-level elements like paragraphs, and even elements like list items, into normal everyday text.
Why did I caution against using this on pages with tables? Because current browsers get very confused when directed to turn table elements into inline elements. The resulting carnage is something that can horrify even the most battle-hardened anarchist (but try it anyway, just for kicks). Because of this, we can introduce some table-related styles into the bomb and make it a little smarter:
This will help the tables keep their structure, while still forcing the table's contents (along with everything else) to run together.
See Figure 3 for a demonstration.
As with most of our sneaky design bombs, this one has a flipside. Consider:
This time, we've gone for an "outline" view of the document's structure by setting all non-table elements to have a
A word of warning about the outline bomb: Even in the latest browsers, this weapon is dangerously unstable. Even though its effectiveness has been theoretically proven, attempts to use it in the real world risk significant damage to the user. You might even trigger a software crash -- the ultimate revolutionary attack! Just think, if browser vendors hadn't gone to the effort of deliberately building substandard rendering engines, we wouldn't have a prayer of crashing browsers. Perhaps we should make these brave men and women honorary comrades for their assistance to our cause.
An end to anarchy? Never!
The last time we met, I promised that I'd be collecting new recipes for the CSS Anarchist's Cookbook. As you can see, that was no idle threat. Nothing will stop me from bringing you the tools of revolution, the means to strike back at those who think they know best how your Web-browsing experience should appear. Even as you read this, the forces of visual anarchy are on the move, searching for new and more terrible ways to subvert the Web as we know it. Join us! If you find an insidious new weapon, share it. I'll spread the news in my next communiqué, either under your true name or a revolutionary pseudonym of your choice. Our struggle to free the browser from the tyranny of design will never die!