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 tutaj 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 Google.com na komputerze lub na Androidzie 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 programiści mogą stosować style podobne do aplikacji do treści internetowych 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 dla funkcji polygon()

Umożliwia określenie opcjonalnego parametru zaokrąglania narożników w funkcji kształtu CSS polygon(). Programiści 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>. Programiści 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 zawierającego je pola.

Ta właściwość umożliwia programistom 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 rozwiązanie CSS do typografii elastycznej, które zachowuje wyrównanie wizualne w 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 programistom 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 w zależności od 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 pasuje do istniejącej implementacji Firefoksa.

Klonowanie do wszystkich elementów potomnych selectedcontent

Wprowadzamy kilka drobnych zmian w przypadkach brzegowych elementu selectedcontent:

• Gdy w elemencie <select> umieszczonych jest jednocześnie kilka elementów selectedcontent, wszystkie są 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 np. stosowanie 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, na którym nie mogą niezawodnie drukować, 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 głównych obszarów 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. Ponadto programiści mogą 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 do starszej wersji i zachowuje się jak popover=hint. Ta funkcja umożliwia programistom umieszczenie konfigurowalnego <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 w zdarzeniu 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. Programiści 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.

<iframe> o elastycznym rozmiarze

Umożliwia witrynom włączenie elastycznego rozmiaru elementów iframe, który zmienia rozmiar elementu <iframe> w dokumencie nadrzędnym do rozmiaru przepełnienia układu dokumentu iframe, aby uniknąć przewijania w dokumencie podrzędnym.

flex-wrap:balance

flex-wrap:balance umożliwia programistom rozdzielanie treści między wiersze elastyczne, 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 testować 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 obramowania lokalnego. Na przykład rozciąganie przewijania.

• none: brak propagacji przewijania, brak efektów obramowania lokalnego.
• auto: propagacja przewijania, efekty obramowania lokalnego.
• contain: brak propagacji przewijania, efekty obramowania lokalnego.

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

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 WWW

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 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 WWW.

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. Informacje o kroku 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ą programistom 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ą sprawdzać i 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 programistó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 powoduje zakłócenia i potencjalną utratę użytkowników. Chrome 150 wprowadza mechanizm, który umożliwia programistom 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 firmowe dotyczące aplikacji internetowych 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 firmowego, i zamiast tego wyświetla baner, który wyjaśnia to użytkownikowi.

Analizowanie instrukcji przetwarzania w HTML

Instrukcje przetwarzania (składnia: <?target data>) to istniejąca konstrukcja DOM, udostępniana w XML, która umożliwia tworzenie obiektów 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 nieprawidłowej kolejności

Przesyłanie strumieniowe w nieprawidłowej kolejności umożliwia używanie <template for> oraz zakresów instrukcji przetwarzania (<?start> i <?end>) do dostarczania kodu HTML w kolejności innej niż sekwencyjna i aktualizowania istniejących 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 programistom 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 programistom określenie, czy urządzenie lokalne może obsługiwać przypadki użycia o wysokim ryzyku (np. transkrypcja spotkania), czy też muszą oni przejść na usługi w chmurze, rozwiązując problem nieprzejrzystości możliwości modelu na urządzeniu.

Nowe wersje próbne origin

W Chrome 150 możesz włączyć te nowe wersje próbne 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 new FontFaceSet() z JavaScriptu prawidłowo zgłasza błąd TypeError: Illegal constructor, co jest zgodne z wymaganym przez specyfikację działaniem.