Container queries pro komponenty v různě širokých panelech

Tabulka objednávek se vejde na celou stránku, ale v bočním panelu se rozpadne. Šířka okna zůstala stejná. Komponenta potřebuje reagovat na prostor svého kontejneru.

Viewport není fyzická obrazovka

@media (min-width: 768px) testuje šířku viewportu. Neurčuje model zařízení ani rozlišení obrazovky. Při změně okna reaguje na jeho novou šířku.

Potíž vzniká, když z viewportu odvozujeme prostor komponenty. Karta v úzkém panelu má jiné podmínky než stejná karta přes celou stránku. Další situace přidává multitasking nebo skládací telefon.

Kontejner může řídit rozložení potomků

Container size query vybírá styl pro potomka podle rozměrů vhodného předka. Ukázka nastaví panel a podle jeho šířky změní zobrazení tabulky.

.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;
  }
}

Jde o ukázku volby rozložení, nikoli hotovou přístupnou tabulku. V reálné komponentě ověřte hlavičky, čtení dat a ovládání i v úzké variantě.

Grid ani flex nejsou překážkou

Také položka gridu či flexu může být kontejnerem pro své potomky. Rozhoduje způsob určení její velikosti. container-type: inline-size mění výpočet vnitřního rozměru, takže je třeba prověřit rozložení závislé na obsahu. Nejde o obecný zákaz grid položek ani povinnost nastavit každému kontejneru pevnou šířku.

Size query vybírá vhodného předka. Prvek si podle vlastní velikosti nemění sám sebe. Někdy proto stačí současný rodič a jindy se hodí obal.

Podporu size queries posuzujte odděleně od style queries a novějších funkcí. Pracovní návrh CSS není důkazem podpory ve všech cílových prohlížečích. Totéž platí pro proměnné v podmínkách.

Mediální dotazy mají dál své místo

Navigace a rozložení celé stránky mohou reagovat na viewport. Vlastnosti vstupního zařízení řešte zvlášť, například přes pointer. Šířka nepotvrzuje, zda člověk používá myš nebo dotyk. Tisk potřebuje vlastní pravidla.

Začněte jednou opakovaně použitou komponentou

Vložte ji na celou stránku i do úzkého panelu. Vyzkoušejte změnu šířky, delší obsah a zvětšení textu. Potom rozdělte pravidla mezi viewport a kontejner.

Rozsah práce závisí na struktuře a testech komponenty. Při modernizaci softwaru ho určete po pokusu, ne odhadem jednoho odpoledne. Další souvislosti shrnuje deset bodů použitelného webu.