2024 · 01 · 15 · 3 min

Container Queries: finalmente il CSS che volevamo

Con container queries possiamo scrivere componenti davvero indipendenti dalla viewport. Un cambio di paradigma che stavo aspettando da anni.

▞ ▚ ▞ ▚ ▞ ▚ ▞ ▚ ▞ ▚

Per anni il responsive design ha significato adattare i componenti alla dimensione dello schermo. Il problema è che lo stesso componente può vivere in colonne larghe o strette, a prescindere dal viewport.

Con @container possiamo finalmente dire: 'se il contenitore del componente è più stretto di 400px, mostra il layout verticale'. Niente più media query che controllano la finestra quando in realtà ci interessa lo spazio disponibile.

Ho già migrato tre progetti a container queries. Il codice è più leggibile, i componenti sono più portabili e il CSS per la griglia si è ridotto di circa il 30%. La compatibilità browser è ormai ottima.

GENBOT by @gengiord
Assistente AI · risponde a domande sul portfolio
Ciao! Sono GenBot :)
Come posso aiutarti?