Hablemos de Los prefijos de los Navegadores en CSS3 (Vendor Prefixes)

Bueno de este tema se habla mucho en los temas de css3 ya que muchos de los atributos o propiedades impulsados por css3 no se verían en los diferentes navegadores si no fuesen por los prefijos de cada navegador.

¿Pero que son estos prefijos? Bueno, los prefijos son modificadores que le anteponemos a las nuevas propiedades de css3 que no son muy bien interpretadas por los navegadores para que cada navegador por medio de este modificador haga que el navegador interprete este fragmento de código de CSS3.

Estos son los prefijos de los principales Navegadores:

-moz-: (para navegadores basados en Gecko como Mozilla)

-webkit-: (para navegadores basados en Webkit, como Chrome o Safari).

-o: (para Opera)

-ms-: (para inetrnet explorer)

Como hemos dicho, solo colocar cada prefijo antes de la propiedad css3 para que el respectivo navegador reconozca la propiedad y las características.

Pero, ¿por qué tenemos que utilizar estos prefijos?

Bueno básicamente estos prefijos son necesarios porque cada navegador hace pruebas y experimentos en cuanto a la implementación de las nuevas propiedades de CSS3 en sus proyecto o en su navegador, y por lo tanto este es el método que se implementa para esto, y la realidad es que cada navegador es libre de aplicar extensiones a sus navegadores.

¿Como los utilizamos?

Como dijimos antes, básicamente es agregar cada prefijo de cada navegador antes de la propiedad css3 a aplicar. Veamos un ejemplo:

prefijos en css3

¿Pero siempre tengo que añadir esa cantidad de código para dar la misma apariencia en los principales Navegadores?

Bueno en realidad no. No tenemos que aprendernos esta cantidad de códigos, ni llenar nuestra hoja de estilo de código, para esto existen herramientas que hacen que no tengamos que escribir un código para cada navegador, para esto existen herramientas como la siguientes:

1 – prefix-free

prefix free

prefix-free, un librería Javascript que se encarga de gestionar estos prefijos y utilizándolo vamos a trabajar sin tener que estar agregando esos prefijos.

solamente lo descargamos lo ubicamos en una carpeta y añadimos la ruta al archivo web. Ej:

y nuestro codigo que era asi:

Pasara a ser sin prefijo y se verá así, que es la version estandar:

y ¡¡ adios prefijos !!.
esta tecnica es soportado por: IE9+, Opera 10+, Firefox 3.5+, Safari 4+ y Chrome.

Esta es su web: http://leaverou.github.com/prefixfree/

2 – CSSPrefixer

Esta es una buena herramienta online que nos hace lo contrario a la anterior, es decir agregamos el código simple y le damos a procesar y el nos genera los prefijos correctos para agregar a nuestro css, puede ser útil por si no recordamos los diferentes prefijos.

css prefix

Esta es su web: http://cssprefixer.appspot.com/

————————————————————————————————————————-

Si quieres saber mas de los Prefijos propietarios en CSS3 te recomiendo este articulo en español:
http://www.wextensible.com/articulos/vendor-prefixes/

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo