Primele zile ale interogărilor privind stilul containerului

Suntem încă în primele zile cu interogări privind containerele. Prea devreme pentru suport larg pentru browser, dar Chromium îl acceptă deja, Safari a început să îl susțină în versiunea 16, iar Firefox este probabil nu departe în urmă.

Majoritatea conversațiilor din primele zile care se învârte în jurul interogărilor containerului compară de obicei sintaxa cu interogările media.

/* 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;
  }
}

Ambele fac interogări pentru min-width: 600. Diferența este că interogarea media se uită la lățimea ferestrei de vizualizare pentru a declanșa acele modificări de stil, în timp ce interogarea container se uită la lățimea calculată a .posts element. Dulce!

Dar după ce a ascultat Podcast CSS Episodul 59, Una și Adam au analizat viitorul interogărilor de containere: interogări de stil! Actuala versiune de lucru a specificației CSS Containment Module Level 3 definește interogări în stilul containerului:

A interogare stil container permite interogarea valorile calculate a container de interogări. Este o combinație booleană de individ caracteristici ale stilului () că fiecare interogare o singură proprietate specifică a containerului de interogări.

Dar încă nu există exemple despre sintaxă - doar o scurtă descriere:

Sintaxa lui a  este la fel ca pentru a declaraţie, iar interogarea sa este adevărată dacă valoarea calculată a proprietății date pe containerul de interogări se potrivește cu valoarea dată (care este calculată și în raport cu containerul de interogări), necunoscut dacă proprietatea sau valoarea acesteia este nevalidă sau neacceptată și false în caz contrar . Sintaxa booleană și combinarea logicii caracteristici ale stilului într-o interogare de stil este la fel ca pentru Interogări de caracteristici CSS. (Vedea @sprijină.)

Deci, da, având în vedere timpul, ar trebui să ne așteptăm să reușim ceva de genul acesta:

.posts {
  container-name: posts;
}

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

Acesta este un exemplu destul de prost. Un lucru de remarcat este că container-type nu se mai bazează pe cel al containerului inline-size ci de style. Am putea să ne descurcăm așa:

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

…dar toate interogările containerului sunt style interogări în mod implicit. Bine. cel puțin așa cum este astăzi. Miriam Suzanne are un frumos schiță a posibilelor probleme care ar putea apărea cu ce.

Unde ar putea fi utilă interogarea stilurilor unui container? Nu știu încă! Dar mintea mea merge în câteva locuri:

• Valori personalizate ale proprietăților: Am văzut proprietăți personalizate folosite ca indicatori de stare, cum ar fi Metoda de comutare DRY Ana a acoperit-o cu ceva vreme în urmă. Valoarea se schimbă, la fel și stilurile.
• Abordare alternativă în modul întunecat: În loc să ne bazăm totul pe o modificare a clasei corpului care reatribuie valorile proprietăților personalizate, poate putem schimba o întreagă paletă de culori dacă, de exemplu, fundalul corpului își schimbă culoarea.
• Condiții de interogare mai complexe: De exemplu, vrem să aplicăm stiluri atunci când size și style sunt îndeplinite condițiile pentru un container.

Una a menționat, de asemenea, în Podcast-ul CSS că interogările de stil de container ar putea ajuta la prevenirea unor situații de stil incomode, cum ar fi dacă se întâmplă să avem text cu italic într-un text deja italic. blockquote:

blockquote {
  container-name: quote;
}

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