Sé más productivo en tus proyectos ahorrándote escribir los prefijos de navegadores con Prefix Free.
Antes de adentrarnos en esta interesante utilidad, nos podemos preguntar ¿Qué son los prefijos? Pues son palabras reservadas que suelen ir detrás de algunas propiedades css3 y que son distintas según el navegador. Os dejo un listado de prefijos de los principales navegadores:
- -webkit- (Google Chrome y Safari)
- -moz- (Firefox)
- -o- (Opera)
- -ms- (Internet explorer)
Destacar que el uso de prefijos suele aplicarse a propiedades que se encuentran en fase experimental o que aún no se han convertido en un estándar.
Por ejemplo solemos utilizar estos prefijos cuando aplicamos a un elemento la propiedad transition y lo hacemos de la siguiente forma:
#elemento{
-moz-transition:all 0.5s ease;
-webkit-transition:all 0.5s ease;
-o-transition:all 0.5s ease;
-ms-transition:all 0.5s ease;
}
Como vemos, es muy ineficiente, ya que tenemos que escribir la misma propiedad con su prefijo para cada uno de los navegadores con el objetivo de que se aplique.
En mi caso, para evitar esto, y ser más productivo, utilizo –Prefix-Free.
¿Qué es –Prefix-Free?
Es un fichero en javascript que automáticamente nos agrega estos prefijos a las propiedades css que lo necesiten, simplificando el código ya que sólo debemos escribir la propiedad una vez, por tanto nos ahorra mucho tiempo y hace nuestro código css más fácil de entender.
Es compatible con IE9+, Opera 10+, Firefox 3.5+, Safari 4+ y Chrome en escritorio. En móviles con Mobile Safari, Android browser, Chrome and Opera Mobile.
Un ejemplo bastante sencillo es el siguiente, donde queremos aplicar a un elemento un degradado, para ello debemos utilizar la propiedad –linear-gradient con prefijos:
#elemento{
background: -webkit-linear-gradient(red, blue); /* For Safari */
background: -o-linear-gradient(red, blue); /* For Opera*/
background: -moz-linear-gradient(red, blue); /* For Firefox*/
background: linear-gradient(red, blue); /* Standard syntax */
}
Como vemos, hacerlo de este modo es bastante ineficiente , con –prefix-free solamente escribiríamos:
#elemento{
background: linear-gradient(red, blue);
}
Aquí os dejo un interesante demo donde podéis introducir cualquier propiedad que funcione con prefijos, y ver cómo se le añade automáticamente dicho prefijo en función del navegador.
¿Cómo usarlo en nuestros proyectos?
Utilizar Prefix Free es bastante sencillo, simplemente debemos descargar el script desde su página oficial agregándolo dentro de <head> de esta manera:
<script src=”prefixfree.min.js” type="text/javascript"></script>
Antes de acabar este artículo, quería comentar algunas características y limitaciones que debemos tener en cuenta:
- Prefix-Free es capaz de procesar cualquier hoja de estilo que tengamos «linkeada» en nuestro proyecto
<link>, también si tenemos el estilo de forma local entre las etiquetas<style></style>. - También trabaja con los estilos de cualquier elemento que utilice el atributo “style” (también conocidos como estilos en línea). Aunque no funcionará con IE y versiones de Firefox < 3.6.
- No funciona con hojas de estilos de otros dominios, tampoco con estilos importados (@import-ed) ni con archivos locales en Chrome y Opera.
Como vemos esta utilidad suena muy interesante y a pesar de tener varias restricciones, la mayoría de estas se pueden resolver, para ello basta con seguir unas pequeñas guías que nos facilitan en su web oficial. Por ejemplo en esta guía nos explican cómo habilitar fácilmente el testeo local en Chrome y Opera.
Espero les sea de gran utilidad, y comenten cualquier duda al respecto.
No todo es color de rosa pero es suficiente para no esta rescribiendo esos molestos prefijos jeje. Gracias Falcon =D
Excelente ya me estaba molestando tener que estar escriviendo todos estos prefijos. Muy bueno FALCON…
alguien me puede ayudar, en que parte de la pagina de -prefix-free puedo descargar el archivo, entré pero no se donde descargar, me pierdo, porfavor necesito su ayuda, o laguien que me puede pasar ese archivo, se los agradecere
Mira,
Solo dale al circulo que dice
only 2kb gzipped y se te descarga
por favor di paso a paso como hacerlo ya ue no puedo despues de la descarga
Sirve este fichero para Sass?
Muy util la verdad!
Genial.!
hola amigos queria sabe como añadir el prefix-free al NOTEPAD++ trabajo con este editor,ademas tengo un problema al descargar el script de la pagina prefex-free no puedo abrir esa carpeta.
Yo lo añadiría de forma remota al final de la etiqueta como src=»https://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js»
Estoy utilizando el notepad ++ en un sitio web ya hecho. Pero al escribir los atributos de flexbox, al único que responde es al display:flex, pero no reconoce los demás, después de haberme descargado los prefijos y haber linkeado bien en HTML el archivo. Qué debo hacer? es añadir algún plugin al notepad++? Lo quisiera terminar pronto. alguna sugerencia, por favor?
por favor di paso a paso como hacerlo ya que no puedo después de la descarga no me sale
Hola me aparece este error cuando quiero abrir el archivo de prefix, como lo soluciono? Gracias https://uploads.disquscdn.com/images/91c9290a486fe40e442f9de3890d1a10d120c6d8927bddfe511039bc08b18702.jpg ,
No entiendo como funciona, hice todo lo que dice pero igual si necesito prefijos tengo que escribirlos.
Hola funciona solo el -webkit los demas no.