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.

If you have a question about this or any other topic, the easiest thing is to drop by our forums where a bunch of the friendliest people you'll ever run into will be happy to help you out!

THE KIRUPA NEWSLETTER

Get cool tips, tricks, selfies, and more...personally hand-delivered to your inbox!

( View past issues for an idea of what you've been missing out on all this time! )

WHAT DO YOU THINK?

blog comments powered by Disqus

NEWSLETTER

No spam. No fluff. Just awesome content sent straight to your inbox!

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