Chrome 150 beta

Rachel Andrew

Opublikowano: 3 czerwca 2026 r.

O ile nie zaznaczono inaczej, te zmiany dotyczą najnowszej wersji beta Chrome na Androida, ChromeOS, Linuksa, macOS i Windows. Więcej informacji o funkcjach wymienionych poniżej znajdziesz w podanych linkach lub na liście na stronie ChromeStatus.com. Od 2 czerwca 2026 r. Chrome jest w wersji beta. Najnowszą wersję możesz pobrać na komputer na stronie Google.com lub na Androida w Sklepie Google Play.

CSS i interfejs użytkownika

Kolory systemowe AccentColor i AccentColorText

Kolory systemowe AccentColor i AccentColorText można używać w CSS, aby uzyskać dostęp do koloru uzupełniającego systemu określonego na urządzeniu użytkownika. Dzięki tej funkcji deweloperzy mogą stosować w treściach internetowych style podobne do aplikacji w kontekstach, w których użytkownicy oczekują integracji z motywem systemu operacyjnego, np. w zainstalowanej aplikacji internetowej. Aby zobaczyć renderowany kolor uzupełniający systemu, użytkownicy muszą korzystać z zainstalowanej aplikacji internetowej w profilu początkowym.

Zezwalaj na opcjonalny parametr zaokrąglania w funkcji polygon()

Umożliwia określenie opcjonalnego parametru zaokrąglania narożników w funkcji kształtu CSS polygon(). Deweloperzy mogą określić wartość długości, aby zaokrąglić narożniki wielokąta bez ręcznego obliczania krzywych Beziera.

Animowany zoom

Właściwość CSS zoom jest animowana i interpolowana jako <number>. Deweloperzy mogą przechodzić i animować powiększenie, aby płynnie skalować elementy i ich układ, co uzupełnia istniejące skalowanie oparte na transformacji.

Modyfikatory żądań URL CSS

Funkcje CSS url() akceptują opcjonalne modyfikatory żądań po ciągu URL w cudzysłowie: cross-origin(), integrity() i referrer-policy(). Te modyfikatory kontrolują pobieranie odwołującego się zasobu bezpośrednio z CSS, bez konieczności wprowadzania zmian w znacznikach HTML ani w JavaScript.

Na przykład background-image: url("image.png" cross-origin(anonymous)) pobiera obraz w trybie anonimowym CORS.

Właściwość CSS text-fit

Skaluje rozmiar czcionki węzłów tekstowych, aby idealnie dopasować się do szerokości ich pola zawierającego.

Ta właściwość umożliwia deweloperom zapewnienie, że nagłówki lub treści dynamiczne wypełniają dostępne miejsce w poziomie bez ręcznego obliczania rozmiaru czcionki ani złożonych obejść w JavaScript. Ta właściwość zapewnia niezawodne, natywne dla CSS rozwiązanie w zakresie typografii responsywnej, które zachowuje wyrównanie wizualne na różnych rozmiarach ekranu i przy różnej długości tekstu.

CSS background-clip: border-area

Implementuje wartość border-area dla właściwości CSS background-clip zgodnie z definicją w CSS Backgrounds Level 4. Wartość background-clip przycina tło elementu do obszaru malowanego przez obramowanie, uwzględniając border-width i border-style, a jednocześnie ignorując przezroczystość z border-color. Ta wartość umożliwia tworzenie obramowań gradientowych bez użycia `border-image`.

Funkcja CSS image(<color>)

Funkcja image() umożliwia deweloperom generowanie obrazu w jednolitym kolorze z dowolnego koloru. Składnia to: image() = image( <color> ).

CSS light-dark() z wartościami obrazu

