why css3 is worse than ie6 debugging/headaches (again)
Translation available in the following language(s):
I remember them. The days when css2.1 was pretty much all there was to css. css3 was a faraway dream, a promised land full of easy coding and free afternoons and IE6 was the devil, making our job a living hell with all its buggy quirks and lack of standards. How naive we all were back then huh.
code explosion
css3 was never really made for shortening our css code, but rather with the idea that it would deliver a more flexible experience. A background color gradient used to be only achievable through the use of a background image, meaning that if the gradient needed tweaking you had to keep recutting the image over and over again. By moving this graphical effect to css it would be possible to simply define the needed colors and let the browser do all the drawing. Sounds good, right?
Now I know we are into some kind of intermediary phase, but ever since both webkit and Firefox started proprietary support for the gradient property it has made my css life completely miserable. As a front-end developer with a passion for getting to know latest techniques and methodologies I'm eager to start using the css3 way (you know, live and learn), but it's damn time and byte consuming to get things working across a range of browser. For a pretty simple fade I had to create yesterday, I came up with the following piece of code:
/* how it used to be */
background:url("...") left top repeat-y;
/* using automated gradients */
background:#FEF3D1;
background:-moz-linear-gradient(top, #FFF1CC, #FDF5D5);
background:-webkit-gradient(linear,0 0,100% 0,from(#FFF1CC),to(#FDF5D5));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#FFF1CC, endColorstr=#FDF5D5)";
filter: progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#FFF1CC, endColorstr=#FDF5D5);
This makes the fade available in FF 3.6+, Safari/Chrome and IE5.5+. Opera users and IE users without filter support simply see the fall-back color. In contrast, using an image makes it available in every single browser version out there without any issues.
The problem is not so much that the css3 syntax is a little longer but that it looks like a block of css which could style half a site. And that only for one fade.
support doesn't equal quality
An image is an image. Apart from some color profile nonsense, it shows up the way it was made, consistently across all browsers. This is not true for css3 effects. It's not because a browser supports a certain css3 property that it knows how to render it properly. Firefox gradients are of sufficiently lower quality than those in other browsers. Especially light fades over large areas are known to create ugly stripes.
These artifacts are dependent on the conditions when viewing the gradient (screen settings and such), but on my home screen the difference between Safari and Firefox gradients is really striking. And this is just one example of course, I'm sure differences in rendering quality will keep popping up in the future. Gaps in quality you won't have when working with images.
One other area where css3 is seriously failing is animation. While it's neat that you can define (non-functional) animations in css, I still haven't seen one implementation that runs smoothly. And I mean smooth, not hey, for a browser this is kinda okayish. Replacing Flash with open standards is fine by me, but as long as the same level of quality can't be guaranteed I'd rather watch Flash animations to be honest. css3 animation is definitely nerdy cool, but quality-wise it's utter crap.
support doesn't mean full support
Still, all the above didn't put me off enough to stop css3 gradient experimentation. I started a new project today and pretty much the first thing I had to do was define a background gradient for my site. Not a full gradient mind, a pretty big harsh fade 3px high, which led to a slight fade of about 500px high.
It took me less than a minute to work it out in Firefox and about an hour to find out there was no (easy ?) way to accomplish it with the -webkit syntax. Apparently you can set stop-points, but only in relative measures. Why, I don't know (documentation is rather lacking on the webkit site), but the outcome is pretty obvious. No css3 gradients for me. Sigh.
conclusion
The bottom line is simple. The theory behind css3 is awesome, but practical use is something entirely different. I hope this intermediary fase won't last too long and that it won't create a similar backlog of compatibility issues the way IE6 did. Public availability on pre-standards are what causing all this at the moment, so I would really advise browsers to keep their proprietary css locked away in development versions, but I'm afraid they're not really going to listen.
It's not the first time I'm complaining about this, but theoretical complaints seem to be materializing rather rapidly these past couple of months. As it stands now, I find it easier to debug sites for IE6 (with the help of the IE6 CSS Fixer) than it is to get css3 working nicely across a range of browsers and browser versions. It's a somewhat sobering thought in sharp contrast with our past dreams, but it's a reality nonetheless.
Comments
Teddy
It won't be too long when other browsers will start to standardize how they parse CSS3, hopefully so. I have a few nits to pick with Firefox when it comes to handling with rotations that came with CSS3 - the anti-aliasing doesn't work really well, and rotated images often have jagged edges. In addition, the resolution of the rotated image seems to degrade by a rather large degree when it is rotated in FF too. Chrome and Safari didn't give me much problem though.
For Chrome, one bug that is constantly bothering me is how it renders CSS border radius and width - when we combine border radius with, say, a top border 3px tall, the edges of the borders will not fade gracefully at the sides. It looks rather blocky instead. FF renders that rather nicely.
For background gradients, I second your opinion on how shuttling between Photoshop (or any other image editor) and the website can be frustrating. CSS gradients work poorly in Firefox because of the choppy rendering. I have learned to overcome this obstacle by actually using a background gradient and then varying the background position. For example, for a vertical background gradient (e.g. fading from top to bottom or vice versa), I can vary the background position along the vertical/y-axis so that I can get gradients of different intensities. This solution only works if you're not intending to change the hue/colour of the gradient though.
Jasper
You could use something like less CSS if you don't like the long syntax... But it's still a pain.
Damien
CSS3 is certainly maturing, but I don't really see code explosion as that big of an issue. The end use doesn't care about code, they care about their own personal experience. I see CSS3 as (eventually) providing a better browsing experience than is possible with Flash (especially on linux/macs) or a boat load of images (painful on slower connections).
If development becomes a hassle, do what any good developer would do and expand your tool set. For stuff like CSS, I'd highly recommend looking into SASS and the Compass module for SASS.
Sunny Singh
I agree but to a point. When it comes to CSS3, I only start using properties that are plausible, aren't hell to code by hand, and have nice fallbacks. The ones that I use so far that I can easily code within 2 seconds are text-shadow, border-radius, and box-shadow. I use these a lot, and it's a big help but for anything else
I resort to using images for anything else which truly isn't a big deal for me. You just set a background on something for let's say a gradient, rather than creating a billion divs for rounded corners.
Ivan
I agree with you man. It's a bit difficult but for now though I'm only using css3 attributes that can be easily used on all of the browsers - to make things easier for me - like font-face (instead of sifr, cufon, etc).
We're in a 'testing phase' right now, so of course be prepared to do a bit more work if you're planning to use css3 for your projects.
Although not everything has to look exactly the same on all browsers. I give the css3 goodness mainly to webkit. The rest can wait.
Aaron Cox
I get your point here, but this seems to be more of a rant against CSS gradients than CSS3. Your post barely address CSS3 at all. Even still, I'd say that at least the rules of CSS gradients are explicit, where debugging certain things in IE6 meant literally debugging, rather than just reading the CSS.
FWIW, I too long for these browser-specific rules to DIAF. Border radius is one of those modules I'd rather not be writing -moz/-webkit/-whatever for.
Aaron Cox
"addresses" - because apparently I can't type today.
Niels Matthijs
I won't disagree with you, but in my personal experience unmaintainable css files have led to horrible user experience more than once. Most css files out there are already as chaotic as they come, adding explosive css3 support won't really help the situation.
That's because it's been bugging me the most. But if you want more examples, by the end of the day I was struggling with the box-shadow property. Seems it's easy enough to get a shadow underneath only 1 side in Opera and FF (fe, a drop shadow at the bottom of the box, not on any of the other sides), but Webkit seems to hate that particular syntax. Spent way too much time trying to find a good alternative for Webkit but found none, so now I'm running behind on schedule.
Christoph Zillgens
I think you don’t understand CSS3. There is not one »CSS3«. CSS3 is divided into multiple parts and it is not ONE standard. Your example above is also incorrect. You have four lines of stupid -ms-filter:nonsense that have nothing to do with CSS3. Accept that there are less-capable browsers, ignore the fade in IE, it’s not CSS3.
To be correct you only have 3 lines of code, a fallback for less-capable Browsers, one line for Firefox and one for Webkit. This is far away from »Byte consuming«. Every single image has more bytes than those three lines of code.
If you think an image is better than CSS3, why do you build websites? Just upload one big image and you’re done.
Be aware that CSS3 isn’t finished. If you rather like to invest your time caring for IE6, well do so. No one forces you to use CSS3.
One more thing: CSS marked with »-moz« or »-webkit« is not proprietary(only »-ms-filter:shit« is), it is the web standard of the future. Locking away this in development versions is bullshit, because a CSS declaration can only become a standard if at least two browsers support it.
According to CSS animations: You have to distinguish between CSS transitions, transforms and animations. While transitions and transforms are working well in most cases, animations are often really CPU-intensive, but hey, they are still in development, so why ranting???
According to gradient failure: If it does work in Firefox but not in Sarfai, why don’t you just use it in Safari? Deliver the best experience you can to every single browser and make sure, it degrades gracefully in less-capable ones. That’s how we have to do it in the coming years.
J. C.
I won't use CSS3 until there is one property for an effect as opposed to multiple (-ms-,-webkit-,-moz-).
I'll stick with jquery and/or images for now.
Deoxys
Oooh yaaah! 1000% (yes, thousand!) agreed! I'm not really a fan of CSS3 either. Maybe rounded corners and some shadows are nice but that's it.
Erik Florida
To be honest, this is just the beginning of the concerns behind my decision to not concern myself with CSS3 or HTML5 until a future date. I use XHTML1 and CSS2. They work. So do images. I love your analysis of the simple facts around the usage of images. Bandwidth is so much less of a concern than it used to be. Smart application of images can be done well. Even CSS2 isn't perfect, but I can usually get sites to work without much of a work-around or IE-specific style sheet. To me, jumping on the CSS3 bandwagon is like being an early-adopter. That's great you have the coolest new smartphone, but the features aren't all supported yet, there's no apps, and the thing freezes all the time. I'll stick with providing my customers with phones that are proven. Phones that work consistently. (substitute "standards" for "phones")
InWebDeveloper
Are there still any hope for good web design looking in Internet Explorer?
Niels Matthijs
First of all, let it be clear that I love what css3 could do for us. CSS visualizations, at least in theory, are far better than any kind of image. But, for the moment, that's all just theory. The current implementations are flaky, messy and often of low/varying quality.
That's about accessibility of content. CSS3 is about styling, which is a pretty big difference.
Two completely different implementations can never become one single standard. And as long as these prefixes are there, they are simply proprietary.
The fact that it's readily available forces me to use CSS3. It's becoming an industry standard, not using it sets you back as a web developer and even clients start asking for it. Again, I'm all for css3, but I think the transition could've been made a lot smoother.
Alex Hall
I'm going to disagree slightly with this. I do agree that having to write an essay of code to create ONE effect is a little over-the-top in a lot of circumstances, but I've come to love what CSS3 can do in it's simplest form.
I have had no problems adding 2 or 3 extra lines of code to my CSS in order to add a nice, plain rounded edge to a box. Or to give that box a bit of a shadow. And it's these small differences that can make the biggest effect.
I don't like to add the proprietary IE stuff, simply because I don't care that it looks as polished. I'm all for progressive enhancement, so anything that looks okay in IE, but looks amazing in the other browsers is good enough for me. And trust me, not having to worry about that reduces code and headaches by a long way!
I don't understand the issue you are having with box-shadow though? I've never had that issue (as far as I know!).
Niels Matthijs
IE usage is still estimated at 60%. "Okay" is simply not good enough for such an enormous group of people in my opinion. I know that not worrying about it is good for one's mental health, but when confronted with the end result it's hard to feel any kind of pride for what you made, knowing that such a large group is getting a severely inferior experience.
This is what I need: {box-shadow:0 5px 5px -3px #eaeaea;}
It works okay in FF/Opera ... if you can give me a Webkit alternative, I'd be extremely grateful :)
Alex Hall
All I meant by that comment about not caring is that I don't have to. I don't have a wide IE audience anyway as a lot of my work is based around the enhancements that the better browsers offer. And because of the fact that I don't include major enhancements it's a fall-back that merely means a border will have square points, rather than rounded... which is no big matter? Neither is having a shadow. I just like the effect without the hassle, so add it where it's easiest.
That, I think, is the beauty of this method, it's so incredibly easy! I don't have to worry about extra markup or images to add these enhancements, it's all done in the stylesheet.
And as for your problem when I played around I found that changing the -3px to a -2px worked wonders and looked pretty much exactly the same?
Emyr Tabrizi
Really good article. Thanks for drawing this up. I get the impression that CSS3 is being pushed hard by developers but the technology just isn't ready yet.
I like my CSS to be clean & consistent. Adding all the different rules for webkit & moz etc . . is a ball ache and looks really messy.
I think ill leave this until IE9 is out, until all browsers hopefully respect each other.
Niels Matthijs
Hah, lucky you :)
If I use exactly the same rule with webkit, nothing shows up (Safari 4.0.5/Win7). At first glance it doesn't seem to be able to handle 5 parameters?
Alex Hall
How strange, it works in Chrome (webkit), but not in Safari! Sorry, I didn't check it in Safari and you're right, I get nothing. I couldn't actually find anything in the spec about the 5th parameter, although it's been taken out of the W3C spec until the next version... sorry!
Niels Matthijs
No worries! It's actually a pretty good example of what this article is trying to say :)
J. King
Prefixes never getting retired sucks, but typically they have a reason to be there. Take border-radius, for example: Opera has no prefix, and neither does IE9, but Mozilla still does because their syntax is non-spec, and WebKit does because their implementation is not feature-complete. Furthermore as you have so clearly pointed out yourself Mozilla and WebKit don't agree on how to do gradients, et cetera, et cetera. You say the transition to CSS3 could be a lot smoother, but I don't see how. Unless you expect complete and mature implementations to spring up overnight you need something like prefixes to avoid colisions. I certainly prefer the current situation to the mess which was CSS2.
Niels Matthijs
Smoother transition could be accomplished by keeping these browser prefixes out of production releases. Keep them locked away in nightlies. Let developers experiment and test them, but don't let them loose on the user web.
Zoe Gillenwater
I've been working on a bunch of CSS3 tests for my book, so I have a couple syntax things to share that might help.
First, I discovered you can indeed use non-percentage values in Webkit gradients, but you have to leave the "px" off. Really weird/dumb, but at least you can do it.
Second, the reason your -3px doesn't work in Safari is that Safari doesn't support spread radius on box-shadow yet (or inset, for that matter). Chrome supports both these things, though.
Hope that helps a bit!
Daniel Möbel
Nice Input on CSS3. We are currently testing a new webproject and whether to use Css3 or not. I will show our developer this article and the discussion, I think that this will convince him that CSS3 is not the way to go. Thanks, Daniel
Charles
I understand your opinion and I agree with that. Too much hacks for a single line
wardha-webdesigner
Hi I am a web dev.
And according to this, if this system goes common Standard after a few years, then even bigger(more powerful) rigs are gonna go short of resources.
and the website which integrate these techniques will be in-accessible for lower end PCs.
Just my 2 cents.
magic bullet
Especially in what I call real world development, meaning working in an extremely fast paced corporate environment, not something like freelancing where you can have months to complete one website.
Bigworld11
Such abstract picture