With CSS3 launching side by side with HTML5 earlier this year, it would’ve been inevitable that I would someday start to learn both of these. That day came sooner for CSS3 than I thought it would, and I have to say – I am quite impressed with what it could do. Since the release, a few websites sprung up here and there with all these beautiful gradients, round corners and box shadows. This is all nice and dandy, but the problem was that only the latest versions of Firefox, Chrome and Safari () supported these features and that none of these websites had a specific reason for use other than to show off. Things only started to change when Internet Explorer 9 was released and when CSS3 compatibility plugins came to see the light.
Before you go crazy and design the most awesome website ever for CSS3, there’s a few things that you should consider. Designing for CSS3 takes a lot more planning and development time, you have to consider your client’s related to your product or service. Another problem to consider is if you could find someone with experience in CSS3, and if you have the time and resources to develop a person who does not have any experience in building a website with CSS3.
The biggest problem CSS3 still faces today is browser compatibility issues. Just as an example, according to caniuse.com Internet Explorer 9 still only supports 52% of the features listed in CSS3, where as Firefox supports 86% of the features and Google Chrome 90%. Even worse is Internet Explorer 8, which only supports 23% and Internet Explorer 7 a mere 12%. This is a major problem if you want to design and develop a website for CSS3.
If the market you are going for mostly use Firefox, Chrome and Safari – you wouldn’t have a problem with most of the CSS3 features and there is a lot of support for all three these browsers. But when it comes to Internet Explorer 7 – 9, that’s a different ball game. There’s a plug-in available called CSS3 Pie, it adds support for a few basic features to Internet Explorer.
These features include:
- CSS3 Backgrounds (-pie-background)
- RGBA Color Values
- PIE Custom Properties
- PNG alpha transparency and -pie-png-fix
- Lazy Initialization (-pie-lazy-init)
- Layout polling (-pie-poll)
Even with this; there is still limitations as to how you use these features in Internet Explorer 7 and 8, but with that said, CSS3 Pie is still in beta. An example, if you use rounded corners on only the two corners at the top, the top right corner would look slightly skewed. With small radii, it is hardly noticeable but with radii larger than 8 pixels, it becomes noticeable. Another problem is that you can only use shorthand code in Internet Explorer 7 – 8, border-radius: 8px 8px 0 0 would work fine, but if you do not write code in shorthand, it would take you quite a while to figure this out.
Generally CSS3 performs quite well if you limit the use of code, it only then loads websites at record breaking speeds. But what happens when you move to larger websites with a lot more content than standard. The main reason for the slow down, is again a compatibility issue with Internet Explorer. Even if CSS3 Pie adds support for the features listed above, it still uses more resources, and CSS3 Pie is an externally loaded file, which causes Internet Explorer to recognise the file as a threat and automatically blocks the file. CSS3 Pie does supply 2 workarounds for this problem, one is to change the HTACCESS file, or the other is to include a PHP file in your CSS file. Unfortunately I could not test the HTACCESS method, but the PHP method slowed down my Internet Explorer 7 and 8 quite a bit.
Would I use CSS3 again?
Definitely. Working with CSS3 turned out to be a very good challenge and it steeped my learning curve. But I will only use it in extreme cases, where the budget allows it, or I have to build an upmarket portfolio where loading times is not going to be a problem.
Having a CSS3 tick next to your name is definitely a plus, and would ease the learning curve in the future; but until Microsoft removes Internet Explorer 7 & 8 from their support list – keep your CSS3 limited.