Rozszerza funkcję CSS light-dark() o możliwość akceptowania wartości obrazu, takich jak url(), image-set() i none, w arkuszach stylów autora, dzięki czemu właściwości obrazu, takie jak background-image, list-style-image, border-image-source, cursor i content, automatycznie przełączają się między obrazami na podstawie preferowanego schematu kolorów użytkownika. Wcześniej to działanie było dozwolone tylko w arkuszach stylów agenta użytkownika. Ta zmiana jest zgodna ze specyfikacją CSS Color 5 i odpowiada istniejącej implementacji Firefoksa.

Klonowanie do wszystkich elementów potomnych selectedcontent

Wprowadzamy kilka drobnych zmian w przypadkach brzegowych elementu selectedcontent:

• Gdy do elementu <select> zostanie dodanych jednocześnie kilka elementów selectedcontent, wszystkie z nich będą aktualizowane, a nie tylko pierwszy w kolejności DOM.
• Aktualizacja elementu selectedcontent jest odraczana, gdy jest wykonywana podczas wstawiania, usuwania lub przenoszenia, aby rozwiązać problemy z bezpieczeństwem. Aktualizacja jest odraczana za pomocą kroków po wstawieniu lub mikrozadań.

Zapytania o kontener rozdzielone przecinkami

Obsługuje wiele zapytań na regułę @container. Reguła @container jest stosowana, jeśli pasuje co najmniej 1 zapytanie.

Ta funkcja umożliwia na przykład tworzenie zapytań rezerwowych w przypadku funkcji, które nie są obsługiwane we wszystkich przeglądarkach.

Przykład:

@container --name1 not-supported(--foo: bar), --name2 (width > 600px) {}

Oprócz obsługi wielu zapytań model obiektów jest rozszerzany o obsługę atrybutu conditions w interfejsie API CSSContainerRule.

Udostępnianie obszarów niedrukowalnych w CSS

Drukarki zwykle mają mały obszar na każdej z 4 krawędzi arkusza papieru, którego nie są w stanie niezawodnie oznaczyć, zwykle z powodu mechanizmu podawania papieru. Domyślne marginesy strony powinny być większe niż te obszary, ale jeśli autorzy sami ustawiają marginesy, a nawet chcą dodać pola marginesów @page, np. w przypadku niestandardowych nagłówków i stopek, muszą mieć możliwość określenia, gdzie można bezpiecznie drukować.

Deskryptor CSS page-margin-safety może służyć do unikania takich obszarów niedrukowalnych.

Atrybut focusgroup

Umożliwia autorom deklaratywne nadawanie złożonym widżetom nawigacji za pomocą klawiszy strzałek, gwarantowanego zatrzymania tabulatora i pamięci ostatnio wybranego elementu, zastępując ręcznie kodowane skrypty roving tabindex. Przykład:

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

Pseudoklasy elementów multimedialnych

Pseudoklasy CSS :playing, :paused, :seeking, :buffering, :stalled, :muted, i :volume-locked pasują do elementów <audio> i <video> na podstawie ich stanu.

Ta funkcja jest jednym z obszarów, na których skupiamy się w Interop 2026.

Zmiany w działaniu popover=hint

Ta zmiana implementuje poprawiony i uproszczony model układania w stos dla atrybutu popover=hint i jego interakcji z popover=auto. Wcześniej interakcje między tymi 2 typami wyskakujących okien mogły być złożone w niektórych przypadkach brzegowych, np. gdy popover=auto jest zagnieżdżony w popover=hint, i mogły prowadzić do nieoczekiwanego działania. W nowym modelu otwarcie popover=hint nie powoduje już przypadkowego zamknięcia niezwiązanych elementów popover=auto. Wyskakujące okienka podpowiedzi są ukrywane tylko wtedy, gdy ukryty jest ich element nadrzędny popover=auto lub gdy otwierane jest nowe, niezwiązane okienko popover=auto. Deweloperzy mogą też bezpiecznie zagnieżdżać automatyczne wyskakujące okienko w wyskakującym okienku podpowiedzi. Zamiast zgłaszać wyjątek lub przerywać stos, zagnieżdżone popover=auto płynnie przechodzi na niższą wersję i zachowuje się jak popover=hint. Ta funkcja umożliwia deweloperom umieszczanie konfigurowalnego elementu <select> w popover=hint.

