Dile adiós a los prefijos en CSS3 con Prefix Free

¿Qué son los prefijos?

Los insoportables prefijos son usados con el fin de disponer ciertas funcionalidades en CSS3 para distintos navegadores, anteponiéndolos de esta manera en nuestros atributos CSS3:

#elemento {
width: 500px;
height: 500px;

border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;

box-shadow: 0 0 10px #000000;
-webkit-box-shadow: 0 0 10px #000000;
-o-box-shadow: 0 0 10px #000000;
-moz-box-shadow: 0 0 10px #000000;
-ms-box-shadow: 0 0 10px #000000;
}

Los prefijos utilizados representan a distintos navegadores.

• -webkit- representa a navegadores basados en webkit como Chrome y Safari.
• -o- representa al navegador Opera.
• -moz- representa a navegadores basados en Gecko, como Firefox.
• -ms- representa al navegador poco usado "Internet Explorer".

Con solo agregar un prefijo a tal condición se aplicara al navegador deseado. Aunque se puede ocupar de una forma ingeniosa para lograr algo selectivo en aplicar el CSS3 en distintos navegadores. También evitaras malgastar tiempo, y ocuparlo en otra cosa más importante.

Pero por suerte tenemos una muy buena herramienta llamada Prefix Free para agregar todo los prefijos automáticamente, convirtiendo nuestro código CSS en algo mas cálido, e incluso mas fácil de entender, así evitando errores y también la pérdida de tiempo en nuestros proyectos, quedando nuestro código CSS de esta manera:

#elemento {
width: 500px;
height: 500px;

border-radius: 50%;

box-shadow: 0 0 10px #000000;

}

¿Cómo usar Prefix Free?

Utilizar Prefix Free es  bastante sencillo simplemente debemos descargar desde su pagina el script oficial agregándolo antes de </head> de esta manera:

Usamos vista previa y si todo esta bien, presionamos guardar. Ya de esta manera el script hará su trabajo y podrán ocupar todo sus atributos CSS3 sin prefijos, el script también lo pueden subir a sus propios repositorios si lo desean.

¡Compatibilidad!

Prefix Free es compatible con navegadores de escritorio como IE9+, Opera 10, Firefox 3.5+, Safari 4+ y Chrome. Para navegadores mobiles: Mobile Safari, Android Browser, Chrome y Opera Mobile.

¡Algunos inconvenientes!

• No funciona con estilos importados (@import).
• No funciona con archivos locales en Chrome y Opera.
• No funciona con estilos inline.
• No funciona con hojas de estilos de otros dominios.

Espero que les sea de gran utilidad queridos lectores. Un gran abrazo :)