Prefijos automáticos en CSS3 con Prefix Free

CSS3 es muy bonito de eso no hay duda, lo que resulta muy molesto son los prefijos. Existen varios que, si bien no son difíciles de aprender, son tediosos de escribir y quitan tiempo que podría invertirse en otras cosas.

Por suerte esta ingeniosa diseñadora Lea Verou, de la que ya se ha hablado en Cristalab, ha creado una librería Javascript para que no tengamos que llenar de prefijos nuestra hoja de estilos.

De esta librería ya se habló acá, pero muy superficialmente, quise hacer algo un poco más extendido porque es muy bonita y me gusta .

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

Código :

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

Y la magia sucede en el archivo CSS, donde:

Código :

.container {
   width: 960px;
   margin:10px 0;

   -webkit-box-shadow: 20px;
   -moz-box-shadow: 20px;
   box-shadow: 20px;

   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;

   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);
}

Se convierte en:

Código :

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

Se suprimieron todos los prefijos dejando solo el “estándar”. Sí, así de fácil.

Pros

• El tamaño del archivo, 2 kb con compresión gzip
  
• its free!
  

Contras

• No funciona con estilos @importados
  
• No funciona con archivos locales, en Chrome y Opera , sí en localhost, pero tambien hay unos pequeños hacks
  
• 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
  

Los contras son insignificantes comparados con los años de vida que ganarás al no tener que preocuparte por los prefijos.

Sitio oficial | -free-prefix
Autora | Lea Verou

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.