Poznaj ciekawe funkcje, które w maju 2026 roku pojawiły się w stabilnych i beta wersjach przeglądarek.
Opublikowano: 29 maja 2026 r.
Stabilne wersje przeglądarki
W maju w wersji stabilnej pojawiły się przeglądarki Chrome 148, Firefox 151 i Safari 26.5. W tym poście przyjrzymy się wielu nowym funkcjom, które pojawiły się w tym miesiącu.
Pseudoklasa CSS :open staje się bazową
Safari 26.5 to przede wszystkim wersja zawierająca poprawki istniejących funkcji.
Obsługuje ona jednak również :openpseudoklasę, dzięki czemu ta funkcja jest dostępna w ramach nowo dostępnych funkcji podstawowych.
Klasa pseudo :open umożliwia określanie stylu elementów, które mają stany „otwarty” i „zamknięty”, gdy są otwarte. Dotyczy to elementów takich jak <details> i <dialog>, gdy są otwarte, a także elementów <select> i <input> (np. selektorów kolorów lub dat), gdy wyświetlają się ich interfejsy. Zapewnia to bardziej przejrzystą, semantyczną alternatywę dla stylizacji za pomocą atrybutów takich jak details[open].
Zapytania o kontener CSS oparte tylko na nazwie stają się podstawowe
W tym miesiącu wprowadzamy Chrome 148, w którym zapytania dotyczące kontenerów zawierających tylko nazwy są teraz dostępne w ramach nowej linii bazowej.
Wcześniej podczas pisania zapytania o kontener trzeba było podać warunek zapytania o rozmiar lub styl wraz z nazwą kontenera i określić typ kontenera za pomocą właściwości container-type. Teraz możesz wysyłać zapytania o obecność nazwanego kontenera tylko na podstawie jego nazwy, bez żadnych dodatkowych warunków. Ponadto nie musisz już ustawiać container-type na elemencie nadrzędnym, jeśli wysyłasz zapytanie tylko według nazwy:
#container {
container-name: --sidebar;
}
@container --sidebar {
.content {
padding: 2rem;
}
}
Browser Support
Zapytania o style kontenerów dotyczące właściwości niestandardowych stają się podstawowe
Firefox 151 wprowadza obsługę zapytań style() w @container, dzięki czemu zapytania o style kontenerów dotyczące właściwości niestandardowych są nowo dostępne w ramach Baseline.
Zapytania o styl kontenera umożliwiają stosowanie stylów do elementów na podstawie właściwości CSS kontenera nadrzędnego. Zapytania o rozmiar są bardzo przydatne, ale zapytania o styl umożliwiają wysyłanie zapytań o funkcje inne niż rozmiar. Ta wersja zapewnia pełną obsługę zapytań dotyczących właściwości niestandardowych we wszystkich przeglądarkach. Możesz na przykład sprawdzić, czy w kontenerze nadrzędnym wartość właściwości niestandardowej --theme jest ustawiona na dark:
@container style(--theme: dark) {
.card {
background-color: #1a1a1a;
color: #fff;
}
}
Browser Support
Leniwe ładowanie elementów wideo i audio
Chrome 148 wprowadza natywne leniwe wczytywanie elementów <video> i <audio> z atrybutem loading="lazy".
Podobnie jak w przypadku elementów <img> i <iframe> możesz teraz nakazać przeglądarce opóźnienie wczytywania zasobów multimedialnych do momentu, gdy znajdą się blisko obszaru widocznego. Pomaga to zwiększyć wydajność wczytywania strony, zaoszczędzić przepustowość i zmniejszyć zużycie danych przez użytkowników. Więcej informacji znajdziesz w artykule How To Use Standard HTML Video and Audio Lazy-Loading on the Web Today (Jak dziś używać standardowego HTML-owego leniwego ładowania filmów i dźwięku w internecie) napisanym przez zespół, który wdrożył tę funkcję.
Interfejs Document Picture-in-Picture API
W Firefoxie 151 wprowadziliśmy obsługę interfejsu Document Picture-in-Picture API na platformach stacjonarnych.
W przeciwieństwie do standardowego interfejsu Picture-in-Picture API, który umożliwia wyświetlanie <video>elementu w oknie zawsze na wierzchu, interfejs Document Picture-in-Picture API pozwala otwierać okno zawsze na wierzchu zawierające dowolną treść HTML. Umożliwia to wyświetlanie bogatych interaktywnych nakładek, takich jak siatki uczestników rozmowy wideo, interaktywne kursy akcji czy timery, które pozostają widoczne nawet po opuszczeniu strony.
Rozszerzenie obsługi platform w interfejsie Web Serial API
Firefox 151 dodaje obsługę Web Serial API na platformach desktopowych, a Chrome 148 dodaje obsługę tej funkcji na Androidzie.
Interfejs Web Serial API umożliwia witrynom odczytywanie danych z urządzeń szeregowych i zapisywanie ich na tych urządzeniach, np. na mikrokontrolerach, drukarkach 3D, płytach deweloperskich i sprzęcie peryferyjnym. W Firefoxie korzystanie z interfejsu Web Serial API wymaga zainstalowania przez użytkowników syntetycznie wygenerowanego dodatku z uprawnieniem witryny, co zapewnia bezpieczny i kontrolowany mechanizm zarządzania dostępem.
Wersje beta przeglądarki
Wersje beta przeglądarki umożliwiają podgląd funkcji, które pojawią się w następnej wersji stabilnej przeglądarki. To świetny moment na przetestowanie nowych funkcji lub usunięcie tych, które mogą mieć wpływ na Twoją witrynę, zanim zostaną one udostępnione wszystkim użytkownikom. Nowe wersje beta w tym miesiącu to Chrome 149 i Firefox 152. W tym miesiącu nie ma wersji beta Safari.
Wersja beta Chrome 149 zawiera ciekawe aktualizacje CSS, takie jak dekoracje przerw CSS, które umożliwiają stylizowanie białych znaków (przerw) między elementami flex i grid. Obsługuje też path() i shape(), a także rect() i xywh() jako podstawowe funkcje kształtu we właściwości shape-outside oraz path-length jako właściwość CSS. Po stronie interfejsu API programowe metody przewijania, takie jak scrollTo(), scrollBy() i scrollIntoView(), zwracają teraz obietnice, które są spełniane po zakończeniu płynnego przewijania. Strony z aktywnymi połączeniami WebSocket mogą teraz kwalifikować się do korzystania z pamięci podręcznej do obsługi przycisków Wstecz i Dalej (BFCache).
W wersji beta przeglądarki Firefox 152 wprowadzono pełną obsługę właściwości field-sizing, która umożliwia automatyczne dostosowywanie rozmiaru elementów sterujących formularza do ich zawartości.
Dodaje też właściwości actions i maxActions do interfejsu Notification oraz obsługę options.pseudoElement w Element.getAnimations().