Prefix Free Prefijos automáticos en CSS3

CSS3 en muchos casos resulta algo molesto y eso es debido a los prefijos de los diferentes navegadores que no se ponen de acuerdo para cumplir solo con el standard de la W3C. Existen varios que no son difíciles de aprender, son tediosos de escribir y quitan tiempo que podría invertirse en otras cosas, pero como dice el slogan de Prefix Free “Break free from CSS prefix hell!”.

Lea Verou, ha creado una librería Javascript para que no tengamos que llenar de prefijos nuestra hoja de estilos, lo cual nos hace perder mucho tiempo.

Prefix Free Logo

Prefix-Free, es una libreria javaScript que agrega los prefijos de CSS3 de forma automatica solo cuando se necesiten, si usamos border-radius y un navegador webkit no soporta el standard la libreria agrega -webkit-border-radius, como ya dije solo en el caso de que sea necesario.

Uso

El uso de la librería no es difícil, sólo la agregamos a la cabecera de nuestro documento:

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

Si usamos wordpress no es necesario llamar desde el header.php, lo podemos hacer atraves desde el archivo functions.php de la forma correcta.

function scripts_load() {
   wp_register_script( 'prefixfree', TEMPPATH . '/js/prefixfree.min.js', false, '1.8.0');
   wp_enqueue_script( 'prefixfree' );
}		
add_action( 'wp_enqueue_scripts', 'scripts_load' );

¿Como Funciona?

Asumiendo que tenemos esta clase en una hoja de estilo:

.container {
   width: 960px;
   margin: 0 auto;
   
   /* prefijos css3 */
   -webkit-box-shadow: 20px;
   -moz-box-shadow: 20px;   
   box-shadow: 20px; /* standard */

   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px; /* standard */

   background: -webkit-linear-gradient(top, #e3e3e3 10%, white);
   background: -moz-linear-gradient(top, #e3e3e3 10%, white);
   background: -o-linear-gradient(top, #e3e3e3 10%, white);
   background: -ms-linear-gradient(top, #e3e3e3 10%, white);
   background: linear-gradient(top, #e3e3e3 10%, white); /* standard */
}

La librería nos la deja de esta forma, solo dejando el standard.

.container {
   width: 960px;
   margin: 0 auto;
   box-shadow: 20px;
   border-radius: 4px;
   background: linear-gradient(top, #e3e3e3 10%, white);
}

En el caso de que solo tengamos esto:

.transformacion {
   transform: rotate(15deg);
   animation: rotate;
}

Dependiendo del navegador, nos agrega:

.transformacion {
   /* chrome, safari */
   -webkit-transform: rotate(15deg);
   -webkit-animation: rotate;

   /* mozila */
   -moz-transform: rotate(15deg);
   -moz-animation: rotate;
   
   /* etc etc etc */
}

Puedes realizar un Test Drive para ver mas a fondo el funcionamiento de la libreria.

En mi opinión la librería es bastante buena pero existen algunos inconvenientes al usarla que son:

  • El tamaño del archivo, 2 kb con compresión gzip.
  • No funciona con estilos @importados.
  • No funciona con archivos locales, en Chrome y Opera.
  • No funciona con estilos inline, de cualquier forma no es muy buena práctica que digamos.
  • No funciona con hojas de estilos de otros dominios.

Referencias

Chris Coyier realizó una entrevista a Lea Verou.

Recomendado