Widely available API března 2026 pro web

12 prohlížečových API se staly široce dostupnými v březnu 2026: Co zavést do produkce

V březnu 2026 dosáhlo 12 prohlížečových API statusu široce dostupného – stabilní podpory ve všech hlavních prohlížečích minimálně 2,5 roku. To zjednodušuje rozhodování o implementaci: kontrola caniuse a metrik uživatelů potvrzuje připravenost pro produkci. Zaměření na CSS vlastnosti, HTTP hlavičky a JavaScriptové události pro optimalizaci výkonu, typografie a správy dat.

Seznam klíčových funkcí:

• Clear-Site-Data
• contain-intrinsic-size
• @counter-style
• Události orientace zařízení (Device orientation events)
• hyphenate-character
• hyphens
• image-set()
• <link rel="modulepreload">
• Media query pro overflow
• Správce úložiště (Storage manager)
• Media query pro frekvenci aktualizací (Update frequency media query)
• subgrid

Clear-Site-Data: Úplný reset lokálních dat

HTTP hlavička Clear-Site-Data umožňuje serveru iniciovat vyčištění prohlížečových úložišť: cache, cookies, localStorage, IndexedDB, service workers. Používá se při odhlášení, změně uživatele nebo obnovení po poškozené cache.

Syntaxe a direktivy

Direktivy se uvádějí v dvojitých uvozovkách, oddělují se čárkami:

Clear-Site-Data: "cache"
Clear-Site-Data: "cache", "cookies"
Clear-Site-Data: "*"

Klíčové direktivy:

• "cache" – HTTP cache, bfcache, WebGL shadery.
• "cookies" – cookies a HTTP autentizace podle domény a subdomén.
• "storage" – localStorage, sessionStorage, IndexedDB, service workers.
• "executionContexts" (experimentální) – znovunačtení kontextů.
• "clientHints" (experimentální) – reset Client Hints.
• "prefetchCache", "prerenderCache" (experimentální) – speculation rules.
• "*" – všechny typy dat.

Příklady použití

Odhlášení s úplným vyčištěním:

HTTP/1.1 200 OK
Clear-Site-Data: "cache", "cookies", "storage", "executionContexts", "prefetchCache", "prerenderCache"
Content-Type: text/html

Pouze cookies:

Clear-Site-Data: "cookies"

V produkci hlavička řeší problémy se zbytkovými daty po POST /logout, včetně konfliktů service worker a cacheovaných balíčků. Recovery stránky s "cache", "storage" rychle obnovují stav bez DevTools.

contain-intrinsic-size: Stabilizace layoutu při containment

Vlastnost contain-intrinsic-size nastavuje fallback rozměry pro elementy s contain: size nebo content-visibility: auto. Zabrání reflow při renderování mimo viewport, fixuje výšku/šířku pro scroll.

Syntaxe

contain-intrinsic-size: none;
contain-intrinsic-size: 1000px;
contain-intrinsic-size: 300px 200px;
contain-intrinsic-size: auto 320px;
contain-intrinsic-size: auto 400px auto 250px;
contain-intrinsic-size: auto none;

Hodnoty:

• none – bez náhrady.
• <length> – fixní rozměr.
• auto <length> – zapamatování skutečného rozměru po prvním vykreslení.
• auto none – fallback na none při absenci paměti.

Příklady

Novinový feed:

.feed-item {
  content-visibility: auto;
  contain-intrinsic-size: auto 280px;
}

Karta produktu:

.product-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 360px;
}

Vlastnost eliminuje 'plovoucí' scroll: bez ní neviditelné bloky mají nulovou výšku, což způsobuje přepočet při scrollování. Režim auto optimalizuje po prvním vykreslení.

@counter-style: Vlastní styly seznamů

Pravidlo @counter-style definuje uživatelské styly číslování seznamů pomocí deskriptorů: system, symbols, additive-symbols. Rozšiřuje vestavěné decimal, disc atd.

Syntaxe a deskriptory

@counter-style thumbs {
  system: cyclic;
  symbols: "\1F44D";
  suffix: " ";
}

Hlavní deskriptory:

• system: cyclic, numeric, alphabetic, fixed, additive.
• symbols: řetězce/obrázky pro značky.
• additive-symbols: páry váha-symbol pro římské číslice.
• prefix/suffix: orámování.
• range: povolené hodnoty.
• pad: minimální délka (nulování).
• fallback: záložní styl.

Příklady

Kroužkovaná písmena:

@counter-style circled-alpha {
  system: fixed;
  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
  suffix: " ";
}

.items {
  list-style: circled-alpha;
}

Raketa pro seznamy:

@counter-style rocket {
  system: cyclic;
  symbols: "\1F680";
  suffix: " ";
}

ul.features {
  list-style: rocket;
}

Pro sekce:

@counter-style chapter {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  suffix: ". ";
}

.article h2::before {
  counter-increment: section;
  content: counter(section, chapter);
}

V produkci @counter-style zjednodušuje lokalizaci číslování, minimalizuje JS/backend logiku. Zajistěte fallback a speak-as pro přístupnost.

Události orientace zařízení a ostatní funkce

Události orientace zařízení (Device orientation events) poskytují data o orientaci a zrychlení zařízení přes DOM události. Doplňují seznam: hyphenate-character a hyphens pro dělení slov, image-set() pro responzivní obrázky, <link rel="modulepreload"> pro přednačtení modulů, media queries pro overflow a frekvenci aktualizací pro adaptaci na výkon, Správce úložiště (Storage manager) pro kvóty, subgrid pro mřížky.

Co je důležité

• Široce dostupné – minimálně 2,5 roku stabilní podpory ve všech prohlížečích.
• Před implementací zkontrolujte metriky uživatelů a caniuse.
• Clear-Site-Data je nezbytný pro logout a recovery.
• contain-intrinsic-size stabilizuje scroll s content-visibility.
• @counter-style pro vlastní typografii bez JS.

— Editorial Team