Design intrinseco: dimensionamento basato sul contenuto

Il design intrinseco, termine coniato da Jen Simmons, consiste nel lasciare che sia il contenuto a determinarne le dimensioni, invece di imporre dimensioni esplicite in pixel. CSS fornisce parole chiave per il dimensionamento intrinseco che rendono i layout naturalmente reattivi, senza modifiche basate sui breakpoint.

min-content: la dimensione minima che contiene il contenuto senza overflow (per il testo, va a capo a ogni confine tra parole). max-content: la dimensione necessaria per visualizzare il contenuto su una sola riga senza andare a capo. Entrambi riflettono le dimensioni effettive del contenuto.

fit-content equivale a min(max-content, max(min-content, available)). Cresce insieme al contenuto fino a raggiungere lo spazio disponibile, poi va a capo. È perfetto per pulsanti ed etichette che devono essere larghi quanto il testo, ma non più del contenitore.

minmax(min, max) in grid-template-columns imposta la dimensione minima e massima di una traccia. minmax(200px, 1fr) crea una colonna larga almeno 200px, che può però espandersi. In combinazione con auto-fill, crea griglie intrinsecamente reattive.

Entrambi riempiono la riga con il maggior numero possibile di tracce. auto-fill mantiene le tracce vuote, preservando il numero di colonne. auto-fit comprime le tracce vuote, così quelle riempite si espandono fino a occupare tutto lo spazio disponibile. Utilizzi auto-fit per layout guidati dal contenuto che devono espandersi fino a riempire la larghezza disponibile.

clamp(min, preferred, max) mantiene un valore entro determinati limiti. font-size: clamp(1rem, 2.5vw, 1.5rem) ridimensiona il testo tra 1rem e 1.5rem in base alla larghezza del viewport: una tipografia fluida senza media query.

grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) crea una griglia reattiva che mostra una sola colonna nei viewport molto stretti e aggiunge automaticamente altre colonne quando lo spazio lo consente. Nessuna media query e nessun JavaScript.

aspect-ratio: 16/9 fa sì che un elemento mantenga le proprie proporzioni quando cambia la sua larghezza. In combinazione con width: 100%, un contenitore video riempie il genitore e mantiene sempre il rapporto 16:9, senza JavaScript né soluzioni basate su padding percentuale.

Il design intrinseco si combina con le proprietà logiche di CSS (inline-size, block-size, margin-inline) per creare layout compatibili sia con i modi di scrittura orizzontali sia con quelli verticali. Il dimensionamento intrinseco si adatta automaticamente alla direzione di scrittura.

Fisso: width: 300px — è sempre largo 300px, indipendentemente dal contenuto. Intrinseco: width: fit-content — è largo quanto il contenuto, entro i vincoli imposti. I layout fissi richiedono breakpoint per adattarsi; quelli intrinseci si adattano autonomamente in base al contenuto e al contesto.

Il design intrinseco è più efficace quando le dimensioni del contenuto variano naturalmente. Imporre il dimensionamento intrinseco quando il contenuto è noto e uniforme aggiunge complessità senza offrire vantaggi. Utilizzi dimensioni esplicite per gli elementi strutturali fissi dell'interfaccia, come la navigazione e la barra degli strumenti; utilizzi il dimensionamento intrinseco per le aree di contenuto.

Che cosa fa auto-fit di diverso rispetto ad auto-fill in grid-template-columns?

Il design intrinseco utilizza le parole chiave CSS per il dimensionamento (min-content, max-content, fit-content), minmax() con auto-fit, clamp() per il ridimensionamento fluido e aspect-ratio per creare layout guidati dalle dimensioni del contenuto invece che dai breakpoint del viewport. Il risultato è costituito da layout naturalmente reattivi, con meno CSS e meno media query.