|MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA|
The CSS Anarchist's Cookbookby Eric A. Meyer
I tried to resist. Honest. Standards are good things, and they should be used for the benefit of the Web. I know that. But I was reading Tap the Power of Mozilla's User Stylesheets, by Andrew Wooldridge of Netscape, when I felt this eerie tickle on the back of my neck. It turned out to be my wife teasing me, but at the same time, I was getting ... thoughts. Ideas. Bad ideas. And once it started, I couldn't stop it. Oh, I tried. I kept telling myself that CSS should never be used for evil. That in the wrong hands, it could wreak havoc upon the face of the Web as we know it.
Then I thought, what the heck, it's not like anyone can hack servers with CSS. So I gave in and joined the dark side. Once joined, I felt the need to lure others into the same trap. Sure, it's evil, but what can you do?
So now I come to you with news of weapons of great destruction. Using common browsers and a little ingenuity, we can erode and explode look-and-feel as we know it. The Web will never look the same again. How will we unleash this awesome force? Simple user stylesheets. These seemingly innocuous files can be used to:
...and so much more.
Assembling your arsenal
Ready to cause damage? First, you'll need one or more of the following browsers: Mozilla, preferably M16 or later; Microsoft Internet Explorer 5.0 or later for either Windows or Macintosh, preferably the latest available version; and Opera 3.6 or 4.0, preferably the latter. I recommend these versions because they all support user stylesheets, which is necessary, and also because all of them support CSS2 to some degree. You'll also need software to write CSS, whether that's a text editor like BBEdit or something more point-and-click, such as Style Master or TopStyle.
Most of the examples in this article will use Mozilla M16. This is because, of the three browsers mentioned, it's the most standards-capable rendering engine, and it typically downloads quickly. Also, it has the same designation as a common military weapon, so it makes a bonus reference to general violence and mayhem. Opera 4 is very close to Mozilla, if not better, in the download size and standards compliance categories, and is certainly a worthwhile purchase if you want to spend money to get a standards-compliant browser. However, its name doesn't sound nearly as violent, unless you have sensitive eardrums. Or really hate Pavarotti.
With your weapon of choice in hand, all you need to do is set up a user stylesheet containing one or more of the nasty little tricks I'm about to share with you. If you don't know how to create or use user stylesheets, refer to your browser's help files before proceeding.
We first train our sights on the
For those who wish to still see the
Thanks to the values of
For those with nastier temperaments and no compunction about completely zapping out parts of Web pages, you can try this much simpler statement:
This will cause any FONT element, and all of its contents, to simply not be rendered, as though it had never existed at all. And isn't that what should be true anyway?
The easiest way is to simply blow apart the contents of the cells. Try this one on for size:
This should be the same as setting all tables to have a
If you like blank pages, you could always try this one:
White text on a white background ... always fun for reading. This still leaves the images behind to look as though they're just hanging in empty space, which can be an interesting effect. If you want to blow them away too, then you might prefer something like this:
And there goes at least 95% of the Web.
As fun as all this wanton destruction might be, there are sneakier ways to upset a table layout without making the content unreadable. For example, many tables use left and right alignment to get split-up images to appear joined, or to otherwise create a certain look. That's an easy one to overcome as well:
Everything within a table will now be centered. You could change that to left or right alignment, too, and get very different (but still disruptive) results. Isn't this fun?