Container queries pre komponenty v rôzne širokých paneloch

Tabuľka objednávok má na celej stránke dosť miesta, no v bočnom paneli sa rozpadne. Šírka okna sa pritom nezmenila. Komponent potrebuje reagovať na priestor svojho kontajnera.

Viewport nie je fyzická obrazovka

Mediálny dotaz @media (min-width: 768px) testuje šírku viewportu, nie model zariadenia ani rozlíšenie jeho obrazovky. Pri zmene okna reaguje aj na jeho novú šírku.

Problém vzniká, keď z viewportu odvodíme priestor komponentu. Karta v úzkom paneli a rovnaká karta cez celú stránku majú rozdielne podmienky v tom istom okne. Podobne sa mení dostupný priestor pri multitaskingu alebo na skladacom telefóne.

Veľkosť kontajnera môže riadiť jeho obsah

Container size query vyberá štýl pre potomka podľa rozmeru vhodného nadradeného kontajnera. Príklad nastaví panel a podľa jeho šírky zmení zobrazenie tabuľky.

.panel {
  container-type: inline-size;
  container-name: panel;
}

@container panel (min-width: 40rem) {
  .order-table { display: table; }
}

@container panel (max-width: 40rem) {
  .order-table { display: block; }
}

Je to ukážka rozhodovania o rozložení, nie hotová prístupná tabuľka. V reálnom komponente overte hlavičky, čítanie dát a ovládanie aj pri úzkom zobrazení.

Grid ani flex kontajnery nevylučujú

Kontajnerom pre potomkov môže byť aj položka gridu alebo flexu. Dôležité je, ako dostane svoju veľkosť. container-type: inline-size mení výpočet vnútorného rozmeru, takže pri obsahu určujúcom šírku treba skontrolovať rozloženie. Neznamená to všeobecný zákaz grid položiek ani povinnosť doplniť každému kontajneru pevnú šírku.

Prvok si pomocou vlastnej size query nemení štýl podľa seba. Vyberá sa vhodný predok. Niekedy preto pomôže existujúci rodič a inokedy nový obal.

Podporu size queries overujte oddelene od style queries a ďalších novších možností. Zápis v pracovnom návrhu CSS ešte nie je dôkaz podpory vo všetkých Vašich prehliadačoch. To platí aj pre použitie premenných v podmienkach.

Mediálne dotazy zostávajú užitočné

Celkové rozloženie stránky alebo navigácia môžu stále reagovať na viewport. Vlastnosti vstupného zariadenia posudzujte zvlášť, napríklad cez pointer. Samotná šírka nepotvrdzuje, či človek používa myš alebo dotyk. Tlač potrebuje vlastné pravidlá.

Začnite jedným opakovane použitým komponentom

Vložte ho do celej stránky aj úzkeho panelu. Skúste zmenu šírky, dlhší obsah a zväčšenie textu. Potom rozhodnite, ktoré pravidlo patrí viewportu a ktoré kontajneru.

Rozsah práce závisí od štruktúry a testov komponentu. Pri modernizácii softvéru ho určte až po tomto pokuse. Ďalšie vlastnosti použiteľného webu rozoberáme v desiatich bodoch.