Aby jeszcze bardziej zwiększyć przewidywalność i zapobiec złożonym mutacjom stanu, Chrome zaostrza też działanie związane z otwieraniem i zamykaniem wyskakujących okienek z poziomu zdarzenia beforetoggle. Wcześniej istniały zabezpieczenia w niektórych, ale nie we wszystkich możliwych przypadkach. Ta zmiana usprawnia mechanizm wykrywania tych przypadków, aby niezawodnie zgłaszać błędy InvalidStateError we wszystkich takich przypadkach. Ta zmiana zapewnia stabilność zarządzania stanem wyskakujących okienek i zapobiega błędom ponownego wchodzenia w pętlę.

Te zmiany zostały wprowadzone w wyniku rozmów na temat standardów z Mozillą na temat żądania pull specyfikacji HTML w GitHubie.

Względne kolory alfa

Względne kolory alfa zapewniają bezpośredni sposób CSS na uzyskanie półprzezroczystej wersji istniejącego koloru bez przepisywania jego kanałów kolorów. Deweloperzy muszą obecnie duplikować wartości komponentów lub tworzyć osobne wstępnie obliczone tokeny, gdy chcą używać tego samego koloru z różną przezroczystością. Funkcja CSS Color 5 alpha() zachowuje oryginalne komponenty kolorów i zmienia tylko alfa, co zmniejsza nakład pracy autora i ułatwia ponowne używanie i utrzymywanie tokenów kolorów.

flex-wrap:balance

flex-wrap:balance umożliwia deweloperom rozdzielanie treści między wierszami elastycznymi, aby wyglądały bardziej równomiernie, podobnie jak text-wrap:balance.

Funkcja named-feature() dla CSS @supports

Funkcja named-feature() umożliwia regułom CSS @supports wysyłanie zapytań o mały zestaw konkretnych nazwanych funkcji, których nie można przetestować za pomocą innych mechanizmów @supports, ale które są uważane za bardzo wartościowe do testowania.

overscroll-behavior: chain

overscroll-behavior ma 3 wartości: none, auto i contain. Te wartości wpływają na 2 niezależne efekty: propagację przewijania i efekt lokalnego obramowania. Na przykład rozciąganie przewijania.

• none: brak propagacji przewijania, brak efektów lokalnych granic.
• auto: propagacja przewijania, efekty lokalnych granic.
• contain: brak propagacji przewijania, efekty lokalnych granic.

Ta wersja śledzi nową wartość, która uzupełnia zestaw: chain: propagacja przewijania, brak efektów lokalnych granic.

Ta wartość jest przydatna w przypadku efektów takich jak menu boczne zaimplementowane jako przewijane. Możesz otworzyć menu, a gdy dotrze do krawędzi, nie będzie się przewijać ani rozciągać. Przewijanie jest jednak przekazywane do elementu nadrzędnego.

Interfejsy API sieci

Wyłączanie filtrów SVG w przypadku wtyczek i elementów iframe z innych domen lub ograniczonych

Chrome 150 uniemożliwia stosowanie filtrów grafiki SVG (Scalable Vector Graphics) do elementów iframe z innych domen lub ograniczonych, np. w piaskownicy, oraz do wtyczek osadzonych, np. plików PDF. Gdy ramka lub wtyczka jest malowana z efektem filtra SVG, drzewo efektów jest przeszukiwane w celu znalezienia najwyższego elementu nadrzędnego bez filtrów SVG, a zamiast tego stosowany jest ten efekt.

IndexedDB: backend SQLite

