CSS3 Headache

With the appearance of CSS3 we suppose that now all our dreams come true and easy coding with more free time left is guaranteed. However, these were rather naive thoughts.

Nothing is perfect in this world and CSS3 with its background color gradient proves this rule one more time. It is not for shortening CSS code, but only for making it more variable. For example, lately you can adjust a background color gradient using a background image only. In other words, you have to recut the image again and again in case the gradient needed tweaking. We all suppose that with CSS the necessary colours can be simply defined while the browsers do all the drawing. Sounds great, but don’t work in practice… at least as you expected.

To use CSS3 trying to solve the issues concerning the gradient property is quite time consuming because it doesn’t work across a range of browsers. Here is a sample of code to look through for the following explanation:

/* 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 can see the fall-back color. In contrast, using an image makes it available in every single browser version out there without any issues.

As you can see CSS3 syntax is a bit longer and it looks like a block of CSS which could style half a site. And that only for one fade.

Quality vs Availability

Image is just an image. It should attract attention and display colors you want. If not consider some details, it displays the way it was made across all browsers. However, it doesn’t work with CSS3 effects. At least not always. For example, Firefox gradients are of lower quality if compare with other browsers. We all know that light fades over large areas creating unnecessary stripes. All this is just gaps in quality you don’t want to accept working with images.

Animation is the other thing to consider starting to work with CSS3. It is neat, but doesn’t run smoothly. Acceptable, but not perfect. To replace Flash animation with other open standards is allowed in case the same level of quality is provided.

Most things that are cool in theory appear to be disappointing in practice. CSS3 is not an exception to this rule. Hope that all the problems will be fixed soon to let us admire all the best provided.

Reference: www.onderhond.com/blog/work/why-css3-is-worse-than-ie6-debugging