CSS3 Best Practices

Always keep in mind that CSS3 is by no means supported by all browsers, every browser has different support for each CSS3 element and we need to be very careful when using these new features.

Introduction

The first thing you need to do when using a CSS3 property is do a little research. You will always find some resource online that tells you what you need to know about browser support for any CSS3 property, so be sure to Google it FIRST.

Secondly, do not get carried away with all the great stuff that you can achieve using CSS3. We are not trying to replace great designs and coding. We want to try to achieve the perfect cross-browser markup and styling.

Right now I like to think of CSS3 as “enhancements” for your website’s look. The most important thing on your site is functionality and accessibility. Never sacrifice any of these two for a “nicer” look. You need to keep in mind that everything should be fully functional if you remove all your CSS3 and your site should still look good.

Fallback

One of the most important best practices when using CSS3 is to provide fallback options every time it’s possible. You will find the ability to do this when using backgrounds or fonts, among other things.

Animations

I do not recommend using animations quite yet, but if you totally want to use them, make sure that your element will look just fine without the animation, because it is very likely that it won’t work.

Code Maintenance

We need to think on the future when coding CSS3. To achieve a certain cross-browser property you will need to add some vendor-specific code. I recommend adding comments or creating a file where you keep track of these lines of code. This way you will be able to remove them when supported on all browsers. I don’t know when, but I really hope a standard gets out for all browsers soon.

Fonts

@Font-face property is one of the more supported elements and you can achieve a cross-browser behavior, this is why a lot of programmers are using @font-face. We need to be sure that the declared fonts are totally legible on our websites. And one more thing, always declare a fallback font that approximately matches your font in size.

Conclusion

CSS3 is not quite complete yet, so be very careful when using CSS3 properties. And most important of all, test your styles on all major browsers (Internet Explorer, Safari, Chrome, Firefox, Opera) before permanently applying them to your website. A good rule of thumb is: the more versions, the better.