Implementacja IndexedDB w Chromium została przepisana na podstawie SQLite, aby zastąpić poprzednią implementację, która korzystała z hybrydy LevelDB i płaskich plików. Ta zmiana nie wpływa na interfejs API sieci.

Oczekuje się, że ta zmiana poprawi niezawodność, a w mniejszym stopniu także wydajność.

Na razie ta zmiana dotyczy nowych magazynów danych. Ta zmiana jest krokiem 2 wieloetapowego wdrażania. Krok 1 znajdziesz na stronie funkcji ChromeStatus dotyczącej kontekstów w pamięci SQLite.

Liczniki klatek MediaStreamTrackProcessor

Dodaje atrybuty discardedFrames i totalFrames do interfejsu MediaStreamTrackProcessor. Te liczniki umożliwiają deweloperom monitorowanie stanu potoków przetwarzania multimediów przez śledzenie liczby klatek odebranych i odrzuconych przez procesor.

Nieprzezroczyste źródło adresów URL data:

Chrome 150 aktualizuje sposób, w jaki DedicatedWorker i SharedWorker obsługują data: adresy URL. Zamiast automatycznie dziedziczyć źródło zabezpieczeń skryptu lub strony, która je utworzyła , te obiekty worker mają przypisane unikalne, nieprzezroczyste źródło.

Ta zmiana jest zgodna ze specyfikacją HTML obiektu worker i zwiększa bezpieczeństwo przez izolowanie tych obiektów worker od stanu twórcy w tej samej domenie, uniemożliwiając im dostęp do danych wrażliwych za pomocą mechanizmów takich jak BroadcastChannel czy miejsce na dane w tej samej domenie. Aby zachować prawidłowe granice izolacji, te obiekty worker nadal znajdują się w tej samej partycji miejsca na dane (np. przez zachowanie witryny najwyższego poziomu lub nonce) co ich twórca.

To dostosowanie zabezpieczeń jest domyślnie włączone na platformach komputerowych i mobilnych. Administratorzy mogą przeglądać lub weryfikować granice zabezpieczeń za pomocą scentralizowanych konfiguracji. Szczegółowe informacje o implementacji technicznej i odniesienia do specyfikacji znajdziesz w kroku 3 ustawień obiektu worker w standardzie HTML Living Standard.

Migracja źródła PWA

Gdy użytkownik instaluje progresywną aplikację internetową (PWA), jej tożsamość i kontekst zabezpieczeń są ściśle powiązane z jej originem strony, np. app.example.com. To powiązanie stanowi poważne wyzwanie dla deweloperów, którzy muszą zmienić origin PWA z powodu zmiany nazwy marki, restrukturyzacji domeny lub technicznej rearchitektury. Taka zmiana zmusza użytkowników do ręcznego odinstalowania starej aplikacji i ponownego zainstalowania nowej, co prowadzi do zakłóceń i potencjalnej utraty użytkowników. Chrome 150 wprowadza mechanizm, który umożliwia deweloperom migrację zainstalowanej PWA do nowego źródła w tej samej witrynie, zachowując zaufanie i uprawnienia użytkowników.

Zasada WebAppInstallForceList blokuje migrację. Ponieważ zasady dotyczące aplikacji internetowych w firmie są oparte głównie na adresach URL i źródłach, istnieje ryzyko, że migracja może ominąć niektóre zasady skonfigurowane przez administratora. Chrome nie oferuje użytkownikowi migracji, gdy aplikacja jest wymuszona przez administratora firmy, i zamiast tego wyświetla baner, który to wyjaśnia.

Analizowanie instrukcji przetwarzania w HTML

Instrukcje przetwarzania (składnia: <?target data>) to istniejąca konstrukcja DOM, udostępniana w XML, która umożliwia obiektom węzłów, które nie są elementami, ale mogą mieć pewne znaczenie semantyczne dla przetwarzania dokumentu.

