CSS3 Best Practices for designers

Default avatar.
May 28, 2012
CSS3 Best Practices for Designers

If you’re primarily a designer and have recently started learning CSS, you’ve probably started to incorporate some of the new CSS features that have been added to the language in CSS3. But if you don’t have a lot of experience with CSS, then you’re probably trying to figure out what is the best way to handle some of the challenges that arise from using multiple vendor prefixes, dealing with older versions of Internet Explorer, and other CSS3-specific dilemmas. In this article, I’ll try to cover some of the important things to remember when dealing with these issues. Keep in mind that nothing here is set in stone but these should just be guidelines to help you write more effective, easier to maintain, and future-proof code.

Know your support charts

You probably won’t have to memorize which features work in which browsers. In most cases, CSS3 features will not work in all in-use browsers. And in some instances, even the most recent versions of browsers don’t have full support. So the first thing you should do is understand where support is lacking. The primary resource you should use is the When can I use… site, which includes charts for CSS3, HTML5, and tons more. You can even do side-by-side comparisons with different browsers, as shown in the screenshot below that compares CSS3 support in Firefox 3.6 vs. IE9: When can I use... support charts Although When can I use… is probably the only support chart source you’ll need, here are a few other options to consider: 

But know that although a CSS feature may be listed somewhere as supported”, that doesn’t mean it’s without bugs or inconsistencies. So test thoroughly.

Don’t overuse polyfills

Due to client or agency pressure, or just the fact that you want everything to look and function the same everywhere, you might be tempted to use the many CSS Polyfills. But many of these scripts can slow your pages down considerably — especially if you use more than one. There are many studies and sources that show the importance of a website’s speed, so any polyfills should be considered carefully and with your site or app’s overall best interests in mind. To help you decide what to polyfill and what to just allow to degrade to a lesser experience, use the HTML5 Please site. As shown in the example screenshot below, HTML5 Please will often recommend avoiding polyfills for certain features: HTML5 Please

Test how features degrade

If you’re avoiding a lot of polyfills, then naturally you’re going to have to allow many CSS3 features to degrade to a more primitive experience in older browsers (usually IE68). But don’t assume this will happen automatically. In many cases (for example, when using multiple backgrounds), you’ll have to declare a property that gets overwritten by the CSS3 feature, but that will still show up in older browsers. For example, for multiple backgrounds, you might do this:

.element {
 background: url(images/fallback.jpg) no-repeat;
 background: url(images/example.png) center center no-repeat,
 url(images/example-2.png) top left repeat;
}

Notice the single background image declared before the multiple background images line. Non-supporting browsers will display the single image but will ignore the 2nd line. Supporting browsers will read both lines, but the first line will be overwritten by the second. Some other CSS3 features that could benefit from this type of fallback are RGBA colors, HSLA colors, and gradients. To help you see how CSS3 feature degrade in older browsers, you can use a bookmarklet called deCSS3. deCSS3 It currently only works in Chrome and Safari, but just drag the link to your bookmarks bar and then click the link on any site that you want to de-CSS3’ and it will show you the site with text shadows, rounded corners and other new stuff removed. Of course, this is no replacement for actual browser testing, but can serve as a useful guide for faster development before you do your final testing towards the project’s end. Another tool to aid in dealing with fallbacks is the Modernizr JavaScript library. But if you’re intimidated by libraries, don’t be. Modernizr is not difficult to deal with from a CSS perspective. Check out this tutorial for a pain-free introduction.

Dealing with vendor prefixes

One of the messy parts of CSS3 is having to deal with all the different vendor prefixes. Maintaining code that uses all the prefixes is tedious and in some cases you don’t need all of them. Who can possibly remember when to include “-o-” or “-ms-” and when not to? Well, as mentioned, using the support charts will help. But here are a few other suggestions to help deal with vendor prefixes.

Use a CSS preprocessor

Preprocessors are all the rage right now. But CSS beginners and designers who aren’t hardcore developers or programmers may have a hard time dealing with these new tools. So although preprocessors are certainly not for everybody, they are definitely worth considering, because they can seriously improve your production and maintenance time. An extensive discussion of preprocessors is certainly beyond this article, but here are some links to get you started: 

And if you find that stuff too heavy, Chris Coyier of CSS-Tricks has some thoughts on preprocessors that might help you get an overall view. And here’s a post on Nettuts+ that covers some of the features and benefits of using a few of the most popular CSS preprocessors.

Be consistent in your code

If you choose not to preprocess your CSS using one of the aforementioned technologies, then you’ll have to deal with maintaining all the vendor prefixes. So make sure you pick a style and order for your vendor prefixes and stick with it. This way, your code will be easier to read and maintain. For example, some CSS developers put their vendor prefix lines in alphabetical order, and use indenting so that the values all line up, like this:

.element {
 -moz-transition: background-color linear .8s;
 -ms-transition: background-color linear .8s;
 -o-transition: background-color linear .8s;
 -webkit-transition: background-color linear .8s;
 transition: background-color linear .8s;
}

That’s just one way to do it. But whatever method you choose, just be consistent throughout your code. This would be especially important if you work on a team where others have to read and/​or maintain your code. Of course, not all CSS3 features are this easy to organize (for example, the code for keyframe animations is much more complicated), but for most features you should be able to have a consistent style that makes development and maintenance smoother.

What about the standard property?

You’ll notice in the example in the previous section, the last property declared after the vendor lines is the standard version of the property. If you’re going to include the standard property, this is definitely how you should do it. So always include it last when you add it. This is to ensure that the vendor implementation of the feature is overwritten by the standard implementation. But there’s a caution here. For some complex animations and interactions, it is conceivable that the implementation could change so much that when the browser starts supporting the standard property, it could have undesirable effects. So in some cases, you might be better off leaving out the standard property altogether. I wrote about this topic more in-depth on my blog, so check that out if you want a more comprehensive discussion of this issue.

Use Prefixr

One of the easiest ways to deal with all the cross-browser vendor weirdness is to use a handy little tool called Prefixr. With Prefixr, you just develop your code as always, and you could just use a single vendor prefix (for example, only “-moz-”) for all your CSS3. Then, when you’re done testing in that one browser and have everything working the way you want, just throw your code into Prefixr and it will generate all the extra vendor code for you. Prefixr also can be integrated automatically with your text editor, and includes support for lengthy keyframe animations code. As an alternative, you can also try out a tool I created called Animation Fill Code that adds the extra vendor code for keyframe animations.

Test thoroughly

The last suggestion I’ll give here is to test thoroughly in all the browsers you’re supporting. You can use dozens of tools and libraries to assist you with your CSS3 development, but nothing can replace thorough tests in real browser environments. And this advice would be especially important if you’re dealing with a lot of responsive design-related CSS3 (e.g. media queries), and heavy use of typographic features. You want your content to be usable and readable in all browsers, even if the CSS3 features aren’t available.

Louis Lazaris

Louis Lazaris is an author, freelance writer, and web developer. He curates Web Tools Weekly, a newsletter for front-end developers, and he writes about front-end web design technologies on Impressive Webs. You can follow Louis on Twitter or contact him through his website.

Read Next

Apple Opts for AR over VR at WWDC

An Apple VR headset has been one of the most widely-rumored devices of the last few years, and it was finally settled a…

Exciting New Tools for Designers, June 2023

We’re halfway through 2023 already, and the number of incredible apps, tools, and resources for designers is mounting.

3 Essential Design Trends, June 2023

This month we are focusing on three trends within a bigger website design trend – different navigation menu styles and …

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…