Prefix Free

Como ya todos saben, CSS3 trae consigo cosas geniales, pero debido a la falta de colaboración entre los diferentes proveedores de navegadores, tenemos que sufrir la existencias de prefijos de acuerdo a cada navegador.

Si bien los prefijos existentes no son muchos, es molesto tener que repetir las instrucciones, una por cada prefijo. Es acá donde prefix free hace su entrada, y es que la ingeniosa diseñadora Lea Verou se puso a la tarea de crear esta maravillosa librería, que esta desarrollada en JavaScript, y la que permite que usemos solo las propiedades estándar en nuestras hojas de estilo, lo que resulta realmente útil, mas si tenemos en cuenta que no sabemos cuando estos prefijos pueden cambiar, como parece que puede suceder en el caso de Chrome, ahora que dejan de lado webkit.

Esta librería esta disponible en el sitio oficial de Prefix Free, destaca su reducido tamaño, y el hecho de ser libre.

Su uso es bastante sencillo, y basta con agregar a la cabecera de nuestro documento la siguiente línea:

<script src="js/prefixfree.min.js"></script>

Con esto podremos pasar de tener una hoja de estilo con cosas como esta:

div{
    width: 960px;
    margin:10px 0;
    
    -webkit-box-shadow: 5px; /*Chrome y Safari*/
    -moz-box-shadow: 5px; /*Mozilla*/
    -ms-box-shadow: 5px; /*IE9 o superior*/
    -o-box-shadow: 5px; /*Opera*/
    -khtml-box-shadow: 5px; /*Konqueror*/
    box-shadow: 5px;
    
    -webkit-border-radius:15px; /*Chrome y Safari*/
    -moz-border-radius:15px; /*Mozilla*/
    -ms-border-radius:15px; /*IE9 o superior*/
    -o-border-radius:15px; /*Opera*/
    -khtml-border-radius:15px; /*Konqueror*/
    border-radius:15px;
}

Por una hoja de estilos como esta:

div{
    width: 960px;
    margin:10px 0;
    box-shadow: 5px;
    border-radius:15px;
}

Como pueden ver se usa solo la notación estándar.