What's Wrong With ... CSS?

As an internet enthusiast, you will sooner or later get in contact with one of these greater evils: XHTML, JavaScript and CSS.

You will find the css Zen Garden, be baffled at what can be achieved with pure CSS and, typical for something evil, be lured into it's fangs.

Suddenly, adhering to W3C standards will become an important goal. Even if there is no browser which can display all of the W3C standard. Most of the users use a browser, which specifically doesn't support the W3C. Of course, the produce of said product will pledge differently but in the end, what matters is what you can see on the screen.

It ain't pretty.

After you get your HTML to validate -- which means you have already lost countless hours to fulfill a simple several-thousand-page international standard -- and you can finally proudly add the XHTML DOCTYPE at the top of your page.

Now, some simple stylesheet to please the eye and you're ready for the world.

Two weeks later, you find yourself confronted with two choices: You can either concede and show the world that you failed to find an optimum between the deficiencies of the CSS standard and the bugs and incompatibilities of just the two main browsers by publishing another dull website.

Or you can show that you simply don't care and publish something which looks good on just your computer.

Eventually, one of your friends will tell you what they are snickering about when you show up.

When I saw XHTML and CSS for the first time, I hoped that it would solve some or even many of the problems we have today.

Instead, they made everything worse.

Absolute positioning of elements is relative. What's so great about strong that the simple b was dropped? With CSS, the name of the element shouldn't matter anymore.

Instead, we have roughly 200 styles. Many of them are actually supported by a few web browser and some of those are supported correctly.

When I want to emphasise something, Blogger.com wrestles this into my text: <span style="font-style:italic;">correctly</span>

Excuse me? <em>correctly</em> should do, shouldn't it? What will the blind think?

I bought several books about CSS. They all share these common traits: A list of all styles, each with a table when it doesn't work. A very big number of pages how to work around the most important browser bugs (search A List Apart for "box model").

After several years, even the most hard headed CSS evangelist finally admits that some layout problems can still only be solved by using tables.

If you want a div to have a very definitive width and a margin around it, you must use voice-styles to confuse the browsers which get it wrong. Or use negative margins. Float it. Nest several divs. All but position it absolutely relative to a hidden element which must contain a flash animation.

The many CSS resources on the net show every day that you can achieve incredible designs with CSS.

FCKeditor is created by some smart minds. At home, it works. At work, I don't get a toolbar.

I just want my div not to shrink too much because the content becomes a tad unreadable at 30pt. There is a style for that but it's not supported by anyone. Or there are scroll bars that I don't want. Or my readers with their new shiny 1920x1600 LCD screen are locked in a 300x256 postcard (all measurements in pixels).

Everybody screams test driven development today. Why is there no test suite for CSS and XHTML with PNG images how is has to render?

No further confusion how to interpret "padding, border, and margin areas".

But it doesn't even start to become a solution to the actual problem: Separate content from display.

I don't care about "strong" or "b" or <span style="font-style:bold;"> or <span class="bold">. It looks the same to the reader.

When I want to publish something on the net, I want to create a meta language. I want to use XML to specify "this is something someone said". I want to be able to create new tags and then give them meaning (this will lead to the semantic web) and then give them a presentation.

I want a style sheet which defines new elements and how they look on the screen. I want to be able to say "all these elements are top aligned" without having to put them into the same container.

I want to be able to reuse the work of some greater design genius without having to worry about new browser versions. Without forcing my readers to enable JavaScript just to be able to visit my pages (read that is, not interact with them).

I want something like vex. Unfortunately, this project seems to be all but dead.