⇪

Prefijos (vendor prefixes)

facebook-svg gplus-svg twitter-svg

Cada motor de renderizado ( browser engine ) tiene sus propios prefijos, los más notables siendo:

  • -moz- para Firefox y los demás navegadores de Gecko,
  • -webkit- para los navegadores WebKit: Chrome, Safari, etc.
  • -ms- para Microsoft (Internet Explorer),
  • -o- para Presto, el antiguo motor de Opera.
Pero ¿Porque tantos prefijos?

En el css3 hay nuevas propiedades que están todavía en estado experimental. Los navegadores tienen varias maneras de interpretar el css, y varios niveles de soporte para los estandartes W3C.
Los prefijos ( vendor prefixes ) se utilizan con estas propiedades cuando sea necesario para conseguir un aspecto consistente y uniforme en todos los navegadores.

¿Como utilizar los prefijos?

Vamos a ver un ejemplo: si queremos que nuestro fondo sea un degradado linear, es así como tenemos que hacerlo, al menos en este momento. Más tarde esperemos que será mucho más fácil.

.linear-gradient {
  background-image: -moz-linear-gradient(top, #D7D 0%, #068 100%); 
  background-image: -o-linear-gradient(top, #D7D 0%, #068 100%);  
  background-image: -webkit-linear-gradient(top, #D7D 0%, #068 100%);  
  background-image: linear-gradient(top, #D7D 0%, #068 100%);

}
¿Que pasará con mi código cuando los navegadores dejen de utilizar los prefijos?

Los navegadores antiguos utilizarán la primera línea de código que entienden, o sea la que lleva su prefijo, e ignorarán las otras líneas de código ( que no saben como interpretar ). Por de otra parte los navegadores nuevos, que ya no necesitan prefijos, se quedarán (según las reglas del css) con la última línea de código, la de la propiedad sin prefijo.

Si queremos saber que prefijos tenemos que utilizar, podemos consultar : caniuse.com.
(por ejemplo: información acerca del soporte de linear-gradient en los navegadores).