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: &ltspan 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 1920×1600 LCD screen are locked in a 300×256 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.

3 Responses to What’s Wrong With … CSS?

  1. Anonymous says:

    Amen! Hear’ya loud and clear!
    CSS has a lot of hype but is way too buggy and unpredictable to deliver. And the box model which has margins, borders and padding all on the outside is simply wrong. It turns positioning an alignment, which should be something simple, into something incredibly unintuitive. It also makes percentages values useless. – A 100% “div” with a border is actually wider than the screen… Weird huh?

    Changing design in one sweep from a single css, fixes 100 pages and kills a 1000 – pages which were created in the designers absence by a person who misinterpreted the intended use of that particular class.

    In time, style-sheets get so big, with unidentifiable crap, that they no sense what’s or ever, and you are afraid to delete the styles, just because you don’t know where they belong. Digging though other peoples css on a 10,000 page site is no picnic either.

    But in all fairness CSS did get rid of the “font” tag amen for that…

  2. […] online with you mobile will ruin you. Literally. Also, I’ve had my struggles with HTML and CSS and I can do without. Either and […]

  3. […] A long time ago, I’ve complained about XML editors and that there is no decent XML editor out there which you can use as the basis for a nice visual editor for your custom XML format. […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s