This article was first featured on cssglobe
I was talking with a front-end developer friend recently and was arguing that I would try to only use CSS3 rounded corners and shadows in the near future. No more pixel perfect for IE if it degrades correctly. My friend was not far from being outraged, for him, the user experience is King, and all users should have access to the same experience.
New CSS properties have enabled us with so many possibilities. Shadows and rounded corners are now possible in CSS3 but we have a problem, IE users do not see them. Should we use them anyway or should we implement longer CSS tricks to get those beautiful effects for IE users.
From an ethical point I agree with my friend, we should always do website with no graphical difference in all major browsers. It’s part because most back-end developers can’t stand HTML and CSS browsers compliancy that front-end developer job exists. Clients also pay for a product, when 50% of their users base do not see those effects, one could argue that there is a problem.
At the same time, should we lose countless hours implementing CSS hacks and add loading time to our sites? All this because Microsoft has been lazy and stopped to work on IE until Firefox came along and by the same way stopped the CSS advancement in general.
In my day to day work, we had started using less rounded corners and practically no shadows because of the integration hassle. Now the designers can have all the fun they want without getting all the front-end team on the verge.
If you want all your users to see your effects here is what you would need to do:
Create 4 png rounded corners and 4 shadow bar and enclose all this in a array of divs or a table. You will also need your preferred IE6 png hack. The designer changed his mind about the color? How unfortunate, redo all your png. Add a bit of debugging time in the bag, because that’s also likely to happen.
Now with CSS3, we just had these CSS lines, and we are done in 1 minute.
border: 1px solid #b2c0cb; border-radius: 7px; box-shadow: 1px 1px 15px #5c5c5c;
*For now we need to add some other css lines to target the browser because it is not yet completely implemented .
What is even more frustrating is that Microsoft has not added these properties in IE8. Come on! Rounded corners will be outdated before they have them implemented. In fact they were so busy trying to meet Acid 2 that they didn’t even implement one new CSS3 feature since IE7, beside page-break (Webkit scored 100 on the acutal Acid 3 test by the way..). Have a look at this MSDM page, it tells a great story about Microsoft and CSS implementation.
Maybe I’m only a bored and angry front-ender who should do better, but I decided to stop hacking through my site and stop adding complexity and loading time when there is no need to be. Front-end should be less complex. As long as it look ok in IE, features like rounded corners and shadows will stay for Firefox, Safari and Chrome.
** Box shadows are coming in Firefox 3.1