Tablet přestal být tablet. A s ním i breakpointy podle zařízení

Okno aplikace na iPadu jde na jakoukoli šířku, na kterou ho někdo přetáhne. Ne na jednu ze tří, které předpokládá váš design.

Změnilo se to už s iPadOS 26, kdy Apple nahradil Split View a Slide Over volně měnitelnými okny s ovládáním jako na macOS, přidal lištu menu a použitelný externí monitor. iPadOS 27, který vyšel 14. září, je hlavně o rychlosti a Apple u něj vypichuje zavírání, přepínání a tahání oken při multitaskingu.

Mediální dotaz se ptá na špatnou věc

Rok 2013, iPad má 1 024 bodů na šířku, telefon 320 a notebook 1 280. Napíšete @media (min-width: 768px) a tím říkáte tablet. Funguje to, protože velikost obrazovky tehdy spolehlivě prozradila, o jaké zařízení jde.

Apple na smrti toho předpokladu nemá skoro žádnou zásluhu. Zabíjí ho rozdělená obrazovka ve Windows, Samsung DeX, prohlížeč přetažený do třetiny širokého monitoru, boční panel v Teams, iframe s reportem vloženým do cizí stránky a skládací telefon, o kterém jsme psali v samostatném textu.

Ze šířky obrazovky zbyla jenom šířka.

Komponenty přitom chtějí vědět něco jiného. Kolik místa dostala právě tahle komponenta. Karta produktu v mřížce po čtyřech má 280 bodů i na čtyřicetipalcovém monitoru, tatáž karta v detailu objednávky má 900, a mediální dotaz o tom neví nic, protože se ptá okna.

Kde to bolí nejvíc

Marketingový web to ustojí. Má jeden sloupec textu a pár obrázků.

Bolí to ve firemních systémech, kde se tatáž komponenta objeví na čtyřech místech ve čtyřech šířkách. Tabulka objednávek na celou stránku a tatáž tabulka v bočním panelu. Graf na dashboardu, který se pak vykresluje i do exportovaného reportu. Formulář, co žije na vlastní stránce, dokud ho někdo neotevře v modálním okně.

V takovém systému se mediální dotazy neudrží. Komponenta neví, v jakém kontextu právě je, takže se podle obrazovky rozhodne špatně aspoň na jednom z těch čtyř míst. Odtud pochází většina hlášení ve stylu „tabulka vypadá na tabletu divně“.

Container queries se ptají správně

Místo obrazovky se komponenta zeptá rodiče, kolik dostala místa.

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

Tatáž tabulka teď vypadá správně na celé stránce i v bočním panelu a nikdo nemusel vědět, na čem to běží. Není to novinka na zkoušku. Container queries jsou v prohlížečích jako Baseline od února 2023, tedy tři a půl roku. V květnu 2026 k nim přibyly stylové dotazy, když Firefox 151 doplnil poslední chybějící část, takže komponenta umí reagovat i na hodnotu proměnné nastavené na rodiči.

Co container queries nevyřeší

Navigaci ne, protože hlavní menu se rozhoduje podle celého okna a mediální dotaz je pro něj pořád správný nástroj. Totéž platí pro celkové rozvržení plochy.

Dotykové cíle taky ne. To, že komponenta dostala 900 bodů, neříká vůbec nic o tom, jestli na ni míří kurzor nebo palec, a na tuhle otázku je @media (pointer: coarse).

Čtyři věci, které vám nikdo neřekne dopředu

Kontejner se nemůže ptát sám sebe. Pokud chcete měnit vzhled prvku podle jeho vlastní šířky, musíte kolem něj přidat obal a kontejnerem udělat ten, což v praxi znamená jeden div navíc na každém takovém místě.

Totéž platí pro položku mřížky. Kontejnerem být nemá, jinak se velikosti počítají dokola.

Flexbox umí při špatném nastavení nechat obsah zmizet. Kontejner potřebuje explicitní nebo aspoň vnitřní informaci o velikosti, jinak se sbalí do nuly, stránka vypadá prázdná a celé to působí jako pád aplikace, přestože chybí jediná věc, a to šířka.

A proměnná v podmínce nefunguje. Zápis @container (min-width: var(--tablet)) se tváří platně a tiše se neuplatní.

Kde začít

U tří komponent, které se v systému objevují na víc než jednom místě. Skoro vždycky je mezi nimi tabulka, karta a filtrační panel. Jeden soubor na komponentu, obvykle odpoledne práce.

Proč se to nikdy nerozhodne

Problém je, že mediální dotazy podle zařízení nezpůsobí výpadek. Způsobí pravidelný pramínek hlášení, že něco někde vypadá divně. Každé z nich pak někdo zvlášť odchytí, zreprodukuje a opraví. Za rok je toho víc než ty tři komponenty. Jen se to nikdy neobjeví jako jedna položka v rozpočtu, takže se nikdy nerozhodne a platí se dál po kouskách.

Když v systému děláte úklid tak jako tak, patří to k věcem, které při modernizaci softwaru řešíme mezi prvními. A jestli se to týká i vás, zjistíte za dvě minuty. Vezměte jednu komponentu a vložte ji do poloviční šířky. Co dalšího patří ke slušně postavené stránce, jsme shrnuli v deseti bodech.