Możesz ich na przykład używać do oznaczania zakresów na potrzeby przesyłania strumieniowego lub wyróżniania bez konieczności tworzenia nowych elementów DOM i zmiany struktury DOM w zakresie CSS lub jako dyrektyw dla parsera HTML dotyczących buforowania i przesyłania strumieniowego.

Przesyłanie strumieniowe w innej kolejności

Przesyłanie strumieniowe w innej kolejności umożliwia używanie <template for> oraz zakresów instrukcji przetwarzania (<?start> i <?end>), aby dostarczać HTML w kolejności innej niż sekwencyjna i aktualizować istniejące części dokumentu bez użycia JavaScriptu.

Obietnice przewijania programowego

Ta funkcja zapewnia niezawodny sygnał o stanie ukończenia programowego płynnego przewijania. Wszystkie metody przewijania w Element i Window zwracają obiekty Promise, które są rozwiązywane po zakończeniu przewijania, a rozwiązana wartość wskazuje, czy przewijanie zostało przerwane.

WebGPU Immediates

Dodaje nową natychmiastową przestrzeń adresową w WGSL oraz metodę setImmediateData() w koderach przepustowości renderowania, przepustowości obliczeniowej i pakietu renderowania, która umożliwia przekazywanie niewielkich ilości często aktualizowanych danych bezpośrednio do shaderów bez tworzenia obiektów bufora GPU ani grup powiązań. Jest to szczególnie przydatne w przypadku aplikacji, które muszą aktualizować parametry rysowania, takie jak indeksy obiektów, indeksy materiałów lub macierze transformacji, przy każdym wywołaniu rysowania, co pozwala znacznie zwiększyć wydajność dzięki unikaniu narzutu związanego z zarządzaniem buforem i grupą powiązań.

Web Speech API: jakość rozpoznawania na urządzeniu

Rozszerza interfejs SpeechRecognition przez dodanie właściwości quality do SpeechRecognitionOptions. Ta właściwość umożliwia deweloperom określenie możliwości semantycznych wymaganych do rozpoznawania na urządzeniu za pomocą processLocally: true.

Proponowany wyliczenie quality obsługuje 3 poziomy – command, dictation i conversation – które odpowiadają rosnącej złożoności zadań i wymaganiom sprzętowym. Ta funkcja umożliwia deweloperom określenie, czy urządzenie lokalne może obsługiwać przypadki użycia o wysokim znaczeniu (np. transkrypcję spotkań), czy też muszą oni przejść na usługi w chmurze, rozwiązując nieprzejrzystość możliwości modelu na urządzeniu.

Nowe wersje próbne origin

W Chrome 150 możesz wziąć udział w tych nowych wersjach próbnych origin.

Protokół weryfikacji e-maila (EVP)

Protokół weryfikacji e-maila (EVP) pomaga użytkownikom tworzyć konta, uzyskiwać do nich dostęp i je odzyskiwać, zapewniając kryptograficzny dowód własności bez konieczności ręcznego wpisywania jednorazowych haseł e-mail.

Wycofania i usunięcia

Ta wersja Chrome wprowadza te wycofania i usunięcia.

Usuwanie [LegacyNoInterfaceObject] z IDL FontFaceSet

IDL FontFaceSet w Chromium wcześniej nieprawidłowo używał [LegacyNoInterfaceObject], co ukrywało FontFaceSet jako właściwość globalną i usuwało właściwość konstruktora z jego prototypu. To działanie odbiegało od specyfikacji CSS Font Loading i różniło się od działania Safari i Firefoksa.

To usunięcie usuwa [LegacyNoInterfaceObject] z IDL FontFaceSet, dzięki czemu FontFaceSet jest prawidłowo dostępny jako właściwość globalna. Ponieważ w IDL nie jest zdefiniowany żaden constructor(), wywołanie nowego FontFaceSet() z JavaScriptu prawidłowo zgłasza błąd TypeError: Illegal constructor, co jest zgodne z wymaganym przez specyfikację działaniem.