Clicky

Prefijos de proveedores CSS

Prefijos de proveedores CSS

Los navegadores utilizan cuatro motores: WebKit, Gecko, Trident o Presto

¿Cuáles son los prefijos de proveedores?

Los prefijos de proveedores son pequeñas cadenas que se anteponen a las propiedades CSS y que garantizan que la propiedad sólo será válida y prestada en el motor del navegador determinado. Chrome y Safari utilizan ambos el motor de renderizado WebKit, Firefox utiliza Gecko, Internet Explorer usa Trident y Opera usa Presto.

Los proveedores de navegadores no suelen implementar otros prefijos de proveedores, pero debido a la popularidad del navegador móvil basado en WebKit, proveedores como Opera y Firefox también han implementado prefijos de proveedores de WebKit en sus ofertas móviles. Los proveedores utilizan los siguientes prefijos:

•  WebKit:   -webkit
•  Firefox:   -moz
•  Opera:     -o
•  Internet Explorer:  -ms

¿Por qué los prefijos de proveedores?

Hay unas cuantas razones para usar los prefijos de proveedores del navegador:

•  Para aplicar propiedades de CSS que no tienen patrón de trabajo y nunca pueden llegar a ser estándar
•  Proporcionar primeras implementaciones de propiedades estándar
•  Para proporcionar una sintaxis alternativa a la norma

Se pueden aplicar por otras razones, pero estos son los principales motivos.

¿Qué propiedades usan, o han usado, los prefijos de proveedores?

Las principales propiedades que usan los prefijos de proveedores incluyen:

•  @ Keyframes
•  propiedades de transición y transformación (transition-property, transition-duration, transition-timing-function, transition-delay)
•  propiedades de animación (animation-name, animation-duration, animation-timing-function, animation-delay)
•  border-radius
•  box-shadow
•  backface-visibility
•  propiedades de la columna
•  propiedades de flexión
•  propiedades de perspectiva

Ha habido y habrá muchas más propiedades CSS prefijadas!

¿Cómo se utilizan los prefijos de proveedores?

Cuando se utiliza en navegadores las propiedades prefijadas, lo mejor es colocar primero las propiedades prefijadas del navegador, luego el nombre de la propiedad y el valor normal. Por ejemplo:

/* use of keyframes */
@-webkit-keyframes fadeIn {
    0% { opacity: 0; } 100% { opacity: 0; }
}
@-moz-keyframes fadeIn {
    0% { opacity: 0; } 100% { opacity: 0; }
}
@keyframes fadeIn {
    0% { opacity: 0; } 100% { opacity: 0; }
}

/* use of basic properties */
.myClass {
    -webkit-animation-name: fadeIn;
    -moz-animation-name: fadeIn;
    animation-name: fadeIn;
}

Si se conoce la norma, se usa esa regla, si no se conoce se desecha la regla y se usa la propiedad prefijada del proveedor!

Jesus_Caceres