Deep Impact Header picture
Home » Tutorials » Auto-prefix CSS in Javascript

Auto-prefix CSS in Javascript

When using CSS in Javascript you'll need prefixes for certain properties. Luckily there's a way In Javascript to automate this, thus needing less repetitive code. Part of the information presented here I got from JavascriptKit. You can find variations on this code at Developer Drive and David Walsh's website. Other interesting sources are Should I prefix and the well-known Can I use. I have added some of my own experiments and examples.

Let's get started

You can retrieve all your browser's supported properties with a simple line of Javascript.
Type the following in your browser's console:

console.log(document.documentElement.style);

Result in Firefox:
FireFox Firebug Console

Results in Chrome & Opera:
Chrome en Opera Console

In Firefox, click on "more...", and in Chrome & Opera on "..." to get the full list of supported properties.

It's now possible to make our own array of properties we want to use, and look for them in this list. Let's use "animation" as an example.

var propArray = ['animation', 'MozAnimation', 'WebkitAnimation'];

To see which elements of our array are supported in your browser, type the following code in the console:

var propArray = ['animation', 'MozAnimation', 'WebkitAnimation'];
for (var i = 0; i < propArray.length; i += 1){
  if (propArray[i] in document.documentElement.style){
    console.log(propArray[i]);
  }
}

FireFox (42.0) gives us the folowing results: "animation" & "MozAnimation". Both these properties are supported.
Chrome (42.0.2311.135 m) and Opera (29.0.1795.47) support "WebkitAnimation".

The function

We can use this information to write a function which will automatically append the correct CSS property to our code. An example with the "box-shadow" property:

function getSupportedProp(propArray) { 
  for (var i = 0; i < propArray.length; i += 1){
    if (propArray[i] in document.documentElement.style){
      return propArray[i];
    }
  }
}

//Example
var boxshadowProp = getSupportedProp(['boxShadow', 'MozBoxShadow', 'WebkitBoxShadow']);
document.getElementById("mydiv").style[boxshadowProp] = "5px 5px 1px #818181";

Example 1:

Click the button to check if your browser needs a prefix for the "box-shadow" property:


The code:
// function to check for supported property
function getsupportedprop(propArray) { 
  var root = document.documentElement;

  for (var i = 0; i < propArray.length; i += 1){
    if (propArray[i] in root.style){
      return propArray[i];
    }
  }
}

// Start Alert function after button click
function alertBoxShadow(event){
  alert(getsupportedprop(['boxShadow', 'MozBoxShadow', 'WebkitBoxShadow']));
}

function main(){
  var mijnKnop = document.getElementById("mijnKnop");
  mijnKnop.addEventListener("click", alertBoxShadow, false);
}
// Wait until the page is loaded to start the main function
window.addEventListener("load", main, false);

Example 2:

Your bowser supports:

HTML
<!DOCTYPE HTML>
<html>
  <head>
    <title>Auto-prefix Voorbeeld</title>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0" />
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script src="js/myScript.js"></script>
    <!--[if lt IE 9]>
    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div id="mijnDiv"></div>
    <button id="mijnButton">Draai</button>
  </body>
</html>
CSS (main.css)
#mijnDiv {
  width: 50px;
  height: 50px;
  background-color: blue;
}
Javascript (myScript.js)
var transformProp = getsupportedprop(['transform', 'MozTransform', 'WebkitTransform']);

function getsupportedprop(propArray) { 
  var root = document.documentElement;
  // The function
  for (var i = 0; i < propArray.length; i += 1){
    if (propArray[i] in root.style){
      return propArray[i];
    }
  }
}

function draai(event){
  var mijnDiv = document.getElementById("mijnDiv");
  mijnDiv.style[transformProp]="rotate(10deg)"; // automatische prefix door aanroep functie
}

function main(){
  var mijnButton = document.getElementById("mijnButton");
  mijnButton.addEventListener("click", draai, false);
}
window.addEventListener("load", main, false);