Le query container e :has() sono una corrispondenza perfetta in un ambiente reattivo. Fortunatamente, entrambe queste funzionalità sono disponibili contemporaneamente in Chromium 105. Si tratta di un'importante versione con due funzionalità molto richieste per le interfacce reattive.
Query container: un breve riepilogo
Le query container consentono agli sviluppatori di eseguire query su un selettore principale 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.
Anziché affidarsi all'area visibile per definire gli input, ad esempio lo spazio disponibile, ora gli sviluppatori hanno la possibilità di eseguire query anche sulla dimensione degli elementi in-page. Questa funzionalità indica che un componente è proprietario della 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 container
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 alcuni contenuti di testo simili ai seguenti:
Per creare una query sul contenitore, imposta container-type nel contenitore della scheda:
.card-container {
container-type: inline-size;
}
Se il criterio container-type viene impostato su inline-size, viene eseguita la query sulle dimensioni della direzione in linea dell'elemento padre. Nelle lingue latine come l'inglese, questa è la larghezza della scheda, poiché il testo scorre in linea da sinistra a destra.
Ora possiamo usare quel contenitore per applicare stili a uno dei relativi elementi secondari utilizzando @container:
.card {
display: grid;
grid-template-columns: 1fr 1fr;
}
@container (max-width: 400px) {
.card {
grid-template-columns: 1fr;
}
}
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 che contiene una didascalia. Puoi scoprire di più su :has() in questo articolo di Jhey Tompkins.
Query container e :has()
Puoi combinare le capacità di selezione degli elementi principali di :has() con quelle delle query container per creare alcuni stili intrinseci davvero dinamici.
Approfondiamo 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 l'immagine ha un layout a colonna singola. Inoltre, la scheda senza immagine ha un'intestazione più grande. Per scrivere usando :has(), usa 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 sopra indicato. Un'altra funzione CSS molto utile è :not(). Questa versione fa parte delle stesse specifiche di :has(), ma esiste da molto più tempo e ha un supporto del browser migliore. 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 lo 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 riportata sopra mostra una combinazione di :has(), :not() e @container, ma le query container sono davvero eccellenti quando puoi vedere lo stesso elemento utilizzato in più posizioni. Aggiungiamo un tocco di stile e mostriamo queste schede in una griglia una accanto all'altra.
Ora puoi vedere davvero la potenza del CSS moderno. Siamo in grado di scrivere stili chiari utilizzando stili mirati che costruiscono la logica sulla base della 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.