Čo ešte by mohli dotazovať container queries?

Priznám sa, keď container queries prvýkrát vyšli v roku 2022, vlastne som im nevenoval pozornosť. Chcem povedať, prečo container size queries, keď už máme media queries? Prečo container style queries, keď custom properties aj tak dedia (nefungujú so štandardnými vlastnosťami... zatiaľ)? Ich použitie sa mi zdalo ako okrajové prípady, umožňujúce nám robiť veci, ktoré sme už mohli robiť, ale iným způsobom.

Tu je demo container size queries od Kevina Powella. Pre informáciu, všetky hlavné prehliadače podporujú size queries v nasledujúcom deme, ale ďalšie demá v tomto článku môžu vyžadovať najnovší Chrome.

Demo container style queries (s novou range syntaxou) od, ehm, mňa:

A v poslednej dobe sme videli niekoľko ďalších typov container queries.

Container Scroll-State Queries

Container scroll-state queries prišli so svojimi jedinečnými schopnosťami — možnosťou zistiť, či je kontajner rolovateľný, alebo je scroll-snapped na scroll target, alebo má position: sticky a je 'stuck'. Doslova, ako píšem tento článok, Chrome oznámil podporu pre scrolled, čo je trochu odlišné od scrollable.

Demo container scroll-state queries od nášho vlastného Geoffa Grahama:

A to nie je všetko, co máme...

Anchored container queries

Najnovšia funkcia container query je anchored container queries, ktorá nám umožňuje dotazovať sa na fallback pozície. Predstavte si, že anchor-position tooltip caret na ľavú stranu tooltipu, ale potom nie je miesto na zobrazenie tooltipu, takže ho prevrátite na opačnú stranu toho, čo ho spúšťa, pomocou position-try-fallbacks: flip-inline. Nuž, anchored container query môže zistiť, kedy je pozícia tooltipu prevrátená, takže môžeme tiež prevrátiť tooltip caret na opačnú stranu tooltipu.

Čo ešte?

Takže ma to prinútilo zamyslieť sa, ako ďaleko môžeme skutočne zájsť s container queries? Teraz existujú desiatky media queries, takže čo keby boli aj desiatky container queries? Na čo by sme ich mohli použiť?

Získať akúkoľvek vypočítanú hodnotu

Nedávno som skúmal súčasné a budúce metódy získania hodnoty CSS vlastnosti a jej použitia s inou vlastnosťou, a ako si viete predstaviť, container size queries boli spomenuté, pretože odomykajú container query jednotky. Chcem povedať, pridali ste niekedy wrapper element alebo definovali existujúci ako kontajner len na prístup ku container query jednotkám?

<parent> { /* Dajte mi container query jednotky! */ container-type: inline-size; <child> { width: 100cqi; }
}

Teraz, nemám rád container queries ako prostriedok na získavanie hodnôt, pretože syntax môže byť trochu zdĺhavá na to (dlhšia ako príklad vyššie, a size queries sú obzvlášť trochu zvláštne), ale skutočnosť, že ich môžeme použiť na trochu viac než len dotazovanie, je dôkazom toho, aké sú všestranné ako funkcia. Ako alternatívu som navrhol CSS funkciu nazvanú compute(), kde ak chcete height niečoho (alebo "niečo" čohokoľvek), mohli by sme ju ukradnúť z iného elementu takto:

<parent> { <child> { /* Vypočítaná výška <child> */ property: compute(height, self); /* Vypočítaná výška rodiča */ property: compute(height, inherit); /* Vypočítaná výška #abc elementu */ property: compute(height, #abc); }
}

To by nás ušetrilo od nutnosti implementovať container size query len na použitie jej container query jednotiek a vzťahovalo by sa to aj na všetky vlastnosti. Okrem toho, container size query by nám nepomohla získať nevypočítanú deklarovanú hodnotu, ktorú sme skutočne napísali. Na to bola navrhnutá funkcia inherit() a Roma nám dokonca ukazuje, ako ju použiť v Chrome Canary.

Navyše, veľmi sa mi páči prístup s kľúčovými slovami a rád by som videl viac kľúčových slov ako currentColor (napr. currentBackgroundColor bol navrhnutý).

Aj tak, keby container queries mohli byť rozšírené na získanie hodnoty akejkoľvek CSS vlastnosti, určite by som tomu nepovedal nie! Flexibilita prenášať vlastnosti/hodnoty medzi elementami je príliš lákavá.

Dotazovať akúkoľvek CSS vlastnosť

Táto funkcia je vlastne na programe už od chvíle, keď boli container style queries prvýkrát navrhnuté, ale niet tušenia, kedy príde. Toto vylepšenie container style query nám umožní dotazovať sa na (nevypočítanú/deklarovanú) hodnotu akejkoľvek CSS vlastnosti namiesto len custom properties (hoci nebudete schopní 'získať' a použiť tieto hodnoty, aspoň pokiaľ viem).

Akákoľvek CSS vlastnosť? Ehm, nespôsobuje to, že všetky ostatné container queries sú nadbytočné? Nie celkom, nie.

Container scroll-state queries detegujú snapping a stickiness, pre ktoré neexistujú pseudo-classes — ale možno by mali? Detegujú aj rolovateľnosť, pretože napríklad overflow: scroll a overflow: visible neznamená, že obsah skutočne pretečie, len že môžeme rolovať kontajner, ak to urobí. Nakoniec, anchored container queries nedotazujú hodnotu position-try-fallbacks, detegujú kedy, napríklad, je position-area prevrátená.

Takže, viete, robia kopu vecí, a preto toto vylepšenie pre container style queries ich nenahradí. V skutočnosti celkom vidím desiatky nových container query funkcií prichádzajúcich na web v priebehu nasledujúcich niekoľkých rokov.

Takže čo ešte by mohli container queries robiť?

Ešte predtým, ako container queries boli vecou, boli predkladané skvelé nápady. Samozrejme, niektoré z nich sa skutočne stali container queries, zatiaľ čo iné sú stále len tým — skvelými nápadmi, ktoré nikam nešli (opäť... zatiaľ?).

• Adam Argyle navrhol niekoľko zaujímavých vecí, ktoré sa neskôr stali scroll-state queries, okrem toho, že by sme mohli dotazovať, či je niečo na obrazovke, zalomené, alebo elipsované, čo by som rád videl.
• Adam tiež navrhol možnosť počítať dcérske uzly, nápad, ktorý sa neskôr stal sibling-count() a sibling-index(), hoci by som stále rád videl prístup container query.
• V podobnom duchu Matthew Dean poukázal na to, že niektoré container queries by mohli byť namiesto toho alebo tiež pseudo-classes, s čím súhlasím. Matthew tiež navrhol, že container queries by sa mohli použiť na dotazovanie, či je flex kontajner zabalený, a v ktorom riadku/stĺpci flexbox/grid kontajnera sa nachádzame.

Som presvedčený, že tieto nápady uvidíme realizované v určitom bode, buď ako container queries alebo ako nejakú inú syntax. Sakra, keďže je december, urobím z toho moju predpoveď pre rok 2026: container queries budú vládnuť v roku 2026.

Čo ešte vy chcete, aby container queries robili?

Referencie

• Naučte sa container queries s interaktívnymi príkladmi (Ahmad Shadeed)
• Detegujte fallback pozície s anchored container queries od Chrome 143 (Una Kravets)
• Hrajte sa s Inherit Function (Roma Komarov)
• O dedení a zdieľaní hodnôt vlastností (Daniel Schwarz)
• Podpora prehliadačov pre súčasné a budúce container queries (CanIUse)