A konténerstílusú lekérdezések korai napjai

Még mindig nagyon korai szakaszban vagyunk a konténerlekérdezések terén. Túl korai a böngésző széles körű támogatásához, de a Chromium már támogatja azt, a Safarit elkezdte támogatni a 16-os verzióban, a Firefox pedig feltehetően nem sokkal lemaradva.

A legtöbb korai időszakban a konténerlekérdezések körül forgó beszélgetések általában összehasonlítják a szintaxist a médialekérdezésekkel.

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

Mindkettő lekérdezést tesz a következőhöz min-width: 600. A különbség az, hogy a médialekérdezés a nézetablak szélességét nézi, hogy kiváltsa ezeket a stílusmódosításokat, míg a tárolólekérdezés a .posts elem. Édes!

De miután meghallgatta CSS Podcast, 59. epizód, Una és Adam a konténerlekérdezések jövőjével foglalkozott: stílus lekérdezések! A CSS Containment Module Level 3 specifikáció jelenlegi munkatervezete konténerstílusú lekérdezéseket határoz meg:

A konténer stílusú lekérdezés lehetővé teszi a lekérdezést számított értékeket az lekérdezési tároló. Ez az egyed logikai kombinációja stílusjegyei (), hogy mindegyik a lekérdezéstároló egyetlen, meghatározott tulajdonságát kérdezze le.

De még nincs példa a szintaxisra – csak egy rövid leírás:

A szintaxis a  ugyanaz, mint a nyilatkozat, és a lekérdezése igaz, ha az adott tulajdonság számított értéke a lekérdezési tárolón megegyezik az adott értékkel (amely szintén a lekérdezési tárolóhoz képest kerül kiszámításra), ismeretlen, ha a tulajdonság vagy annak értéke érvénytelen vagy nem támogatott, egyébként hamis . A logikai szintaxis és a logika kombinációja stílusjegyei egy stílus lekérdezés ugyanaz, mint a CSS funkció lekérdezések. (Lát @támogatja.)

Tehát igen, adott idő alatt valami ilyesmire számíthatunk:

.posts {
  container-name: posts;
}

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

Ez egy elég buta példa. Egy dolgot meg kell jegyezni, hogy a container-type már nem a konténeren alapul inline-size hanem által style. Ezt így kezelhetnénk:

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

…de minden konténerlekérdezés style alapértelmezés szerint lekérdezi. Jól. legalábbis a mai állapot szerint. Miriam Suzanne-nak kedvessége van felvázolja az esetlegesen felmerülő problémákat azzal.

Hol lehet hasznos egy tároló stílusának lekérdezése? még nem tudom! De néhány helyen jár a fejem:

• Egyéni tulajdonságértékek: Láttunk olyan egyéni tulajdonságokat, mint az állapotjelzők, mint például a SZÁRAZ kapcsolási módszer Ana foglalkozott egy ideje. Az érték változik, és a stílusok is.
• Alternatív sötét mód megközelítés: Ahelyett, hogy az egészet egy törzsosztály-módosításra alapoznánk, amely újra hozzárendeli az egyéni tulajdonságértékeket, talán egy teljes színpalettát is megváltoztathatunk, ha mondjuk a törzs háttér színe megváltozik.
• Bonyolultabb lekérdezési feltételek: Például stílusokat szeretnénk alkalmazni, amikor a size és a style a konténer feltételei teljesülnek.

Una azt is megemlítette a CSS Podcastban, hogy a konténerstílusú lekérdezések segíthetnek megelőzni néhány kellemetlen stílushelyzetet, például ha történetesen dőlt betűs szöveget kapunk egy már dőlt betűs szövegben. blockquote:

blockquote {
  container-name: quote;
}

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