Le query container e :has() sono una corrispondenza creata in un paradiso adattabile. Fortunatamente, entrambe le funzionalità saranno disponibili in Chromium 105. Si tratta di una grande release con due funzioni molto richieste per le interfacce reattive.
Query container: breve riepilogo
Le query container consentono agli sviluppatori di eseguire query su un selettore padre per conoscere le sue dimensioni e le informazioni di stile, consentendo a un elemento figlio di possedere la propria logica di stile adattabile, indipendentemente da dove si trova su una pagina web.
Anziché fare affidamento sull'area visibile per definire l'input, ad esempio lo spazio disponibile, ora gli sviluppatori hanno la possibilità di eseguire query anche sulle dimensioni degli elementi in-page. Questa funzionalità indica che la logica di stile reattiva a un componente è di proprietà. Ciò rende il componente molto più resiliente, in quanto la logica di stile è associata al componente, indipendentemente da dove viene visualizzato nella pagina.
Utilizzo delle query container
Per creare con le query contenitore, devi prima impostare il contenimento su un elemento principale. Per farlo, imposta un valore container-type sul contenitore principale. Potresti avere una scheda con un'immagine e alcuni contenuti testuali simili ai seguenti:
Per creare una query contenitore, imposta container-type sul contenitore di schede:
.card-container {
container-type: inline-size;
}
L'impostazione di container-type su inline-size esegue la query sulla dimensione delle indicazioni in linea dell'elemento padre. Nelle lingue latine, come l'inglese, corrisponde alla larghezza della scheda, poiché il testo scorre in linea da sinistra a destra.
Ora possiamo utilizzare quel contenitore per applicare stili a tutti i suoi elementi figlio 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) che contiene un span all'interno. Puoi utilizzare questa opzione 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 container e :has()
Puoi combinare le opzioni di selezione padre di :has() con quelle di query padre delle query container per creare alcuni stili intrinseci davvero dinamici.
Espandiamo il primo esempio con la scheda spaziale. E se avessi una scheda senza immagine? Ad esempio, potresti voler aumentare le dimensioni del titolo e impostare il layout della griglia su colonna singola per renderlo 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 l'immagine ha un'intestazione più grande. Per scrivere questo messaggio utilizzando :has(), usa il seguente CSS.
.card:has(.visual) {
grid-template-columns: 1fr 1fr;
}
Stai cercando un elemento con classe visual a cui applicare lo stile a due colonne riportato sopra. Un'altra funzione CSS molto utile è :not(). Fa parte delle stesse specifiche di :has(), ma è in uso da molto più tempo e ha un supporto migliore del browser. Puoi anche combinare :has() e :not() in questo modo:
.card:not(:has(.visual)) h1 {
font-size: 4rem;
}
Nel codice precedente, stai scrivendo un selettore che definisce uno stile h1 all'interno di una scheda che non contiene una classe visual. In questo modo puoi regolare molto chiaramente le dimensioni dei caratteri.
Riepilogo
La demo precedente mostra una combinazione di :has(), :not() e @container, ma le query relative ai container sono efficaci quando puoi vedere lo stesso elemento utilizzato in più punti. Aggiungi un tocco di stile e mostra queste schede in una griglia una accanto all'altra.
Ora puoi vedere davvero la potenza del moderno CSS. 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 arrivano in Chromium 105 e che stanno conquistando lo slancio del supporto tra browser, è un momento così entusiasmante per essere uno sviluppatore di UI.