Coding Vendor Prefixes with JavaScript

Mar 21, 2012
JavaScript
115 Shares
By

Savvy web developers often use vendor prefixes to try out the latest browser styles before the styles have been approved by the W3C and turned into a standard.  By specifying a browser or vendor prefix within your CSS stylesheet or style property within a JavaScript function, you can gain control of how an element will render within a specific browser (Chrome, Firefox, IE, etc.).

This gets you access to these browser’s newest and coolest styles and elements.  This article will illustrate how to use a JavaScript function to identify which vendor prefix is needed for the user’s browser. This technique has been adopted by the Microsoft MSDN team as a best practice for their demos.

Before diving into the tutorial, I want to stress the caveats with using vendor prefixes in both CSS and JavaScript.  While vendor prefixes can open your web pages to all the neat stuff companies have packed into their browsers. They can also render your code worthless if a vendor decides to drop support for the style you are accessing.  This happens when the vendor’s request for a new standard is not adopted by the W3C. The W3C is slow to adopt new standards and sometimes a vendor will withdraw its request in order to pursue other technologies. If you choose to employ vendor prefixes in your pages, you will want to make sure your code or stylesheets will still render beautifully when the vendor prefix is no longer found.

Here is an example of a JavaScript setting the transform style using vendor prefixes. (This could also be done in a CSS stylesheet, but this article is focusing on JavaScript.)

var oElement = document.getElementById("myElement");

oElement.style.msTransform = 'scale(2)';       //IE
oElement.style.webkitTransform = 'scale(2)';   //Chrome and Safari
oElement.style.MozTransform = 'scale(2)';      //Firefox
oElement.style.OTransform = 'scale(2)';        //Opera
oElement.style.transform = 'scale(2)';         //Someday this may get adopted and become a standard, so I put it in here.

As you can see, if you plan to use vendor prefixes for several styles in your site, this technique can get clunky and time consuming to code. Instead, a better way to find the supported browser is to loop through each vendor prefix to find the right property or return null if one is not found:

function GetVendorPrefix(arrayOfPrefixes) {

   var tmp = document.createElement("div");
   var result = "";

   for (var i = 0; i < arrayOfPrefixes.length; ++i) {

   if (typeof tmp.style[arrayOfPrefixes[i]] != 'undefined')
      result = arrayOfPrefixes[i];
   }
   else {
      result = null;
   }

   return result;
}

The next step is to initialize a variable for all the properties using vendor prefixes in your page.

var transformPrefix = GetVendorPrefix(["transform", "msTransform", "MozTransform", "WebkitTransform", "OTransform"]);
var transitionPrefix = GetVendorPrefix(["transition", "msTransition", "MozTransition", "WebkitTransition", "OTransition"]);
var animationPrefix = GetVendorPrefix(["animation", "msAnimation", "MozAnimation", "WebkitAnimation", "OAnimation"]);
var gridPrefix = GetVendorPrefix(["gridRow", "msGridRow", "MozGridRow", "WebkitGridRow", "OGridRow"]);
var hyphensPrefix = GetVendorPrefix(["hyphens", "msHyphens", "MozHyphens", "WebkitHyphens", "OHyphens"]);
var columnPrefix = GetVendorPrefix(["columnCount", "msColumnCount", "MozColumnCount", "WebkitColumnCount", "OColumnCount"]);

The last step is to incorporate these variables into the JavaScript functions throughout your site like this:

var oElement = document.getElementById("myElement");
if (transformPrefix) {
oElement.style[transformPrefix] = "scale(2)";
}
else {
// this is where to put code if the vendor prefix doesn't exist.
}

Here are the most popular vendor prefixes in both CSS and JavaScript formats:

Browser CSS Prefix CSS Example JavaScript Prefix JavaScript Example
Safari & Chrome -webkit- -webkit-transform webkit webkitTransform
Internet Explorer -ms- -ms-transform ms msTransform
Firefox -moz- -moz-transform moz mozTransform
Opera -o- -o-transform o oTransform

Test! Test! Test!

The key to successful sites is to test them thoroughly. This is especially true for sites using vendor prefixes.  Make sure you know what each page will look like in every browser where it could be displayed.  And if the vendor prefixed property is not found, make sure your page defaults to a standard property.  I would also recommend re-testing your site when browser updates are released to make sure a vendor hasn’t changed something that would break your code.

Other Options

There are alternatives to the technique illustrated here for manipulating vendor prefixed properties in your site.  Lea Verou presents a –prefix-free alternative and there are tools like LESS and SASS that can keep your coding to a minimum. Another option is from the company Modernizr which offers a nifty JavaScript library that makes coding vendor prefixes a cinch.  Whatever option you decide to use, don’t forget your site must be tested because vendor prefixes are not approved by the W3C and support can be dropped at the vendor’s whim.

-Happy Coding!

Author: Kim S. Teeple
Kim S Teeple graduated with a Communications Degree from Ohio State University, but found she had an aptitude for computers soon after college. She joined The Limited's IT department as a helpdesk analyst in 1995 and quickly moved into web development. In 1998, she moved back to her home town of Crestline, Ohio to join Pittsburgh Glass Works as a Systems Analyst. She has also done some free lance web development work for various companies.
  • http://twitter.com/streunerlein Dominique Sandoz

    Thanks, just a warning for other people visiting this: Code is buggy and contains logic errors, you may have to correct these first.

    Corrected code can be found here: https://gist.github.com/2935794

    Greetings

    Dominique