Le query sui contenitori e :has() sono un'accoppiata perfetta per la reattività. Fortunatamente, entrambe le funzionalità saranno disponibili in Chromium 105. Si tratta di un'enorme versione con due funzionalità molto richieste per le interfacce reattive.
Query sui contenitori: un breve riepilogo
Le query container consentono agli sviluppatori di eseguire query su un selettore padre per ottenere informazioni sulle dimensioni e sugli stili, consentendo a un elemento secondario di possedere la logica di stile reattiva, indipendentemente da dove si trova su una pagina web.
Invece di fare affidamento sull'area visibile per l'input degli stili, come lo spazio disponibile, ora gli sviluppatori possono eseguire query anche sulle dimensioni degli elementi in-page. Questa funzionalità indica che un componente possiede la propria logica di stile adattabile. In questo modo il componente risulta molto più resiliente, in quanto viene applicata la logica di stile, indipendentemente da dove viene visualizzato sulla pagina.
Utilizzo delle query dei contenitori
Per creare query container, devi prima impostare il contenimento su un elemento principale. Per farlo, imposta un container-type sul contenitore principale. Potresti avere una scheda con un'immagine e del testo simile alla seguente:
Per creare una query contenitore, imposta container-type sul contenitore delle schede:
.card-container {
container-type: inline-size;
}
L'impostazione di container-type su inline-size esegue una query sulla dimensione della direzione in linea del contenitore principale. Nelle lingue latine come l'inglese, si tratta della larghezza della scheda, poiché il testo scorre in linea da sinistra a destra.
Ora possiamo utilizzare questo contenitore per applicare stili a qualsiasi elemento secondario utilizzando @container:
.card {
display: grid;
grid-template-columns: 1fr 1fr;
}
@container (max-width: 400px) {
.card {
grid-template-columns: 1fr;
}
}
Il selettore principale :has()
La pseudo-classe CSS :has() consente agli sviluppatori di verificare se un elemento principale contiene elementi secondari con parametri specifici.
Ad esempio, p:has(span) indica un selettore di paragrafo (p) contenente un span. Puoi utilizzarla per applicare uno stile al paragrafo principale o a qualsiasi elemento al suo interno. Un esempio utile è figure:has(figcaption) per applicare uno stile a un elemento figure contenente una didascalia. Puoi scoprire di più su :has() in questo articolo di Jhey Tompkins.
Query dei contenitori e :has()
Puoi combinare le funzionalità di selezione dei gruppi di :has() con le funzionalità di query dei gruppi di query dei contenitori per creare stili intrinseci davvero dinamici.
Analizziamo più in dettaglio il primo esempio con la scheda del razzo. E se avessi una carta senza immagine? Magari vuoi aumentare la dimensione del titolo e regolare il layout della griglia su colonna singola, in modo che appaia più intenzionale senza l'immagine.
In questo esempio, la scheda con un'immagine ha un modello di griglia a due colonne, mentre la scheda senza immagine ha un layout a una colonna. Inoltre, la scheda senza immagine ha un'intestazione più grande. Per scrivere questo testo utilizzando :has(), utilizza il seguente CSS.
.card:has(.visual) {
grid-template-columns: 1fr 1fr;
}
Stai cercando un elemento con una classe visual per applicare lo stile a due colonne indicato sopra. Un'altra interessante funzione CSS è :not(). Fa parte della stessa specifica di :has(), ma è disponibile da molto più tempo e ha un supporto migliore per i browser. Puoi anche combinare :has() e :not(), in questo modo:
.card:not(:has(.visual)) h1 {
font-size: 4rem;
}
Nel codice riportato sopra, stai scrivendo un selettore che applica uno stile a un h1 all'interno di una scheda che non contiene una classe visual. In questo modo puoi regolare molto chiaramente le dimensioni dei caratteri.
Riassumendo
La demo sopra riportata mostra una combinazione di :has(), :not() e @container, ma le query sui contenitori sono davvero efficaci quando puoi vedere lo stesso elemento utilizzato in più punti. Aggiungiamo un tocco di stile e mostriamo queste schede in una griglia una accanto all'altra.
Ora puoi davvero vedere la potenza del CSS moderno. Siamo in grado di scrivere stili chiari utilizzando stili mirati che costruiscono la logica sulla logica e creano componenti davvero solidi. Con queste due potenti funzionalità che approdano su Chromium 105 e che stanno guadagnando lo slancio del supporto tra browser, è un momento entusiasmante per essere sviluppatori di UI.