Cousas molonas de CSS

Brendan Eich, o homófobo creador de JavaScript, acuñou en 2011 a icónica frase Always bet on JavaScript, para indicar que esta linguaxe vai prevalecer sobre calquera outra tecnoloxía. A razón non é que sexa unha linguaxe especialmente boa, senón que se converteu nun estándar Web soportado por todos os navegadores. Isto fai que sexa imposible substituílo por outra cousa ou introducir cambios que sexan incompatibles co funcionamento actual, xa que acabarían rompendo toda a Web. Calquera outra tecnoloxía que pretenda substituír a JavaScript acabará desaparecendo, e senón lembrade como acabou Flash.

O mesmo pasa con outras tecnoloxías web como HTML ou CSS, por iso tamén ten sentido o Always bet on HTML ou, como dixo Zach Leatherman cando soubemos que Tailwind (o framekwork anti-CSS) tiña problemas económicos que podían poñer en perigo a súa sustentabilidade: Always bet on CSS.

Esa é a razón pola que introducir cousas novas en HTML, CSS ou JavaScript é un proceso tan lento. Calquera nova funcionalidade ten que estar ben pensada porque vai estar aí para sempre, non vai desaparecer (ou esa é a promesa). Incluso antigas etiquetas HTML como <marquee>, que forma parte dos inicio da web e leva 30 anos estando deprecada e o seu uso desaconsellado, seguen sendo soportadas a día de hoxe polos navegadores:

Ola, este é un texto en movemento usando a etiqueta Marquee. Vou ir o inferno!

Tendo en conta a cantidade de novidades de CSS que estan aparecendo nos últimos anos, pregúntome se será sustentable a longo prazo manter todo isto. Penso que nalgún momento habería que frear un pouco, sobre todo porque a maioría das propostas están sendo impulsadas de xeito individual por Chrome/Google, e moitas delas nin sequera estan ben pensadas.

En The Web We Want teñen un formulario para que calquera poida enviar ideas para mellorar a Web. O ano pasado enviei unha suxestión (que se pode ver no GitHub pero non aparece publicada na web, polo que entendo que non foi aceptada 🤷) onde pedía frear un pouco e ter un par de anos de tregua onde non se propuxeran novas funcionalidades, senón simplemente dedicarse a correxir e mellorar o que hai, eliminar bugs e aumentar a interoperabilidade.

A lista

Dito isto, recoñezo que hai algunhas funcionalidades introducidas recentemente en CSS coas que estou especialmente entusiasmado, asi que supoño que fixeron ben en non facerlle caso á miña petición 😅. Fixen esta lista ordeada por preferencia:

1. Anchor positioning: Finalmente xa soportado por todos os navegadores, permite posicionar un elemento de xeito relativo a outro. Isto resulta moi práctico para popovers ou tooltips e elimina unha grande cantidade de JavaScript.

   button {
     anchor-name: --anchor;
   }
   
   .tooltip {
     position: fixed;
     position-anchor: --anchor;
     left: anchor(right);
     align-self: anchor-center;
   }
   

2. Grid lanes: anteriormente coñecido como «Masonry», permite layouts onde os elementos se distribúen en diferentes pistas (ou lanes) pero seguindo unha orde que depende do tamaño e posición de cada elemento. As noticias da portada na web da DAG teñen esa distribución pero usando JavaScript. Estou agardando impaciente a que estea soportado en todos os navegadores para usalo na nova web da DAG (na que estou traballando xunto a Rubén Prol) 😱.

   .novas {
     display: grid-lanes;
     grid-template-columns: repeat(auto-fill, 300px);
     gap: 16px;
   }
   

3. @scope: Unha nova forma de definir estilos específicos para un determinado «scope». Ten algunhas vantaxes sobre a forma tradicional e permite Donut scopes. Xa está soportado en todos os navegadores pero non tiven aínda a oportunidade de probalo.

   @scope (.contedor) to (.contido) {
     .titulo {}
     .pe {}
   }
   

4. text-wrap: pretty: Evita bloques de texto con palabras orfas, o que resulta moi útil para que o texto se vexa ben a calquera ancho. Existe o text-wrap: balance que o uso moito para títulos (neste mesmo blog por exemplo) pero non serve para o mesmo.
5. interpolate-size: Permite animar valores que antes non se podían animar como height: auto para desplegables.
6. text-box-trim Permite recortar o espazo superior e inferior do texto, o que resulta moi útil para aliñar elementos ou aplicar paddings visualmente correctos.
7. Scroll state queries: Para seleccionar elementos segundo o seu estado de scroll. Isto permite poder aplicar un estilo a un elemento con position: sticky pero só cando o elemento está en estado stuck.

   header {
     position: sticky;
     top: 0;
     container-type: scroll-state;
     container-name: titular;
   }
   
   @container titular scroll-state(stuck: top) {
     h1 {
       background: #cccccc;
       box-shadow: 0 5px 2px #00000033;
     }
   }
   

8. CSS scroll-driven animations: Recoñezo que visualmente é unha das funcionalidades máis potentes, pero tampouco estou demasiado ansioso por usalo, por iso está tan abaixo nesta lista. Non son moi fan desas webs tipo parallax onde todo se move co scroll. Pero lembro ver algún outro caso de uso máis interesante.

   div {
     animation-name: xil-rios;
     animation-timeline: scroll();
   }
   
   @keyframes xil-rios {
     from {
       transform: rotate(0deg);
     }
     to {
       transform: rotate(360deg);
     }
   }
   

---

Desculpade se hai erros ortográficos. Parece que o ILG eliminou o corrector ortográfico que estaba usando. Don't always bet on Galego.