April 29, 2010 at 09:58Why CSS3 is worse than fussing with IE6 bugs
- Transfer
I remember the times when we had nothing but CSS2.1. The CSS3 standard seemed like a pipe dream opening the door to a world of simple coding and free evenings, and IE6 was the devil who turned our work into hell with its quirks and a free attitude towards standards. How naive we were.
In fact, CSS3 was not invented to shorten css code, but to provide more flexibility. Previously, you could fill the background with a gradient only using the background-image property, and to change it, you had to redo the whole picture every time. Transferring the gradient to css allowed us to simplify this process - just change the colors in the style, and the browser itself will redraw everything. Not bad, huh?
I know that we are now in some transitional period, but when Webkit and Firefox began to support gradients in their own way, my life became completely miserable. As an advanced developer interested in new technologies, I can't wait to start using CSS3, but getting all this to work in multiple browsers is damn expensive in time and bytes. Yesterday I needed to make a simple gradient, and as a result I came to this code: With this code, the gradient works in FF 3.6+, Safari / Chrome and IE5.5 +. Users of Opera and IE will not see it without filters. At the same time, using a background image will allow you to easily display the gradient in any browser.
The problem is not even that the css3 syntax is a little longer, but that it looks like a piece of code that can be used to style a site. And this is just for the gradient.
Image is an image. If you omit the difference in color profiles, it appears exactly as it was made in all browsers. In css3-effects this is not so - the browser supports a certain property as it sees fit. For example, gradients in Firefox are worse than in other browsers, this is especially noticeable over a large fill area when terrible streaks begin to appear.
Yes, the visibility of artifacts depends on external conditions (monitor settings, etc.), but on my home computer the difference between the Safari and Firefox gradients is very significant. And this is just the only example. In the future, I’m sure, new differences in rendering quality will be constantly revealed - a problem that was not observed when using images.
Another weakness of css3 is animation. Of course, it’s not bad that you can specify animation in css, but I have never seen a single smoothly working implementation. Replacing a flash with open standards is good, but until an appropriate level of quality is guaranteed, I would rather use a flash. CSS3 animation is cool, but in terms of quality, this is absolute shit.
Despite all this, I did not stop experimenting with css3 gradients. Today I started work on a new project and the first thing I needed to do was set a complex background gradient for the site.
It took me less than a minute to get everything working in Firefox and about an hour to find a (simple?) Solution for Webkit. After all the torment, I decided - no more css3 gradients. I'm over it.
The conclusion is simple. In theory, css3 looks great, but in practice, we observe something completely different. I hope the “transition period” does not last too long, and compatibility issues like IE6 disappear. The reason for all the troubles is the openness of preliminary versions of standards. I would recommend browsers support them in developer versions, but I'm afraid no one will listen to me.
In this situation, it seems to me that it’s easier to debug sites under IE6 (using IE6 CSS Fixer) than writing css3 code that works in all browsers. This depressing thought contrasts sharply with our dreams, but what can you do is reality.
Code explosion
In fact, CSS3 was not invented to shorten css code, but to provide more flexibility. Previously, you could fill the background with a gradient only using the background-image property, and to change it, you had to redo the whole picture every time. Transferring the gradient to css allowed us to simplify this process - just change the colors in the style, and the browser itself will redraw everything. Not bad, huh?
I know that we are now in some transitional period, but when Webkit and Firefox began to support gradients in their own way, my life became completely miserable. As an advanced developer interested in new technologies, I can't wait to start using CSS3, but getting all this to work in multiple browsers is damn expensive in time and bytes. Yesterday I needed to make a simple gradient, and as a result I came to this code: With this code, the gradient works in FF 3.6+, Safari / Chrome and IE5.5 +. Users of Opera and IE will not see it without filters. At the same time, using a background image will allow you to easily display the gradient in any browser.
/* так было раньше: */
background:url("...") left top repeat-y;
/* а так стало сейчас: */
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);The problem is not even that the css3 syntax is a little longer, but that it looks like a piece of code that can be used to style a site. And this is just for the gradient.
Support does not imply quality
Image is an image. If you omit the difference in color profiles, it appears exactly as it was made in all browsers. In css3-effects this is not so - the browser supports a certain property as it sees fit. For example, gradients in Firefox are worse than in other browsers, this is especially noticeable over a large fill area when terrible streaks begin to appear.
Yes, the visibility of artifacts depends on external conditions (monitor settings, etc.), but on my home computer the difference between the Safari and Firefox gradients is very significant. And this is just the only example. In the future, I’m sure, new differences in rendering quality will be constantly revealed - a problem that was not observed when using images.
Another weakness of css3 is animation. Of course, it’s not bad that you can specify animation in css, but I have never seen a single smoothly working implementation. Replacing a flash with open standards is good, but until an appropriate level of quality is guaranteed, I would rather use a flash. CSS3 animation is cool, but in terms of quality, this is absolute shit.
Support does not imply full support.
Despite all this, I did not stop experimenting with css3 gradients. Today I started work on a new project and the first thing I needed to do was set a complex background gradient for the site.
It took me less than a minute to get everything working in Firefox and about an hour to find a (simple?) Solution for Webkit. After all the torment, I decided - no more css3 gradients. I'm over it.
Conclusion
The conclusion is simple. In theory, css3 looks great, but in practice, we observe something completely different. I hope the “transition period” does not last too long, and compatibility issues like IE6 disappear. The reason for all the troubles is the openness of preliminary versions of standards. I would recommend browsers support them in developer versions, but I'm afraid no one will listen to me.
In this situation, it seems to me that it’s easier to debug sites under IE6 (using IE6 CSS Fixer) than writing css3 code that works in all browsers. This depressing thought contrasts sharply with our dreams, but what can you do is reality.