Browser Incompatabilities and Magical Incantations

In which the author bemoans the state of CSS

Posted by 10/10/2006

It's been a while since I've written anything. Months have gone by as I've been heavily absorbed in the project I last wrote about. I made by decision about that particular project, but that's not what I want to write about. Not yet. I want to write about the bane of my existence as a web programmer. The thing that causes the greatest gnashing of teeth that I know of. The maddening world of browser incompatabilities, workaround, known bugs and magical CSS incantations.

CSS Sucks

Whenever I think of this subject lately, I think of something David Heinemeier Hansson said as an offhand remark at the Snakes and Rubies talks when speaking about the horrors of CSS: "As a programmer I think in terms of cause and effect..." and then he sort of half shrugs, half laughs, and a few people in the audience laugh knowingly, because everyone knows the pain.

What precisely is the pain? What precisely is the problem? The first 80% of working with CSS is fine. Sure. No problem:

.emphasized
{
  font-weight:bold;
  font-size: 110%;
}
It's the last 20% that is god-awful. And it puts in the hands of programmers things that should not be in the hands of programmers. Design, alignment, arrangment. And it throws in a good measure of complete utter randomness. Just to keep you honest.

I.E. Bugs Me

The problems always seem to surface for me in Internet Explorer, but I think that's probably because I develop in Firefox first, and then as an afterthought look at it in Internet Explorer. If I did it the opposite way - it would be just the opposite, and then I would curse Firefox. And I don't even want to think about the other ones. Safari. Are you kidding? Konqueror? Opera? No. I can't test an infinite number of browsers. In an infinite number of configurations.

I have heard Firefox is standards compliant, and IE is not. And I believe it because I do not have the energy to investigate it thoroughly. Until recently however, Firefox would eat memory on the laptop. So I'm not in love with it. I'd love to use something else really. But it's not like I would pay money or anything.

Magical Incantations

But talking about CSS - and magical incantations, and programming. Some bits of code I throw in any CSS I write for no good reason whatsoever. My code is littered with garbage like this (most of which I just kind of gathered from across the internet and copy-n-pasted in):

...
position: relative;
...

I throw this in whenever text is disappearing - or only appearing after I scroll the page. I have no idea what it means.

* html #content
{
  width: 72%;
}

This is, for some reason, only read by internet explorer. So I can make the #content part of the page 78% on firefox - and then override it in IE to make it smaller (so it doesn't drop off the page)

    background-image: none; /* safari bug */
    margin-bottom: 1px ! important;

Then there are a good 10-40 lines like the above. I copied from somewhere. I have not done the necessary testing. It could work, it could not. It could be obsolete. It could not. I just out-and-out stole it and pasted it in my code. For no good reason

But that is just the tip of the iceberg. There are thousands of tricks out there. They often look something like this:

/* Hides from IE5-mac \*/
* html div#content{height: 1%}
/* End hide from IE5-mac */

or

div#content{width: 480 !important;
    width /**/: 500px;padding: 0 10px}

or the worst of all:

  voice-family: "\"}\""; 
  voice-family:inherit;

that one I just will not do. I can't bring someself to go that low. It's like saying "if you type this:'^^`*(*@~*$@~++' your computer will explode." Looks sort of like Perl code. But I guess Perl is all about magical incantations. And Ruby to a certain extent.

The problem is, ideally I do not want to write garbage. Because it has a nasty habit of accumulating and turning into trash, and ultimately being so useless that I have to throw it all out and start over.

And why do I have to do all these strange and unseemly things? Is it to add a few pixels of padding to a table cell? No it's because a) Text is disappearing off my page. b) Text is dropping off to the bottom of the page, making it appear blank to the uninformed. c) Everything looks fine, but the page prints weird. d) I'm trying to be a good person and not use tables for layout - because it makes me feel superior.

Phillips Screwdriver of the Internet

I contend that what happens in the browser should stay in the browser. That is to say, it should be the same for everybody. Like a phillips screwdriver. Or WD-40. The reason one picks one browser over another should be things like tabs - or integrated email - or bookmark organization. Ads. No Ads. Whatever. Just some added feature. The browser itself should be univeral. But I guess the good people at the W3C are working on that right?

Standards, Schmandards

The idea of standards is good. But some of the worst standards in the world have come out of the W3C. Any standard that derives from best practices is a good standard. Any standard that involves someone pulling something out of their ass is a bad standard. That is my golden rule of standards. If you look around you will see it is true.

High Time

So I think the time is nigh to gather what we've learned about browsers, people, usability, http, html, xml, javascript, xsl, and css - and give it some coherence. And maybe Ruby is a good language for that - because I think the strongest case for Ruby I can make is that it doesn't do anything new. There is nothing whatsover in Ruby that is not in another language. It's boring. It doesn't experiment with checked exceptions, it doesn't experiment with significant whitespace. It has nothing to offer the world that has not already been done before. But maybe that is a good thing.

Comments

Post a comment


Total: 0.21 Python: 0.14 DB: 0.08 Queries: 31