¿Qué son los prefijos de proveedor o navegador CSS?

Los prefijos de proveedores de CSS, también conocidos como prefijos de navegador de CSS, son una forma para que los fabricantes de navegadores agreguen soporte para las nuevas funciones de CSS antes de que esas funciones sean totalmente compatibles en todos los navegadores. Esto se puede hacer durante un período de prueba y experimentación en el que el fabricante del navegador está determinando exactamente cómo se implementarán estas nuevas características de CSS. Estos prefijos se hicieron muy populares con el auge de CSS3 hace unos años.

Cuando se introdujo CCS3 por primera vez, una serie de propiedades emocionadas comenzaron a llegar a diferentes navegadores en diferentes momentos. Por ejemplo, los navegadores basados en Webkit (Safari y Chrome) fueron los primeros en introducir algunas de las propiedades de estilo de animación como la transformación y la transición. Al utilizar las propiedades prefijadas de los proveedores, los diseñadores web pudieron usar esas nuevas funciones en su trabajo y hacer que se vieran en los navegadores que las admitían de inmediato, ¡en lugar de tener que esperar a que los demás fabricantes de navegadores se pusieran al día!

Por lo tanto, desde la perspectiva de un desarrollador web de aplicaciones para usuario, los prefijos del navegador se usan para agregar nuevas características de CSS a un sitio y se sienten cómodos al saber que los navegadores admitirán esos estilos. Esto puede ser especialmente útil cuando diferentes fabricantes de navegadores implementan propiedades de formas ligeramente diferentes o con una sintaxis diferente.

Los prefijos de navegador CSS que puede usar (cada uno de los cuales es específico de un navegador diferente) son:

Androide:
-webkit-
Cromo:
-webkit-
Firefox:
-mez-
Explorador de Internet:
-Sra-
iOS:
-webkit-
Ópera:
-o-
Safari:
-webkit-

En la mayoría de los casos, para usar una nueva propiedad de estilo CSS, toma la propiedad CSS estándar y agrega el prefijo para cada navegador. Las versiones prefijadas siempre vendrán primero (en el orden que prefiera), mientras que la propiedad CSS normal será la última. Por ejemplo, si desea agregar una transición CSS3 a su documento, usaría el

transición

propiedad como se muestra a continuación:

-webkit- transición: toda la facilidad 4s; -mez- transición: toda la facilidad 4s; -Sra- transición: toda la facilidad 4s; -o- transición: toda la facilidad 4s;transición: toda la facilidad 4s;

Nota: Recuerde, algunos navegadores tienen una sintaxis diferente para ciertas propiedades que otros, así que no asuma que la versión con el prefijo de navegador de una propiedad es exactamente la misma que la propiedad estándar. Por ejemplo, para crear un gradiente de CSS, use la

gradiente lineal
propiedad. Firefox, Opera y las versiones modernas de Chrome y Safari usan esa propiedad con el prefijo apropiado, mientras que las versiones anteriores de Chrome y Safari usan la propiedad con prefijo

-webkit-gradiente
. Además, Firefox usa valores diferentes a los estándar.

La razón por la que siempre finaliza su declaración con la versión normal, sin prefijo, de la propiedad CSS es para que cuando un navegador admita la regla, use esa. Recuerda cómo se lee CSS. Las reglas posteriores tienen prioridad sobre las anteriores si la especificidad es la misma, por lo que un navegador leerá la versión del proveedor de una regla y la utilizará si no es compatible con la normal, pero una vez que lo haga, reemplazará la versión del proveedor con la regla de CSS real.

Los prefijos de proveedores no son un hack

Cuando se introdujeron por primera vez los prefijos de los proveedores, muchos profesionales de la web se preguntaban si se trataba de un truco o un cambio a los días oscuros de forzar el código de un sitio web para que sea compatible con diferentes navegadores (recuerde esos " Este sitio se ve mejor en IE "mensajes). Sin embargo, los prefijos de los proveedores de CSS no son hacks, y usted no debe tener reservas sobre su uso en su trabajo.

Un truco de CSS explota fallas en la implementación de otro elemento o propiedad para que otra propiedad funcione correctamente. Por ejemplo, el modelo de caja hackea fallas explotadas en el análisis de la

voz-familia
o en cómo los navegadores analizan las barras invertidas (

). Pero estos hacks se utilizaron para solucionar el problema de la diferencia entre cómo manejó Internet Explorer 5.5 el modelo de caja y cómo lo interpretó Netscape, y no tienen nada que ver con el estilo de la familia de voces. Afortunadamente, estos dos navegadores desactualizados son los que no nos preocupan en estos días.

Un prefijo de proveedor no es un hack porque permite que la especificación establezca reglas sobre cómo se puede implementar una propiedad, mientras que al mismo tiempo permite que los fabricantes de navegadores implementen una propiedad de una manera diferente sin romper todo lo demás. Además, estos prefijos están trabajando con propiedades CSS que eventualmente será parte de la especificación . Simplemente estamos agregando un código para obtener acceso a la propiedad antes de tiempo. Esta es otra razón por la que finaliza la regla CSS con la propiedad normal, sin prefijo. De esa manera, puede eliminar las versiones prefijadas una vez que se logre el soporte completo del navegador.

¿Quieres saber qué es el soporte del navegador para una determinada característica? El sitio web CanIUse.com es un recurso maravilloso para recopilar esta información y hacerle saber qué navegadores y qué versiones de esos navegadores admiten actualmente una función.

Los prefijos de proveedores son molestos pero temporales

Sí, puede parecer molesto y repetitivo tener que escribir las propiedades de 2 a 5 veces para que funcione en todos los navegadores, pero es una situación temporal. Por ejemplo, hace solo unos años, para colocar una esquina redondeada en una caja que tenía que escribir:

-moz-border-radius: 10px 5px;-webkit-border-top-left-radius: 10px;-webkit-border-top-right-radius: 5px;-webkit-border-bottom-right-radius: 10px;-webkit-border-bottom-left-radius: 5px;radio del borde: 10px 5px;
Pero ahora que los navegadores son compatibles con esta función, solo necesita la versión estandarizada:

radio del borde: 10px 5px;
Chrome ha admitido la propiedad CSS3 desde la versión 5.0, Firefox la agregó en la versión 4.0, Safari la agregó en 5.0, Opera en 10.5, iOS en 4.0 y Android en 2.1. Incluso Internet Explorer 9 lo admite sin un prefijo (y IE 8 e inferior no lo admitían con o sin prefijos).

Recuerde que los navegadores siempre cambiarán y se requerirán enfoques creativos para admitir navegadores más antiguos, a menos que esté planeando construir páginas web que estén años atrás de los métodos más modernos. Al final, escribir prefijos del navegador es mucho más fácil que encontrar y explotar errores que probablemente se solucionarán en una versión futura, lo que requiere que encuentre otro error para explotar, etc.