Webová platforma v marci 2026. Čo použiť v projekte

Karta produktu môže byť v úzkom paneli aj v hlavnom katalógu. CSS preto niekedy potrebuje poznať kontajner, nie šírku celého okna. Marcový prehľad web.dev uvádza podporu name-only @container vo Firefoxe 149 a Safari 26.4. Ide o konkrétnu časť container queries, nie o ich prvé uvedenie.

Tento článok zachytáva marcové vydania. Pred použitím v novom projekte overte aktuálnu podporu a prehliadače Vašich návštevníkov.

Pomenovaný kontajner nepotrebuje podmienku veľkosti

Name-only query sa pýta iba na prítomnosť kontajnera s daným názvom. Je vhodná, keď sa vzhľad komponentu má meniť podľa miesta použitia bez merania jeho šírky.

.catalogue {
  container-name: product-list;
}

@container product-list {
  .card {
    border-radius: 0.5rem;
  }
}

Ukážka neobsahuje šírkovú podmienku. Ak sa má karta pri určitej šírke zmeniť z riadka na stĺpec, potrebujete size query a vhodný container-type, napríklad inline-size. Samotné meno veľkosť nemeria.

Pri responzívnom webe preto vyberajte query podľa otázky. Viewport rieši okno, size query rozmer kontajnera a name-only query pomenovaný kontext.

Scroll-triggered a scroll-driven nie sú to isté

Chrome 146 priniesol scroll-triggered animácie. Posunutie cez zvolenú hranicu môže spustiť, pozastaviť alebo resetovať časovú animáciu. Dokumentácia Chrome používa timeline-trigger a animation-trigger.

Kód s animation-timeline: view() robí niečo iné. Je to scroll-driven animácia, ktorej priebeh závisí od polohy posunu. Nie je dôkazom podpory nových triggerov.

V produkcii použite detekciu podpory a ponechajte obsah čitateľný aj bez efektu. Rešpektujte prefers-reduced-motion. Menší JavaScript balík môže byť prínos, no plynulosť závisí od animovaných vlastností a konkrétneho zariadenia. CSS samo negarantuje compositor ani lepší výkon.

Grid lanes potrebuje náhradné rozloženie

Safari 26.4 pridal display: grid-lanes pre masonry rozloženie. Marcový stav podpory preto nemožno zameniť za podporu vo všetkých prehliadačoch.

Galéria má zostať použiteľná aj bez tejto hodnoty. Najprv navrhnite bežný grid a až potom podmienené masonry. Skontrolujte poradie obsahu pri čítaní a ovládaní klávesnicou, nielen výsledný obrázok.

Ďalšie novinky majú odlišný účel

Podľa marcového prehľadu Safari 26.4 doplnil min(), max() a clamp() v atribúte sizes. Pomáhajú vyjadriť veľkosť responzívneho obrázka. Nie sú príkazom na stiahnutie konkrétneho súboru bez ohľadu na srcset.

Firefox 149 pridal CloseWatcher pre vlastné komponenty zatvárané mechanizmom zariadenia, napríklad Esc alebo Android Back. Aplikácia musí spracovať príslušné udalosti, API samo neopraví každý existujúci modal.

Hodnota popover="hint" vo Firefoxe 149 necháva otvorený auto popover, ale zatvára iné hint popovery. trigger-scope v Chrome 146 má iný účel. Ohraničuje viditeľnosť názvov animačných triggerov, neslúži na párovanie popoverov.

Prehľad uvádza aj Iterator.concat() v Chrome 146 a Safari 26.4. Umožňuje postupne prechádzať viaceré iterátory bez ich predchádzajúceho zlučovania do poľa. Výber funkcie však stále patrí k podporovanému runtime projektu.

Pri úprave webu začnite konkrétnym komponentom a jeho náhradným správaním. Ďalšie súvislosti nájdete pri prvkoch kvalitného webu. Ak potrebujete určiť, kde CSS môže nahradiť existujúci JavaScript, posúdime konkrétne rozhranie.