Primi giorni di query sullo stile del contenitore

Siamo ancora ai primi passi con le query sui container. Troppo presto per un ampio supporto del browser, ma Chromium lo supporta già, Safari ha iniziato a supportarlo nella versione 16e Firefox è presumibilmente non molto indietro.

La maggior parte delle conversazioni iniziali che ruotano attorno alle query sui contenitori di solito confrontano la sintassi con le query multimediali.

/* Stacked flex container */
.post {
  display: flex;
  flex-direction: column;
}

/* Change direction when viewport is 600px or wider */
@media(min-width: 600px) {
  .post {
    flex-direction: row;
  }
}

/* Define the container */
.posts {
  container-name: posts;
  container-type: inline-size;
}

.post {
  display: flex;
  flex-direction: column;
}

/* Query the container's min-width */
@container posts (min-width: 600px) {
  /* Change styles when `posts` container is 600px or wider */
  .post {
    flex-direction: row;
  }
}

Entrambi stanno facendo domande per min-width: 600. La differenza è che la query multimediale sta esaminando la larghezza del viewport per attivare tali modifiche di stile mentre la query del contenitore sta esaminando la larghezza calcolata del .posts elemento. Dolce!

Ma dopo aver ascoltato Podcast CSS Episodio 59, Una e Adam hanno preso in considerazione il futuro delle query sui contenitori: query di stile! L'attuale bozza di lavoro del CSS Containment Module Level 3 spec definisce le query in stile contenitore:

A query in stile contenitore consente di interrogare il valori calcolati della contenitore di query. È una combinazione booleana di individuo caratteristiche di stile () che ogni query una singola proprietà specifica del contenitore di query.

Ma ancora nessun esempio sulla sintassi, solo una breve descrizione:

La sintassi di a  è lo stesso di a dichiarazione, e la sua query è vera se il valore calcolato della proprietà specificata nel contenitore della query corrisponde al valore specificato (che è anche calcolato rispetto al contenitore della query), sconosciuto se la proprietà o il suo valore non è valido o non supportato e falso in caso contrario . La sintassi booleana e la combinazione logica caratteristiche di stile in interrogazione di stile è lo stesso di Query sulle funzioni CSS. (Vedi @supporta.)

Quindi, sì, dato il tempo dovremmo aspettarci di realizzare qualcosa del genere:

.posts {
  container-name: posts;
}

@container posts (background-color: #f8a100) {
  /* Change styles when `posts` container has an orange background */
  .post {
    color: #fff;
  }
}

Questo è un esempio piuttosto stupido. Una cosa da notare è che il container-type non è più basato sul contenitore inline-size ma di style. Potremmo delcare che in questo modo:

.posts {
  container-name: posts;
  container-type: style; /* unnecessary */
}

…ma tutte le query del contenitore lo sono style query per impostazione predefinita. Bene. almeno così com'è oggi. Miriam Suzanne ha una bella delineare i possibili problemi che potrebbero sorgere con quello.

Dove potrebbe tornare utile interrogare gli stili di un contenitore? non lo so ancora! Ma la mia mente va in alcuni posti:

• Valori di proprietà personalizzati: Abbiamo visto proprietà personalizzate usate come indicatori di stato, come il Metodo di commutazione a secco Ana ha parlato qualche tempo fa. Il valore cambia, così come gli stili.
• Approccio alternativo alla modalità oscura: Invece di basare tutto su una modifica della classe del corpo che riassegna i valori delle proprietà personalizzate, forse possiamo cambiare un'intera tavolozza dei colori se, ad esempio, lo sfondo del corpo cambia colore.
• Condizioni di query più complesse: Ad esempio, vogliamo applicare gli stili quando il size ed style le condizioni per un contenitore sono soddisfatte.

Una ha anche menzionato nel Podcast CSS che le query sullo stile del contenitore potrebbero aiutare a prevenire alcune situazioni di stile imbarazzanti, come se ci capita di avere il testo in corsivo in un testo già in corsivo blockquote:

blockquote {
  container-name: quote;
}

@container quote (font-style: italic) {
  em, i, q, address {
    font-style: normal;
  }
}