Nowości na platformie internetowej w czerwcu

Poznaj ciekawe funkcje, które w czerwcu 2026 r. pojawiły się w stabilnych i beta wersjach przeglądarek internetowych.

Rachel Andrew

Opublikowano: 30 czerwca 2026 r.

Stabilne wersje przeglądarki

W czerwcu wydano stabilne wersje Chrome 149, Chrome 150 i Firefox 152. W tym miesiącu nie było stabilnej wersji Safari. W tym poście przyjrzymy się nowym funkcjom, które pojawią się w przeglądarkach internetowych.

Określanie rozmiaru elementów sterujących formularza za pomocą field-sizing staje się punktem odniesienia

Firefox 152 wprowadza obsługę właściwości CSS field-sizing, dzięki czemu automatyczne określanie rozmiaru elementów sterujących formularza jest dostępne w przypadku wszystkich głównych silników przeglądarek.

Właściwość field-sizing umożliwia dynamiczne zmniejszanie lub powiększanie elementów sterujących formularza, takich jak <textarea>, <input> i <select>, tak aby dopasować je do treści (field-sizing: content), zamiast pozostawiać je w stałym rozmiarze domyślnym (field-sizing: fixed). Eliminuje to konieczność stosowania obejść w JavaScript podczas tworzenia pól tekstowych lub obszarów tekstowych, które zmieniają rozmiar w miarę pisania przez użytkowników.

textarea {
  field-sizing: content;
}

Podstawowe kształty rect() i xywh() w shape-outside stają się wartością odniesienia.

W Chrome 149 wprowadziliśmy obsługę funkcji kształtu rect() i xywh() w shape-outside, dzięki czemu te podstawowe kształty są teraz dostępne w większości przeglądarek.

Funkcje rect() i xywh() umożliwiają definiowanie prostokątnych obszarów wykluczenia elementów pływających za pomocą dokładnych współrzędnych wstawienia lub składni pochodzenia i wymiarów. Zapewnia to prostszą i bardziej czytelną składnię niż używanie polygon() w przypadku prostokątnych kształtów otaczających zmiennoprzecinkowe elementy pływające.

Automatyczne skalowanie czcionek za pomocą CSS text-fit

W Chrome 150 wprowadziliśmy text-fitwłaściwość CSStext-fit, która umożliwia deweloperom automatyczne skalowanie rozmiarów czcionek w celu dopasowania ich do szerokości kontenera.

.headline {
  text-fit: grow;
}

Dekoracje przerw CSS

W Chrome 149 wprowadziliśmy obsługę dekoracji odstępów CSS w układach siatki i flexbox. Dekoracje przerw umożliwiają dodawanie linii i stylów bezpośrednio do odstępów między elementami siatki i elementami flex, podobnie jak w przypadku column-rule w układach wielokolumnowych.

.grid-container {
  display: grid;
  gap: 20px;
  column-rule: 2px solid red;
  row-rule: 1px dashed gray;
}

Więcej informacji znajdziesz w artykule Gap decorations: Now in Chromium (Dekoracje przerw: nowość w Chromium).

CSS background-clip: border-area

Chrome 150 dodaje obsługę funkcji background-clip: border-area z CSS Backgrounds Level 4.

Ta wartość przycina tła elementów do obszaru obramowania, co pozwala tworzyć niestandardowe obramowania gradientowe, ozdobne krawędzie ramek i animowane efekty obramowania bez konieczności stosowania dodatkowych elementów opakowujących lub pseudoelementów.

Obietnice przewijania w ramach automatyzacji

W Chrome 150 zaktualizowano programowe metody przewijania (scrollTo(), scrollBy() i scrollIntoView()), aby zwracały obietnicę.

Zwrócony obiekt Promise zostanie rozwiązany po zakończeniu animacji płynnego przewijania, zapewniając niezawodny sygnał do wywoływania działań uzupełniających po zakończeniu przewijania.

Deklaratywna nawigacja przy użyciu klawiatury za pomocą focusgroup

W Chrome 150 wprowadziliśmy obsługę atrybutu focusgroup.

Atrybut focusgroup umożliwia programistom deklaratywne zarządzanie nawigacją za pomocą klawiszy strzałek w złożonych elementach interfejsu (takich jak paski narzędzi, listy kart i menu) bez ręcznego pisania detektorów zdarzeń klawiatury.

<div focusgroup="toolbar wrap" aria-label="Text formatting">
  <button type="button">Bold</button>
  <button type="button">Italic</button>
  <button type="button">Underline</button>
</div>

Więcej informacji znajdziesz w wyjaśnieniu dotyczącym grup fokusowych.

Obsługa protokołu WebSocket w pamięci podręcznej stanu strony internetowej

W Chrome 149 strony z aktywnymi połączeniami WebSocket mogą teraz korzystać z pamięci podręcznej stanu strony internetowej.

Wcześniej otwarte połączenie WebSocket uniemożliwiało korzystanie z pamięci podręcznej stanu strony internetowej. Teraz przeglądarka automatycznie zamyka aktywne połączenia WebSocket po wejściu do pamięci podręcznej wstecz/do przodu, co umożliwia zapisanie strony w pamięci podręcznej i natychmiastowe przywrócenie jej po powrocie do niej.

Czas odpowiedzi tymczasowej i nagłówka w interfejsie Resource Timing

Firefox 152 dodaje obsługę elementów firstInterimResponseStart i finalResponseHeadersStart w interfejsie PerformanceResourceTiming.

Można ich używać do pomiaru czasu, jaki upływa od wysłania żądania do otrzymania przez przeglądarkę tymczasowych i ostatecznych odpowiedzi HTTP.

Przyciski działań w powiadomieniach

Firefox 152 dodaje obsługę przycisków poleceń powiadomień za pomocą właściwości actions w przypadku Notification i opcji w przypadku ServiceWorkerRegistration.showNotification().

Możesz teraz umieszczać przyciski poleceń w powiadomieniach systemu operacyjnego i nasłuchiwać interakcji użytkowników, gdy klikają przyciski.

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 Firefox 153 i Safari 27.

W wersji beta przeglądarki Firefox 153 wprowadziliśmy obsługę Error.stackTraceLimit do konfigurowania maksymalnej głębokości przechwyconego zrzutu stosu, IDBObjectStore.getAllRecords() i IDBIndex.getAllRecords() do pobierania indeksowanych rekordów oraz RTCDtlsTransport.getRemoteCertificates() do sprawdzania zabezpieczeń WebRTC. Deweloperzy dodatków zyskują też nowy interfejs API publicSuffix i metodę userScripts.execute() wstrzykiwania skryptu na żądanie.

W wersji beta Safari 27 wprowadzono pozycjonowanie elementów zakotwiczenia z uwzględnieniem przekształceń, klasę pseudoelementu :heading do dopasowywania elementów nagłówka, słowo kluczowe revert-rule do wycofywania warstw kaskadowych, obsługę słowa kluczowego stretch w określaniu rozmiaru pola i :host:has() selektory złożone.