Prefix Free
¿Qué es prefix free?
Prefix Free es una librería JavaScript que nos ayuda a automatizar el proceso de escritura de los prefijos correspondientes para cada navegador en nuestra hoja de estilos, de forma que no tendríamos necesidad de escribir algo como lo siguiente:
[css]
.tu-regla {
width: 960px;
margin: 0 auto;
box-shadow: 20px;
border-radius: 4px;
background-image: -moz-linear-gradient(#000,#FFF);
background-image: -webkit-linear-gradient(#000,#FFF);
background-image: -o-linear-gradient(#000,#FFF);
background-image: -ms-linear-gradient(#000,#FFF);
background-image: linear-gradient(#000,#FFF);
}
[/css]
El ejemplo anterior es perfecto pero
¿Qué son los prefijos? ¿Dónde se utilizan?
Los prefijos son reglas de CSS3 que debemos escribir actualmente para disponer de ciertas funcionalidades en los distintos navegadores existentes, a continuación una lista con los prefijos que se utilizan actualmente y donde se explica que representan.
- -webkit- representa a los navegadores basados en webkit como Chrome y Safari.
- -o- representa al navegador Opera.
- -moz- representa a los navegadores basados en Gecko, como Firefox.
- -ms- representa al navegador «Internet Explorer».
Si bien los anteriores prefijos de CSS3 no son difíciles de aprender, en muchas ocasiones resulta muy molesto o tedioso escribirlos ya que nos roban tiempo y agregan un exceso de líneas de código CSS y en muchas ocasiones uno termina equivocando u olvidando escribir.
Pero por suerte ahora tenemos una muy buena herramienta llamada Prefix Free que gracias a su ingeniosa diseñadora Lea Verou agrega todos los prefijos automáticamente, convirtiendo nuestro código CSS3 en algo menos extenso y más fácil de entender, por lo que nuestro código CSS3 quedaría de la siguiente manera:
[css]
. tu-regla {
width: 960px;
margin: 0 auto;
box-shadow: 20px;
border-radius: 4px;
background: linear-gradient(top, #e3e3e3 10%, white);
}
[/css]
¿Cómo usar Prefix Free?
Para poder utilizar Prefix Free es bastante sencillo simplemente debemos descargar desde su página oficial el script y agregarlo en el <head> de tu página de la siguiente manera:
[html]
[/html]
¿Con que navegadores es compatible Prefix Free?
La librería JavaScript Prefix Free es compatible con los navegadores de escritorio como IE9+, Opera 10, Firefox 3.5+, Safari 4+ y Chrome, además es compatible con los navegadores móviles: Mobile Safari, Android Browser, Chrome y Opera Mobile.
¿Tiene algún inconveniente Prefix Free?
Lamentablemente Prefix Free si tiene algunos inconvenientes los cuales listamos a continuación:
- No funciona con estilos importados (@import).
- No funciona con estilos en línea.
- No funciona con hojas de estilos de otros dominios.
- No funciona con archivos locales en Chrome y Opera.