Autoprefijo Sass

Al tratar con CSS, sin duda nos encontramos con prefijos de proveedores. A pesar de que su uso está tan extendido, todavía hay cierta incertidumbre sobre cuándo deben utilizarse e incluso por qué deben utilizarse. En este post, respondo –

Por ejemplo, cuando se introdujeron por primera vez los fondos degradados, los distintos navegadores requerían una sintaxis diferente para implementar el mismo efecto. Para crear un simple efecto de degradado de negro a blanco, teníamos que escribir –

Para permitir esta implementación diferente entre navegadores durante la fase de pruebas, se introdujo la política de prefijación de proveedores en CSS2.1. Cada motor de navegación tiene su propio prefijo, que, combinado con el nombre de la propiedad, actúa esencialmente como su propia propiedad. Cada navegador sólo reconoce las propiedades con su propio prefijo e ignora las demás.

Hacemos esto para aprovechar la naturaleza de cascada de CSS. Los navegadores utilizarán la última versión declarada de una propiedad que puedan entender. Al poner la versión no prefijada en último lugar, nos aseguramos de que, cuando los navegadores acaben soportando la propiedad oficial, esa será la que utilicen.

Prefijo menos css

Las nuevas características de CSS3 son una bendición para los desarrolladores web: con unas pocas líneas de código podemos hacer cosas que eran casi imposibles hace unos años. Pero estas características también son un verdadero dolor para nosotros: tenemos que escribir la misma propiedad muchas veces para diferentes navegadores.

Después de que el resolvedor de CSS averigüe el nombre de una propiedad que debe ser emitida, buscará su ocurrencia en catálogos especiales de proveedores. Estos catálogos se definen como entradas css.{vendor}Properties en las preferencias y pueden ser anuladas por el usuario. {vendor} es el prefijo del navegador, por ejemplo, webkit, moz, etc.

Por ejemplo, la propiedad border-radius está definida en css.webkitProperties y css.mozProperties por lo que esta propiedad se mostrará con los prefijos webkit y moz. Por otro lado, la propiedad foo no está definida en ninguna parte, por lo que se mostrará con todos los prefijos disponibles cuando se expanda la abreviatura -foo: webkit, moz, ms y o. Es especialmente útil para utilizar propiedades CSS de última generación que se han implementado recientemente.

Al escribir archivos CSS, puedes encontrar que una propiedad CSS3 “clara” es inútil sin sus variantes prefijadas por el proveedor. Esto hace que escribir abreviaturas con guiones como -trf (trf es un alias de la propiedad transform) sea un poco incómodo.

Css webkit vs moz

El proceso de introducción de nuevas propiedades CSS y elementos HTML puede ser largo y enrevesado. A veces los cambios son propuestos por comités de estándares (como el W3C) y otras veces los proveedores de navegadores crean sus propias propiedades.

Una propiedad creada por el W3C no funciona realmente hasta que los proveedores de navegadores la implementan en las nuevas versiones de sus navegadores. Además, a veces hay desacuerdos sobre cómo debe implementarse un estándar. Otras veces, un proveedor de navegadores crea una nueva propiedad que luego se convierte en un estándar, pero con una sintaxis ligeramente diferente. Y lo que es peor, si los usuarios finales nunca actualizan sus navegadores, ninguna de las nuevas características funciona.

Los proveedores de navegadores necesitaban una forma de añadir soporte para las nuevas características que aún no estaban estandarizadas, pero sin estropear los cambios posteriores o crear incompatibilidades. Para resolver este problema se crearon los prefijos de proveedor. Un prefijo de proveedor es un prefijo especial que se añade a una propiedad CSS. Cada motor de renderizado tiene su propio prefijo que sólo aplicará la propiedad a ese navegador en particular.

Autoprefixor

Deja de escribir manualmente los prefijos de proveedor de CSS29 de abril de 2021cssguidesLos principales proveedores de navegadores implementan las características de CSS a su propio ritmo, y han estado utilizando prefijos de proveedor para añadir propiedades CSS experimentales o no estándar. A continuación se presenta una lista de los principales prefijos:

Si todavía estás escribiendo prefijos de proveedor, entonces deberías considerar la configuración de prefijos automáticos porque el prefijo de proveedor manual no se adapta bien. Es doloroso, tedioso y propenso a errores para los ojos humanos llevar la cuenta de qué propiedades necesitan ser prefijadas para qué versiones del navegador.

Las consultas de características asocian un bloque de sentencias con una condición de compatibilidad. La condición de soporte consiste en uno o más pares nombre-valor combinados por conjunciones (and), disyunciones (or), y/o negaciones (not). La precedencia de los operadores puede definirse con paréntesis.

Considere que la prefijación del proveedor es algo que no puede eliminarse por completo, incluso cuando se utilizan consultas de características, debido al temor de que se pierdan las características no comprobadas. Con el auge de los procesadores CSS (pre|post), el prefijo de proveedor puede hacerse automáticamente. Para que esta solución funcione, necesitarás las siguientes herramientas: