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

Prefijos de proveedores de CSS, también conocidos como o CSS prefijos del navegador, son una forma para que los fabricantes de navegadores agreguen soporte para nuevas funciones de CSS antes de que esas funciones sean totalmente compatibles con todos los navegadores. Esto se puede hacer durante una especie de 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 surgimiento de CSS3 Hace unos pocos años.

Navegador web Firefox
KTSDESIGN / Science Photo Library / Getty Images

Orígenes de los prefijos de proveedores

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 con tecnología Webkit (Safari y Chrome) fueron los primeros en introducir algunas de las propiedades de estilo de animación como transform y transición. Mediante el uso de prefijo de proveedor

instagram viewer
propiedades, los diseñadores web pudieron utilizar esas nuevas funciones en su trabajo y hacer que se vieran en los navegadores que los admitió de inmediato, en lugar de tener que esperar a que todos los demás fabricantes de navegadores capten ¡arriba!

Prefijos comunes

Entonces, desde la perspectiva de un desarrollador web front-end, los prefijos del navegador se utilizan para agregar nuevas funciones CSS en un sitio mientras se siente cómodo sabiendo 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 del navegador CSS que puede utilizar (cada uno de los cuales es específico para un navegador diferente) son:

  • Androide:
    -kit web-
  • Cromo:
    -kit web-
  • Firefox:
    -moz-
  • Explorador de Internet:
    -Sra-
  • iOS:
    -kit web-
  • Ópera:
    -o-
  • Safari:
    -kit web-

Agregar un prefijo

En la mayoría de los casos, para usar una propiedad de estilo CSS completamente nueva, debe tomar la propiedad CSS estándar y agregar el prefijo para cada navegador. Las versiones prefijadas siempre aparecerán primero (en el orden que prefiera), mientras que la propiedad CSS normal aparecerá en último lugar. Por ejemplo, si desea agregar una transición CSS3 a su documento, usaría la propiedad de transición como se muestra a continuación:

-webkit-transición: facilidad de los 4;
-moz-transición: todos los 4 se facilitan;
-ms-transición: facilidad de los 4;
-o-transición: facilidad de los 4;
transición: facilidad de los 4;

Recuerde, algunos navegadores tienen una sintaxis diferente para ciertas propiedades que otros, así que no asuma que la versión con prefijo de navegador de una propiedad es exactamente la misma que la propiedad estándar. Por ejemplo, para crear un degradado CSS, usa la propiedad de degradado lineal. Firefox, Opera y las versiones modernas de Chrome y Safari usan esa propiedad con el prefijo apropiado, mientras que las primeras versiones de Chrome y Safari usan la propiedad prefijada -webkit-gradient.

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

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

Los prefijos de proveedores no son un truco

Cuando se introdujeron por primera vez los prefijos de proveedores, muchos profesionales web se preguntaron si eran un truco o un volver a los días oscuros de bifurcar el código de un sitio web para admitir diferentes navegadores (recuerde que "Este sitio se ve mejor en IE" mensaje). Sin embargo, los prefijos de los proveedores de CSS no son trucos y no debería tener reservas sobre su uso en su trabajo.

Un hack de CSS aprovecha las fallas en la implementación de otro elemento o propiedad para que otra propiedad funcione correctamente. Por ejemplo, el truco del modelo de caja explotó fallas en el análisis de la familia de voces o en la forma en que los navegadores analizan las barras invertidas \. Pero estos trucos se utilizaron para solucionar el problema de la diferencia entre cómo Internet Explorer 5.5 manejaba el modelo de caja y cómo Netscape Lo interpreté, y nada tiene que ver con el estilo familiar de voces. Afortunadamente, estos dos navegadores obsoletos son unos de los que no tenemos que preocuparnos en estos días.

Un prefijo de proveedor no es un truco porque permite que la especificación establezca reglas sobre cómo se puede implementar una propiedad, mientras que al mismo tiempo permite a los fabricantes de navegadores implementar una propiedad de una manera diferente sin romper todo demás. Además, estos prefijos funcionan con propiedades CSS que eventualmente será parte de la especificación. Simplemente estamos agregando un código para tener acceso temprano a la propiedad. 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 la compatibilidad total con el navegador.

¿Quiere saber cuál es la compatibilidad del navegador con una determinada función? 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 resultar 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 un cuadro, 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 totalmente compatibles con esta función, realmente 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 prefijo (e IE 8 y versiones anteriores no lo admitían con o sin prefijos).

Recuerde que los navegadores siempre cambiarán y se necesitarán enfoques creativos para admitir navegadores más antiguos, a menos que esté planeando construyendo paginas web que están años atrás de los métodos más modernos. Al final, escribir prefijos de 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 y así sucesivamente.