Mientras no mirabas, los degradados CSS mejoraron

Una cosa que me llamó la atención en la lista de características del polyfill de Lea Verou conic-gradient()fue el último elemento:

Admite sintaxis de doble posición (dos posiciones para el mismo color de parada, como acceso directo para dos paradas de color consecutivas con el mismo color)

Sorprendentemente, recientemente descubrí que la mayoría de las personas ni siquiera son conscientes de que la posición doble para las paradas de gradiente es algo que realmente existe en la determinación, así que decidió escribir sobre ello.

Según la especificación:

Especificar dos ubicaciones facilita la creación de “rayas” de colores sólidos en un degradado, sin tener que repetir el color dos veces.

Estoy completamente de acuerdo, esto fue lo primero que pensé cuando me di cuenta de esta característica.

Digamos que queremos obtener el siguiente resultado: un degradado con un montón de franjas verticales de igual ancho (que tomé de una publicación anterior de Chris):

Los valores hexadecimales son : #5461c8, #c724b1, #e4002b, #ff6900, #f6be00, #97d700y #00ab84.#00a3e0

¡Primero veamos cómo aplicaríamos CSS a esto sin usar posiciones de doble parada!

Tenemos ocho franjas, lo que hace que cada una de ellas sea un octavo del ancho del degradado. Un octavo de 100%es 12.5%, por lo que pasó de uno al siguiente en múltiplos de este valor.

Esto significa que nuestro linear-gradient()aspecto es el siguiente:

linear-gradient(90deg,              #5461c8 12.5% /* 1*12.5% */,   #c724b1 0, #c724b1 25%   /* 2*12.5% */,   #e4002b 0, #e4002b 37.5% /* 3*12.5% */,   #ff6900 0, #ff6900 50%   /* 4*12.5% */,   #f6be00 0, #f6be00 62.5% /* 5*12.5% */,   #97d700 0, #97d700 75%   /* 6*12.5% */,   #00ab84 0, #00ab84 87.5% /* 7*12.5% */,   #00a3e0 0)

Tenga en cuenta que no necesitamos repetir %los valores de la posición de parada porque, siempre que una posición de parada es más pequeña que la anterior, automáticamente tenemos una transición brusca. Es por eso que siempre es seguro usarlo 0(que siempre será menor que cualquier valor positivo) y tenerlo #c724b1 25%, #e4002b 0en lugar de #c724b1 25%, #e4002b 25%, por ejemplo. Esto es algo que puede hacernos la vida más fácil en el futuro si, por ejemplo, decidimos que queremos añadir dos franjas más y hacer que las posiciones de parada sean múltiples 10%.

No está tan mal, especialmente en comparación con lo que normalmente escupen los generadores de gradiente. Pero si decidimos que una de esas franjas en el medio no encaja del todo con los demás, entonces cambiarla por otra cosa significa actualizar en dos lugares.

Nuevamente, no está tan mal y es nada que no podamos solucionar con un poco de ayuda de un preprocesador:

$c: #5461c8 #c724b1 #e4002b #ff6900 #f6be00 #97d700 #00ab84 #00a3e0;@function get-stops($c-list) {  $s-list: ();  $n: length($c-list);  $u: 100%/$n;  @for $i from 1 to $n {    $s-list: $s-list,              nth($c-list, $i) $i*$u,              nth($c-list, $i + 1) 0  }  @return $s-list}.strip {  background: linear-gradient(90deg, get-stops($c)))}

Esto genera el gradiente CSS exacto que vimos antes y ahora ya no tenemos que modificar nada en dos lugares.

Sin embargo, incluso si un preprocesador puede evitar que escribamos lo mismo dos veces, no elimina la repetición del código generado.

Y es posible que no siempre queramos utilizar un preprocesador. Dejando de lado el hecho de que algunas personas son testarudas o tienen un miedo u odio irracional hacia los preprocesadores, a veces parece un poco tonto usar un bucle.

Por ejemplo, ¡cuando apenas tenemos nada que recorrer! Digamos que queremos obtener un backgroundpatrón mucho más simple, como uno de hashes diagonales, que me imagino que es un caso de uso mucho más común que un patrón de arco iris exagerado que, de todos los modos, probablemente no sea una buena opción en la mayoría. de los sitios web.

Esto requiere uso repeating-linear-gradient()y esto significa un poco de repetición, incluso si no tenemos la misma lista larga de valores hexadecimales que teníamos antes:

repeating-linear-gradient(-45deg,     #ccc /* can't skip this, repeating gradient won't work */,     #ccc 2px,     transparent 0,     transparent 9px /* can't skip this either, tells where gradient repetition starts */)

Aquí, no podemos deshacernos de la primera y la última parada porque son precisamente las que indican cómo se repite el gradiente dentro del rectángulo definido por background-size.

Si quieres entender por qué es mejor usarlo repeating-linear-gradient()en lugar de un simple linear-gradient()combinado con el adecuado background-sizepara crear dichos hashes, consulta este otro artículo que escribí hace un tiempo.

Aquí es precisamente donde esta característica viene al rescate: nos permite evitar repeticiones en el código CSS final.

Para el caso de las rayas del arcoíris, nuestro CSS se convierte en:

linear-gradient(90deg,     #5461c8 12.5%,     #c724b1 0 25%,     #e4002b 0 37.5%,     #ff6900 0 50%,     #f6be00 0 62.5%,     #97d700 0 75%,     #00ab84 0 87.5%,     #00a3e0 0)

Y para recrear los hashes, sólo necesitamos:

repeating-linear-gradient(-45deg,     #ccc 0 2px,     transparent 0 9px)

¿Qué pasa con el apoyo? Bueno, ¡me alegra que hayas preguntado! ¡En realidad resulta bastante bueno! Funciona en los navegadores Safari, Chromium (¡que ahora también incluye Edge!) y Firefox. La versión anterior a Chromium Edge y tal vez algunos navegadores móviles aún podrían frenarlo, pero si no tiene que preocuparse por brindar soporte para todos los navegadores existentes o está bien brindar un respaldo, ¡adelante y comience a usar esto!