CSS prefix issue and Modernizr Prefixed

If you are doing any CSS development using Javascript you must be aware of prefixes like -moz-transform, -webkit-transform, -o-transform required by Firefox, Safari and Opera. Safari and Chrome use the same –webkit- prefix.

You can use  Modernizr to simplify the task.

the article Modernizr Prefixed by Andi Smith is a definite read.

In this article Andi explains how you can use Modernizr to simplify your life.

Typical usage:

In HTML page

<script src="js/modernizr.js"></script>

In the Javascript

var car_cont=document.getElementById('carousel_container') ;
    
car_cont.style[Modernizr.prefixed('perspective')]  = '1100px';

This is equivalent to the CSS statement

-webkit-perspective: 1100px;
moz-perspective: 1100px;
-o-perspective: 1100px; ----and so on.

Some more references from W3Schools

1. CSS3 Browser Support Reference
2. CSS Reference
3. example: CSS3 perspective Property