Navigation

CSS3 Best Practices for designers

CSS, Web Design | May 28, 2012

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 IE6-8). 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.

 

Your thoughts?

Do you have a lot of experience with CSS3? Do you have any ‘best practices’ that you’ve developed? Feel free to offer your comments and suggestions.


This post was written exclusively for Webdesigner Depot by Louis Lazaris, an author, freelance writer, and web developer. Louis is a co-author of HTML5 & CSS3 for the Real World, published by SitePoint, and he writes about front-end web design technologies on Impressive Webs. You can follow Louis on Twitter or contact him through his website.

Share this post
<
Comments (no login required)
  • http://www.joomladesignservices.com/ William Smith

    Provided great features.  All the points about what to do or not to do are good to take help for web design.

  • http://www.leachcreative.com/ Andrew Leach

    Great tips, thanks for sharing.

  • http://www.evoclicks.net/ Evoclicks

    Thanks for sharing ! :)

  • http://www.evoclicks.net/ Evoclicks

    Good blog ! And Great Post ;)

  • http://fontsbytes.com/ FONTSBYTES.COM

    css3/html5 the great combo!!!

  • Gunjesh Kumar

    Good tips….but what about using CSS3 generators? If you use any of these, you do not require to remember many of these best practices!

  • http://www.patibs.nl/ Ebrahim Patel

    People always start with something like HTML5 Boilerplate or Twitterbootstrap. You will make life for yourself much much easier. Also avoid Saas and Less if you can…

  • http://www.cbil360.com/ Web Design Company

    css3 is the current new practices to web designers which helps them a lot. 

  • http://www.facebook.com/alexcoady Alex Coady

    Good tips; I think when advising pre-processors I’d only suggest using SASS as it seems to be the best of the lot (although this is mostly a matter of opinion, there’s no denying the beneficial functionality of SASS and Compass). Good post.

  • http://www.mazero.com/ Webtrends

    Before you will become a professional web designer, you should learn important things, techniques, information and ways on how to make a beautiful designs. This article share some important advice that helps web designers on what method or system they should use.

  • http://twitter.com/llihcruhc Nina Churchill

    Great Tips!  Thanks!