Avoid Using Vendor Prefixes

by kirupa   |   21 September 2015

Before we go on...this tutorial is also available as a video!

If you are one of those people who prefers watching a video of a technical topic such as this, look no further:

If you have the time, you should read the tutorial as well. The text does go into a bit more detail, and I find copying and pasting code to be a lot more fun than pausing a video and writing the characters by hand...like an animal!

My fellow reader, take look at the following example:

 

[  I don’t care what anybody says, I think it looks cute ]

If you are on a browser that supports CSS3 animations, you will see two clouds happily moving around inside a container.

The CSS for all of this looks as follows:

#mainContent {
	background-color: #A2BFCE;
	border-radius: 4px;
	padding: 10px;
	width: 350px;
	height: 200px;
	overflow: hidden;
}
.cloud {
	position: absolute;
}
#bigcloud {
	animation-name: bobble;
	animation-duration: 2s;
	animation-iteration-count: infinite;

	-ms-animation-name: bobble;
	-ms-animation-duration: 2s;
	-ms-animation-iteration-count: infinite;

	-moz-animation-name: bobble;
	-moz-animation-duration: 2s;
	-moz-animation-iteration-count: infinite;

	-o-animation-name: bobble;
	-o-animation-duration: 2s;
	-o-animation-iteration-count: infinite;

	-webkit-animation-name: bobble;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
}

#littlecloud {
	animation-name: bobble;
	animation-duration: 4s;
	animation-iteration-count: infinite;

	-ms-animation-name: bobble;
	-ms-animation-duration: 4s;
	-ms-animation-iteration-count: infinite;

	-moz-animation-name: bobble;
	-moz-animation-duration: 4s;
	-moz-animation-iteration-count: infinite;

	-o-animation-name: bobble;
	-o-animation-duration: 4s;
	-o-animation-iteration-count: infinite;

	-webkit-animation-name: bobble;
	-webkit-animation-duration: 4s;
	-webkit-animation-iteration-count: infinite;
	
	margin-top: 50px;
	margin-left: 100px;
}
@keyframes bobble {

    0% {
      left: 50px;
      top: 40px;
      animation-timing-function: ease-in;
    }
    
    50% {
    	left: 50px;
    	top: 50px;
       animation-timing-function: ease-out;
    }
    
    100% {
    	left: 50px;
    	top: 40px;
       animation-timing-function: ease-in;
    }
}
@-ms-keyframes bobble {

    0% {
      left: 50px;
      top: 40px;
      -ms-animation-timing-function: ease-in;
    }
    
    50% {
    	left: 50px;
    	top: 50px;
        -ms-animation-timing-function: ease-out;
    }
    
    100% {
    	left: 50px;
    	top: 40px;
        -ms-animation-timing-function: ease-in;
    }
}
@-moz-keyframes bobble {

    0% {
      left: 50px;
      top: 40px;
      -moz-animation-timing-function: ease-in;
    }
    
    50% {
    	left: 50px;
    	top: 50px;
        -moz-animation-timing-function: ease-out;
    }
    
    100% {
    	left: 50px;
    	top: 40px;
        -moz-animation-timing-function: ease-in;
    }
}
@-webkit-keyframes bobble {

    0% {
      left: 50px;
      top: 40px;
      -webkit-animation-timing-function: ease-in;
    }
    
    50% {
    	left: 50px;
    	top: 50px;
        -webkit-animation-timing-function: ease-out;
    }
    
    100% {
    	left: 50px;
    	top: 40px;
        -webkit-animation-timing-function: ease-in;
    }
}
@-o-keyframes bobble {

    0% {
      left: 50px;
      top: 40px;
      -o-animation-timing-function: ease-in;
    }
    
    50% {
    	left: 50px;
    	top: 50px;
        -o-animation-timing-function: ease-out;
    }
    
    100% {
    	left: 50px;
    	top: 40px;
        -o-animation-timing-function: ease-in;
    }
}

Holy smokes! That is a lot of CSS. If you pay closer attention, you'll find that most of the CSS is just duplicated.

The reason for this duplication has to do with browser support. A lot of the new CSS3 features are officially supported in the latest version of the popular browsers, but older browsers don't support them officially. In order to have these new features work on these older browsers, one needs to duplicate the declarations with the appropriate vendor prefix for Internet Explorer (-ms), Chrome/Safari (-webkit), Firefox (-moz), and Opera (-o). If you miss a vendor prefix variation, you risk your CSS being ignored by browsers that listen to that prefix.

Having all of this duplicated markup is problematic for several reasons:

  1. Any tweaks you make to a vendor-prefixed CSS rule/declaration need to be duplicated over all of its vendor prefixed copies. This is a time-consuming and potentially error prone process.
  2. It just looks bad. It makes your code less readable.

Fortunately, Lea Verou created an elegant solution that solves this problem. Meet the excellent -prefix-free library that takes your normal un-prefixed CSS and, at runtime, creates the appropriate vendor prefixes that the browser knows what to do with.

This means you no longer have to provide multiple copies of various style rules and declarations for multiple browsers. Just provide a single un-prefixed version and call it a day.

Below is a version of the bouncing clouds example without having the extraneous duplicated CSS:

#mainContent {
	background-color: #A2BFCE;
	border-radius: 4px;
	padding: 10px;
	width: 350px;
	height: 200px;
	overflow: hidden;
}
.cloud {
	position: absolute;
}
#bigcloud {
	animation-name: bobble;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}

#littlecloud {
	animation-name: bobble;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	
	margin-top: 50px;
	margin-left: 100px;
}
@keyframes bobble {

    0% {
      left: 50px;
      top: 40px;
      animation-timing-function: ease-in;
    }
    
    50% {
    	left: 50px;
    	top: 50px;
        animation-timing-function: ease-out;
    }
    
    100% {
    	left: 50px;
    	top: 40px;
        animation-timing-function: ease-in;
    }
}

By using -prefix-free, the above CSS ends up working in all of the major browsers without me having to do anything extra.

The end result is that you have clean and maintainable markup. Your users can view your CSS3 content if the browser supports it. If a browser such as Opera supports new stuff in the future, this library makes your content future proof as well.

Using -prefix-free

To use this library on your sites, all you have to do is:

  1. Download the JS file from GitHub.
  2. Upload that file to your server
  3. Reference it in the pages that need it.

You can see an example of this library at use in the following link: Bouncing Clouds using -prefix-free. Just view the source to see both the clean CSS as well as the script reference to -prefix-free.

Getting Help

If you have questions, need some assistance on this topic, or just want to chat - post in the comments below or drop by our friendly forums (where you have a lot more formatting options) and post your question. There are a lot of knowledgeable and witty people who would be happy to help you out

Share

Did you enjoy reading this and found it useful? If so, please share it with your friends:

If you didn't like it, I always like to hear how I can do better next time. Please feel free to contact me directly via e-mail, facebook, or twitter.

Kirupa Chinnathambi
I like to talk a lot - A WHOLE LOT. When I'm not talking, I've been known to write the occasional English word. You can learn more about me by going here.

Add Your Comment (or post on the Forums)

blog comments powered by Disqus

Awesome and high-performance web hosting!
BACK TO TOP
new books - yay!!!