Konteinerstiili päringute varased päevad

Oleme konteineripäringutega ikka veel väga algusaegadel. Laialdase brauseri toe jaoks on liiga vara, kuid Chromium juba toetab seda, Safarit alustas selle toetamist versioonis 16, ja Firefox on arvatavasti mitte kaugel maha.

Enamiku algusaegade vestlustes, mis keerlevad konteineripäringute ümber, võrreldakse süntaksit tavaliselt meediumipäringutega.

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

Mõlemad esitavad päringuid min-width: 600. Erinevus seisneb selles, et meediumipäring vaatab stiilimuutuste käivitamiseks vaateava laiust, samal ajal kui konteineri päring vaatab vaateava laiust. .posts element. Armas!

Aga pärast kuulamist CSS-i taskuhäälingusaate 59. jagu, Una ja Adam uurisid konteineripäringute tulevikku: stiilipäringud! CSS-i piiramismooduli 3. taseme spetsifikatsiooni praegune tööprojekt määratleb konteineri stiilis päringud:

A konteineri stiilis päring võimaldab päringuid teha arvutatud väärtused Euroopa päringu konteiner. See on indiviidi Boolean kombinatsioon stiili tunnused (), et iga päring esitaks päringukonteineri ühe konkreetse atribuudi.

Kuid süntaksi kohta pole veel näiteid – ainult lühike kirjeldus:

A süntaks  on sama mis a puhul deklaratsioon, ja selle päring on tõene, kui antud atribuudi arvutatud väärtus päringukonteineris ühtib antud väärtusega (mis arvutatakse ka päringu konteineri suhtes), teadmata, kas atribuut või selle väärtus on kehtetu või seda ei toetata, ja väär muul viisil . Boole'i ​​süntaksi ja loogika ühendamine stiili tunnused sisse stiilipäring on sama mis CSS-i funktsioonide päringud. (Vt @toetab.)

Niisiis, jah, aja jooksul peaksime ootama midagi sellist:

.posts {
  container-name: posts;
}

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

See on päris loll näide. Üks asi, mida tuleb märkida, on see, et container-type ei põhine enam konteineril inline-size vaid poolt style. Võiksime seda käsitleda järgmiselt:

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

…aga kõik konteineripäringud on style päringud vaikimisi. Noh. vähemalt praegusel kujul. Miriam Suzanne'il on tore kirjeldada võimalikke probleeme, mis võivad ilmneda sellega.

Kus võib konteineri stiilide päringute tegemine kasulik olla? Ma ei tea veel! Kuid mu mõtted liiguvad mõnes kohas:

• Kohandatud atribuutide väärtused: Oleme näinud kohandatud atribuute, nagu olekuindikaatorid, nagu Kuivlülitusmeetod Ana käsitles mõnda aega tagasi. Väärtus muutub ja stiilid samuti.
• Alternatiivne tumeda režiimi lähenemisviis: Selle asemel, et võtta aluseks kehaklassi muudatus, mis määrab ümber kohandatud atribuutide väärtused, võib-olla saame muuta tervet värvipaletti, kui näiteks keha taust muudab värvi.
• Keerulisemad päringutingimused: Näiteks tahame stiile rakendada, kui size ja style konteineri tingimused on täidetud.

Una mainis ka CSS-i taskuhäälingus, et konteineri stiilis päringud võivad aidata ära hoida ebamugavaid stiiliolukordi, näiteks kui meil juhtub kaldkirjas tekst juba kursiivis blockquote:

blockquote {
  container-name: quote;
}

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