Warning: gzinflate() [function.gzinflate]: data error in /home/boozkerc/public_html/kneedeepincode/wp-includes/http.php on line 1787

ie4-header

What are people excited about these days in the developer community? CSS is a huge one, and so is JS. Some of the CSS implementations are completely absurd and disgraceful towards CSS while others I, and many of my colleagues say “about time!”. The funny thing is, most of these features IE has had working for, well, over a decade now.

In 1997 Microsoft shipped IE4 with Windows 95 and it brought along what standards developers were disgusted by, filters and expressions. I can hear you guys now, “ewww”.

Filters gave CSS a little more oomph. It allowed people to add gradients, opacity, drop shadows, text glows and shadows, blur, and a ton more including weird ones like “wave” which makes your image all wavy for transitioning purposes. You also could also do calculations in CSS using their “expression” property and let’s not forget @font-face either, they also added that way back in ‘97.

Now here’s the hilarious part.

Developers began to see that IE wasn’t being standards friendly, and taking short cuts around the W3C which ultimately caused more headache for developers in the end. What an asshole Microsoft was… right? I’d say not.

All of the things people are excited about aren’t fully implemented yet in Mozilla and WebKit, nor are they ready by the W3C’s standards and some have completely been removed from the specs, like box-shadows, yet standards based developers are using them with proprietary syntaxes like -moz-box-shadow and -webkit-box-shadow! The best part is that these “standards” based browsers don’t even agree on the proper syntax for these amongst themselves, on top of skipping the W3C. Look at the “gradients” implementations in Mozilla and WebKit. Is this not a flashback or what?

I had to write this post after reading about Mozilla’s new “calc()” CSS3 feature. People will see nothing wrong with this at all, as they shouldn’t (for the most part), but will be disgusted when they see an IE expression. Does that make any sense? As @hova said on the Mozilla Blog “It’s like a time-warp or something”.

Or, how WebKit added the ability to change scroll bar colors and everyone shit themselves with happiness and said things like “The development world is a better and more fun place again because of your commitment and efforts.”. Give me a break. It’s directly taken from IE and you probably made fun of people styling scroll bars back in the day.

The funniest one, in my opinion, is @font-face. After WebKit and Mozilla started doing it, designers said “well, i guess it’s cool” and now these fonts are popping up all over. But when IE implemented it, and did it so fonts were harder to steal with the EOT font format, people never used them and font designers were shaking in their boots about copyright infringement. However, Mozilla and WebKit add TTF which anyone can download on any OS and use in just about any word processing program. And once again, everything is unicorns, bunnies, and rainbows.

And please, let’s not forget the dreaded box-model! In a recent post by Nettuts they talk about how IE, potentially, could have got it right. Well, did they? Yes, and in fact they nailed it.

CSS is finicky, especially with floats and clears, and where, as Nettuts says, adding 1px of a border can break the entire layout. IE’s implementation, and what (as usual) Mozilla and WebKit are adding as box-sizing, is right because it assumes that when you say 100px wide, that the element you said is 100px wide will remain 100px no matter if you add 10px of padding or 5px of border. What’s any less intuitive than to tell a new developer that, “it’s 100px wide, but its breaking out of the parent because you added padding, which is space inside of the element and adds spade outside the element and therefore you said 100px, but its actually 125px now.” WTF?

To wrap up, I do use filters as well as -moz and -webkit proprietary CSS properties so all the browsers look the same. I use Firefox, and run on a Mac and Ubuntu, and I despise IE and Windows, but they had their shit together and Firefox and WebKit need to stop adding this stuff as proprietary CSS properties and make like Opera who adds them in, like border-radius without the need for an Opera only CSS property, and if they are going to keep with the -moz and -webkit crap, at least they’ve got to decide amongst themselves as to what the syntax should be and save all of us time in the end by not having to go back and fix it to work on each browser.

This isn’t the browser war days of IE vs. Netscape, and I thought we were past that, but I guess we have a lot more work to do as a community and what the definition of “standards” really means to us.

[Post to Twitter]   [Post to Delicious]   [Post to Digg]   [Post to Reddit]   [Post to StumbleUpon]  

Zac 11.06.10

mmmm, I think box-shadow got added back in, no?

Oscar Godson 11.06.10

Nope, from http://www.w3.org/TR/css3-background/:
This module previously defined a ‘box-shadow’ property. This feature has been removed from this module for further discussion, and should reappear in another CSS module (or a later version of this module) in the near future.

Fez 08.07.10

Loved your post man. A very good read indeed! :)

Oscar Godson 09.07.10

Thank you!

Michael Acevedo 15.12.10

IE was THE browser back in the day, Microsoft just neglected improving it as the internet became more and more advanced, that’s where Firefox and other came in to fill the need. Imagine what the internet would be if MS kept improving IE over the years…

Thanks for posting this

matzipan 17.04.11

Awesome post!

matzipan 18.04.11

I was thinking this out today.

Maybe they are both right. Maybe there should be 2 different box dimension implementations. But you should be able to choose one of them