Widely available API marca 2026 dla webu

12 API przeglądarek stały się powszechnie dostępne w marcu 2026: co wdrażać do produkcji

W marcu 2026 roku 12 API przeglądarek osiągnęło status widely available — stabilnego wsparcia we wszystkich głównych przeglądarkach przez co najmniej 2,5 roku. Ułatwia to podejmowanie decyzji o wdrożeniu: sprawdzenie caniuse i metryk użytkowników potwierdza gotowość do produkcji. Skupiamy się na właściwościach CSS, nagłówkach HTTP i zdarzeniach JavaScript do optymalizacji wydajności, typografii i zarządzania danymi.

Lista kluczowych funkcji:

• Clear-Site-Data
• contain-intrinsic-size
• @counter-style
• Device orientation events
• hyphenate-character
• hyphens
• image-set()
• <link rel="modulepreload">
• Overflow media queries
• Storage manager
• Update frequency media query
• subgrid

Clear-Site-Data: pełny reset danych lokalnych

Nagłówek HTTP Clear-Site-Data pozwala serwerowi zainicjować czyszczenie magazynów przeglądarki: pamięci podręcznej, ciasteczek, localStorage, IndexedDB, service workers. Stosowany przy wylogowaniu, zmianie użytkownika lub odzyskiwaniu po uszkodzonej pamięci podręcznej.

Składnia i dyrektywy

Dyrektywy podaje się w podwójnych cudzysłowach, oddzielone przecinkami:

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

Kluczowe dyrektywy:

• "cache" — pamięć podręczna HTTP, bfcache, shadery WebGL.
• "cookies" — ciasteczka i uwierzytelnianie HTTP dla domeny i subdomen.
• "storage" — localStorage, sessionStorage, IndexedDB, service workers.
• "executionContexts" (eksperymentalnie) — przeładowanie kontekstów.
• "clientHints" (eksperymentalnie) — reset Client Hints.
• "prefetchCache", "prerenderCache" (eksperymentalnie) — speculation rules.
• "*" — wszystkie typy danych.

Przykłady użycia

Wylogowanie z pełnym czyszczeniem:

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

Tylko ciasteczka:

Clear-Site-Data: "cookies"

W produkcji nagłówek rozwiązuje problemy pozostałych danych po POST /logout, w tym konflikty service worker i buforowanych paczek. Strony odzyskiwania z "cache", "storage" szybko przywracają stan bez DevTools.

contain-intrinsic-size: stabilizacja układu przy containment

Właściwość contain-intrinsic-size ustawia rozmiary zastępcze dla elementów z contain: size lub content-visibility: auto. Zapobiega reflow przy renderowaniu poza viewport, ustalając wysokość/szerokość dla przewijania.

Składnia

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;

Wartości:

• none — bez podstawienia.
• <length> — stały rozmiar.
• auto <length> — zapamiętywanie rzeczywistego rozmiaru po pierwszym renderowaniu.
• auto none — zastępcze none przy braku pamięci.

Przykłady

Kanał wiadomości:

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

Karta produktu:

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

Właściwość eliminuje 'pływające' przewijanie: bez niej niewidoczne bloki dają zerową wysokość, powodując przeliczenie przy przewijaniu. Tryb auto optymalizuje po pierwszym renderowaniu.

@counter-style: niestandardowe style list

Reguła @counter-style definiuje niestandardowe style numeracji list przez deskryptory: system, symbols, additive-symbols. Rozszerza wbudowane decimal, disc itp.

Składnia i deskryptory

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

Główne deskryptory:

• system: cyclic, numeric, alphabetic, fixed, additive.
• symbols: ciągi/obrazy dla znaczników.
• additive-symbols: pary waga-symbol dla cyfr rzymskich.
• prefix/suffix: obramowanie.
• range: dopuszczalne wartości.
• pad: minimalna długość (uzupełnianie zerami).
• fallback: styl zapasowy.

Przykłady

Otoczone litery:

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

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

Rakieta dla list:

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

ul.features {
  list-style: rocket;
}

Dla sekcji:

@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);
}

W produkcji @counter-style upraszcza lokalizację numeracji, minimalizując logikę JS/backend. Zapewnij fallback i speak-as dla dostępności.

Device orientation events i pozostałe funkcje

Device orientation events dostarczają dane o orientacji i przyspieszeniu urządzenia przez zdarzenia DOM. Uzupełniają listę: hyphenate-character i hyphens dla przenoszenia, image-set() dla responsywnych obrazów, <link rel="modulepreload"> dla wstępnego ładowania modułów, overflow/update frequency media queries dla adaptacji do wydajności, Storage manager dla kwot, subgrid dla siatek.

Co jest ważne

• Widely available — co najmniej 2,5 roku stabilnego wsparcia we wszystkich przeglądarkach.
• Sprawdzaj metryki użytkowników i caniuse przed wdrożeniem.
• Clear-Site-Data obowiązkowy dla logout i odzyskiwania.
• contain-intrinsic-size stabilizuje przewijanie z content-visibility.
• @counter-style dla niestandardowej typografii bez JS.

— Editorial Team