Tablet prestal byť tablet. A s ním aj breakpointy podľa zariadení

iPadOS 27 vyšiel 14. septembra. Apple pri ňom hovorí hlavne o rýchlosti, konkrétne o zatváraní, prepínaní a ťahaní okien počas multitaskingu.

Pre Váš systém z toho vyplýva jedna vec. Okno aplikácie na iPade si človek potiahne na akúkoľvek šírku, akú chce. Nie na jednu z troch, ktoré predpokladá Váš dizajn.

Samotná zmena prišla už s iPadOS 26. Apple vtedy nahradil Split View a Slide Over voľne meniteľnými oknami s ovládaním ako na macOS, pridal lištu menu a prácu na externom monitore. Tablet tým prestal byť zariadením s jednou známou šírkou.

Mediálny dotaz sa pýta na nesprávnu vec

Rok 2013, iPad má 1 024 bodov na šírku, telefón 320 a notebook 1 280. Napíšete @media (min-width: 768px) a tým poviete tablet. Funguje to, lebo veľkosť obrazovky vtedy spoľahlivo prezradila, o aké zariadenie ide.

Ten predpoklad je dnes mŕtvy a nemá to nič spoločné s Apple. Rovnakú vec robí rozdelená obrazovka na Windows, Samsung DeX, prehliadač potiahnutý do tretiny širokého monitora, bočný panel v Teamse, iframe s reportom vloženým do cudzej stránky a skladací telefón, o ktorom sme písali v samostatnom texte.

Šírka obrazovky prestala byť informáciou o tom, kto sa pozerá a čím. Zostala z nej iba šírka.

Komponenty pritom potrebujú vedieť niečo iné. Koľko miesta dostal práve tento komponent. Karta produktu v mriežke po štyroch má 280 bodov aj na štyridsaťpalcovom monitore, tá istá karta v detaile objednávky má 900, a mediálny dotaz o tom nevie nič, pretože sa pýta okna.

Kde to bolí najviac

Marketingový web to ustojí. Má jeden stĺpec textu a pár obrázkov.

Bolí to vo firemných systémoch, kde sa ten istý komponent objaví na štyroch miestach v štyroch šírkach. Tabuľka objednávok na celú stránku a tá istá tabuľka v bočnom paneli. Graf na dashboarde, ktorý sa potom vykresľuje aj do exportovaného reportu. Formulár, čo žije na vlastnej stránke, kým ho niekto neotvorí v modálnom okne.

V takom systéme sa mediálne dotazy nedajú udržať. Komponent nevie, v akom kontexte práve je, takže sa podľa obrazovky rozhodne zle aspoň v jednom z tých štyroch miest. Odtiaľ pochádza väčšina hlásení v štýle „tabuľka vyzerá na tablete divne“.

Container queries sa pýtajú správne

Namiesto obrazovky sa komponent opýta rodiča, koľko dostal miesta.

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

Tá istá tabuľka teraz vyzerá správne na celej stránke aj v bočnom paneli a nikto nemusel vedieť, na čom to beží.

Nie je to novinka na skúšku. Container queries sú v prehliadačoch ako Baseline od februára 2023, čiže tri a pol roka. V máji 2026 k nim pribudli štýlové dotazy, keď Firefox 151 doplnil poslednú chýbajúcu časť, takže komponent vie reagovať aj na hodnotu premennej nastavenej na rodičovi.

Čo container queries nevyriešia

Navigáciu nie. Hlavné menu sa rozhoduje podľa celého okna a mediálny dotaz je preň stále správny nástroj, rovnako ako pre celkové rozvrhnutie plochy.

Dotykové ciele sú samostatná otázka. To, že komponent dostal 900 bodov, nehovorí vôbec nič o tom, či naň mieri kurzor alebo palec, a odpovedá na to @media (pointer: coarse). Pri otvorenej skladačke je to dôležitejšie než šírka.

Pri tlači rozhoduje papier a kontajner o ňom nevie.

Štyri veci, ktoré Vám nikto nepovie dopredu

Kontajner sa nemôže pýtať sám seba. Ak chcete meniť vzhľad prvku podľa jeho vlastnej šírky, musíte okolo neho pridať obal a kontajnerom urobiť ten, čo v praxi znamená jeden div navyše na každom takom mieste.

To isté platí pre položku mriežky. Kontajnerom byť nemá, inak sa veľkosti počítajú v kruhu.

Flexbox vie pri nesprávnom nastavení nechať obsah zmiznúť. Kontajner potrebuje explicitnú alebo aspoň vnútornú informáciu o veľkosti, inak sa zbalí do nuly, stránka vyzerá prázdna a celé to pôsobí ako pád aplikácie. Pritom chýba jediná vec, a to šírka.

A premenná v podmienke nefunguje. Zápis @container (min-width: var(--tablet)) sa tvári platne a ticho sa neuplatní.

Kde začať a čo to stojí

Nie je to prepis systému. Je to zmena v jednom súbore na komponent a zvyčajne popoludnie práce.

Začnite tromi, ktoré sa v systéme objavujú na viac ako jednom mieste. Skoro vždy je medzi nimi tabuľka, karta a filtračný panel. Prerobte ich a ostatné nechajte tak, ako sú.

Prečo sa to nikdy nerozhodne

Mediálne dotazy podľa zariadení nespôsobia výpadok. Spôsobia prúd hlásení v štýle „na tablete to vyzerá divne“. Každé z nich potom niekto zvlášť odchytí, zreprodukuje a opraví.

Za rok je to viac práce než prerobiť tri komponenty. Len sa to nikdy neobjaví ako jedna položka v rozpočte, takže sa nikdy nerozhodne a platí sa ďalej po kúskoch.

Ak v systéme robíte upratovanie tak či tak, patrí to k veciam, ktoré pri modernizácii softvéru riešime medzi prvými. A či sa to týka aj Vás, zistíte za dve minúty. Zoberte jeden komponent a vložte ho do polovičnej šírky. Čo ešte patrí k slušne postavenej stránke, sme zhrnuli v desiatich bodoch.