Style Queries v CSS: zeptejte se na styl prvku

Sotva jsme na svět praktického CSS přivítali výborné Container Queries, přichází další novinka. CSS Style Queries umožňují ptát se v na vypočtené hodnoty CSS vlastností a podle toho změnit styl elementu.

Podobně jako Container Queries, Style Queries jsou v současné době ve fázi návrhu a ještě není jasné, jak se bude jejich implementace a podpora v prohlížečích vyvíjet.

Container i Style Queries vycházejí ze specifikace CSS Containment Module Level 3, která je ovšem v definici Style Queries zatím trochu skoupá.

Jisté je, že jednu část dotazů na styl právě teď implementovali autoři Chrome. Proto o téhle novince také píšu.

Příklad

Zkusme si to popsat na možná ne úplně praktickém, ale o to více jednoduchém příkladu:

.box {
  background: lightgray;
}

@container style(font-weight: bold) {
  .box {
    background: gray;
  }
}

Výsledkem je, že element s třídou .box bude mít šedou barvu pozadí. Ale to jen v případě, že je vlastnost font-weight nastavena na tučné, tedy bold.

Co byste o Style Queries měli vědět?

V úvodním odstavci jsem zmiňoval vypočtené hodnoty CSS vlastnosti. To je důležité a taky odlišné od Container nebo Media Queries:

• Dotazem @container (min-width: 420px) se ptáte na vykreslovanou velikost.
• Dotazem @container style(min-width: 420px) se ptáte na vypočtenou hodnotu.

Není to to samé, protože do vypočtené hodnoty promítá také dědičnost nebo další vlastnosti kaskády v CSS, což činí Style Queries ještě zajímavějšími.

Syntaxe a logika kombinování prvků do dotazu na styl je stejná jako u dotazů na podporu vlastností CSS, viz @supports.

Dále platí, že Style Queries teoreticky vznikají při základním typu containmentu v CSS, takže nebudete muset definovat container-type, jako to děláte u Container Queries.

Podpora a aktuální implementace v Chrome

O možné podpoře ze strany Firefoxu a Safari se mi nic moc zjistit nepodařilo. Šance na brzkou implementaci není malá, protože prohlížeče se snaží domlouvat a tedy lze předpokládat, že i dotazy na styly patří do dohodnotých priorit.

V době psaní tohoto textu lidé z Googlu oznámili, že Style Queries přistanou do Chrome 111.

Dobrou zprávou je, že implementaci uvidíme rovnou v produkčním prohlížeči, nikoliv jen Canary verzi.

Horší zprávou je, že implementace se zaměřuje jen na určitou část Style Queries, a to dotazy na hodnoty autorských vlastností neboli proměnných.

Příklad s autorskými vlastnostmi

Toto je jediná ukázka, která mi aktuálně v prohlížeči funguje.

Řekněme, že se snažím o stylování boxů podle hodnoty custom property --theme. Řekněme, že to dělám tímto způsobem právě proto, že bych rád využil dědičnosti v CSS a autorskou vlastnost --theme chci měnit na různých místech kódu.

HTML vypadá takto:

<div class="container" style="--theme: normal">
  <div class="box">
    <p>Lorem ipsum…</p>
  </div>
</div>

<div class="container" style="--theme: colorful">
  <div class="box">
    <p>Lorem ipsum…</p>
  </div>
</div>

Důležitá část CSS je pak tahle:

@container style(--theme: colorful) {
  .box {
    background: #f2f0ec;
    border: 1px solid red;
  }
}

Omluvte jednoduchost ukázky, snažím se tady totiž hlavně ukázat, jak to funguje. A že to funguje. Stačí si otevřít aktuální Chrome Canary nebo běžný Chrome od verze 111.

K čemu to může být dobré? Nestačí pro tyhle účely prostě přidat třídu a je to? Ano, někdy by to šlo vyřešit třídou, ale znovu připomínám, že trik je v dotazu na vypočtenou hodnotu vlastnosti. A ta může být změněná v rámci CSS kaskády libovolným způsobem.

Další příklady a další zdroje

Tenhle text berte jako úvodní výkop. V jeho dalších iteracích to popíšu podrobněji, ale raději si počkám na další rozvoj specifikace a podpory v prohlížečích. Jsme prostě zase na začátku a asi bychom měli být spíše opatrní.

Pro inspiraci přidávám asi nejzajímavější text o Style Queries od Uny Kravets. Jsou tam velmi zajímavé ukázky praktického využití dotazů na styl:

• Přenos nedědičných vlastností (jako border) na potomka.
• Seskupování vlastností pro určitý stav do jednoho místa.
• Interaktivní změna vzhledu pomocí Style Queries.
• Kombinování více dotazů na styl.

Myslím, že Style Queries budou dalším střípkem do mozaiky snadnějších řešení některých specifických situací. Těším se na další vývoj. Co vy?

Napište mi svůj názor do komentářů.

(Ano, na Vzhůru dolů jsou teď už zase komentáře.)