Gepubliceerd: 3 juni 2026
Tenzij anders vermeld, zijn de volgende wijzigingen van toepassing op de nieuwste Chrome-bètaversie voor Android, ChromeOS, Linux, macOS en Windows. Meer informatie over de hier vermelde functies vindt u via de meegeleverde links of in de lijst op ChromeStatus.com. Chrome is sinds 2 juni 2026 in bèta. U kunt de nieuwste versie downloaden op Google.com voor desktop of in de Google Play Store voor Android.
CSS en UI
AccentColor en AccentColorText -systeemkleuren
De systeemkleuren AccentColor en AccentColorText kunnen in CSS worden gebruikt om toegang te krijgen tot de systeemaccentkleur die op het apparaat van de gebruiker is ingesteld. Deze mogelijkheid stelt ontwikkelaars in staat om app-achtige styling toe te passen op hun webcontent in contexten waar gebruikers integratie met het thema van het besturingssysteem verwachten, zoals een geïnstalleerde webapplicatie. Gebruikers moeten zich in een geïnstalleerde webapplicatie op het initiële profiel bevinden om de systeemaccentkleur te kunnen zien.
Sta een optionele afrondingsparameter toe voor polygon()
Hiermee kun je een optionele parameter voor het afronden van hoeken specificeren in de CSS-vormfunctie ` polygon() . Ontwikkelaars kunnen een lengtewaarde opgeven om de hoeken van een polygoon af te ronden zonder handmatig Béziercurven te hoeven berekenen.
Animeerbare zoom
De CSS-eigenschap zoom is animeerbaar en interpoleert als een ` <number> . Ontwikkelaars kunnen de zoomfunctie gebruiken om elementen en hun lay-out soepel te schalen, als aanvulling op bestaande transformatiegebaseerde schaling.
CSS URL-verzoekmodifiers
De CSS url() -functie accepteert optionele request-modifiers na de URL-string: cross-origin() , integrity() en referrer-policy() . Deze modifiers bepalen het ophaalgedrag van de betreffende bron rechtstreeks vanuit CSS, zonder dat er wijzigingen in de HTML-markup of JavaScript nodig zijn.
Bijvoorbeeld, background-image: url("image.png" cross-origin(anonymous)) haalt de afbeelding op via de anonieme CORS-modus.
CSS-eigenschap text-fit
Past de lettergrootte van tekstelementen aan zodat deze perfect past binnen de breedte van het betreffende kader.
Met deze eigenschap kunnen ontwikkelaars ervoor zorgen dat koppen of dynamische content de beschikbare horizontale ruimte volledig benutten zonder handmatige lettergrootteberekeningen of complexe JavaScript-oplossingen. Deze eigenschap biedt een robuuste, native CSS-oplossing voor responsieve typografie die de visuele uitlijning behoudt op verschillende schermformaten en variërende tekstlengtes.
CSS background-clip: border-area
Implementeert de border-area -waarde voor de CSS background-clip eigenschap, zoals gedefinieerd in CSS Backgrounds Level 4. De background-clip waarde beperkt de achtergrond van een element tot het gebied dat wordt ingenomen door de randlijnen, waarbij rekening wordt gehouden met border-width en border-style , maar transparantie van border-color wordt genegeerd. Met deze waarde kunt u verloopranden maken zonder border-image.
CSS-functie image(<color>)
Met de functie image() kunnen ontwikkelaars een afbeelding met een effen kleur genereren vanuit elke gewenste kleur. De syntax is: image() = image( <color> ) .`
CSS light-dark() met afbeeldingswaarden
Breidt de CSS-functie light-dark() uit om afbeeldingswaarden, zoals url() , image-set() en none , in auteurstijlbladen te accepteren. Hierdoor kunnen afbeeldingseigenschappen zoals background-image , list-style-image , border-image-source , cursor en content automatisch wisselen tussen afbeeldingen op basis van het door de gebruiker gekozen kleurenschema. Voorheen was dit gedrag alleen toegestaan in stijlbladen van de gebruikersagent. Deze wijziging sluit aan bij de CSS Color 5-specificatie en komt overeen met de bestaande implementatie in Firefox.
Kloon alle onderliggende selectedcontent inhoudselementen
Er worden enkele kleine wijzigingen aangebracht in de randgevallen van het element selectedcontent :
- Wanneer meerdere
selectedcontentelementen tegelijkertijd in een<select>-element worden geplaatst, worden ze allemaal bijgewerkt in plaats van alleen het eerste element in de DOM-volgorde. - Het bijwerken van het
selectedcontentinhoudselement wordt uitgesteld wanneer dit gebeurt tijdens invoeg-, verwijder- of verplaatsingsstappen om beveiligingsproblemen op te lossen. De update wordt uitgesteld door gebruik te maken van stappen na de invoeging of microtaken.
Door komma's gescheiden containerquery's
Ondersteunt meerdere query's per @container -regel. De @container regel wordt toegepast als ten minste één van de query's overeenkomt.
Deze mogelijkheid maakt het bijvoorbeeld mogelijk om terugvalquery's te gebruiken voor functies die niet in alle browsers worden ondersteund.
Voorbeeld:
@container --name1 not-supported(--foo: bar), --name2 (width > 600px) {}
Naast de ondersteuning voor meerdere query's is het objectmodel uitgebreid met ondersteuning voor het conditions -attribuut in de CSSContainerRule API.
Niet-afdrukbare gebieden zichtbaar maken voor CSS
Printers hebben doorgaans een klein gebied aan elk van de vier randen van een vel papier dat ze niet betrouwbaar kunnen markeren, meestal vanwege het papierverwerkingsmechanisme van de printer. De standaard paginamarges zijn doorgaans groter dan deze gebieden, maar als auteurs zelf marges instellen, en zelfs @page margekaders willen toevoegen, bijvoorbeeld voor aangepaste kop- en voetteksten, hebben ze een manier nodig om te bepalen waar het veilig is om te printen.
De CSS-descriptor page-margin-safety kan worden gebruikt om dergelijke onafdrukbare gebieden te vermijden.
Het focusgroup
Hiermee kunnen auteurs op declaratieve wijze samengestelde widgets navigatie via de pijltjestoetsen, een gegarandeerde tabstop en geheugen voor het laatst geselecteerde element meegeven, ter vervanging van handmatig gecodeerde scripts voor het wijzigen van de tabindex. Voorbeeld:
<div focusgroup="toolbar wrap" aria-label="Formatting">
<button>Bold</button>
<button>Italic</button>
<button>Underline</button>
</div>
pseudo-klassen voor media-elementen
De CSS-pseudoklassen :playing , :paused , :seeking , :buffering , :stalled , :muted en :volume-locked komen overeen met <audio> en <video> -elementen op basis van hun status.
Deze functie is een van de speerpunten van Interop 2026 .
popover=hint gedragsveranderingen
Deze wijziging implementeert een herzien en vereenvoudigd stapelmodel voor het attribuut popover=hint en de interactie ervan met popover=auto . Voorheen konden de interacties tussen deze twee typen popovers in sommige uitzonderlijke gevallen complex zijn, zoals het nesten van popover=auto binnen popover=hint , en tot onverwacht gedrag leiden. Met het nieuwe model sluit het openen van een popover=hint niet langer per ongeluk ongerelateerde popover=auto elementen. `Hint` popovers worden alleen verborgen wanneer hun voorouderlijke popover=auto wordt verborgen, of wanneer een nieuwe, ongerelateerde popover=auto wordt geopend. Bovendien kunnen ontwikkelaars veilig een `auto` popover in een `hint` popover nesten; in plaats van een uitzondering te genereren of de stapel te verbreken, wordt de geneste popover=auto netjes teruggezet naar een popover=hint . Deze mogelijkheid stelt ontwikkelaars in staat om een aanpasbare <select> binnen een popover=hint te plaatsen.
Om de voorspelbaarheid verder te verbeteren en complexe statuswijzigingen te voorkomen, scherpt Chrome ook het gedrag aan rond het openen en sluiten van popovers vanuit de beforetoggle -gebeurtenis. Er waren al beveiligingen ingebouwd voor sommige, maar niet alle mogelijke gevallen. Deze wijziging vernieuwt het mechanisme dat wordt gebruikt om deze gevallen te detecteren, zodat er betrouwbaarder InvalidStateError wordt gegenereerd voor al deze gevallen. Deze wijziging zorgt ervoor dat het statusbeheer van popovers stabiel blijft en voorkomt bugs met oneindige herhalingen.
Deze wijzigingen zijn ingegeven door gesprekken met Mozilla over de standaarden in het kader van de pull request voor de HTML-specificatie op GitHub .
Relatieve alfakleuren
Relatieve alfakleuren bieden een directe CSS-manier om een doorschijnende versie van een bestaande kleur af te leiden zonder de kleurkanalen te hoeven herschrijven. Ontwikkelaars moeten momenteel componentwaarden dupliceren of aparte vooraf berekende tokens maken wanneer ze dezelfde kleur met een andere dekking willen. De CSS Color 5 alpha() -functie behoudt de originele kleurcomponenten en wijzigt alleen de alfawaarde, wat de ontwikkeltijd verkort en het hergebruik en onderhoud van kleurtokens vereenvoudigt.
Aanpasbare grootte <iframe>
Hiermee kunnen websites ervoor kiezen om iframes responsief te laten dimensioneren, waarbij het <iframe> -element in het hoofddocument de overloopgrootte van de iframe inneemt om scrollen in het onderliggende document te voorkomen.
flex-wrap:balance
flex-wrap:balance kunnen ontwikkelaars de inhoud gelijkmatiger verdelen over flex-regels, vergelijkbaar met text-wrap:balance .
named-feature() functie voor CSS @supports
De functie named-feature() stelt CSS @supports regels in staat om te zoeken naar een kleine set specifieke benoemde features die niet kunnen worden getest met andere @supports mechanismen, maar die wel als zeer waardevol worden beschouwd om te testen.
overscroll-behavior: chain
overscroll-behavior heeft drie waarden: none , auto en contain . Deze waarden beïnvloeden twee onafhankelijke effecten: scrollpropagatie en lokaal randeffect. Bijvoorbeeld overscroll-stretch.
-
none: geen scrollpropagatie, geen lokale randeffecten. -
auto: scrollpropagatie, lokale randeffecten. -
contain: geen scrollpropagatie, lokale randeffecten.
Deze release bevat een nieuwe waarde om de set compleet te maken: chain : scrollpropagatie, geen lokale grenseffecten.
Deze waarde is handig voor effecten zoals zijmenu's die als scrollbalken zijn geïmplementeerd. Je kunt het menu naar binnen halen, en wanneer het de rand bereikt, scrollt het niet verder, of rekt het uit en verschuift het niet. Het scrollen wordt dan echter wel doorgegeven aan het bovenliggende element.
Web-API's
Schakel SVG-filters uit voor plug-ins en cross-origin of beperkte iframes.
Chrome 150 voorkomt dat Scalable Vector Graphics (SVG)-filters worden toegepast op iFrames met een andere oorsprong of beperkte iFrames, zoals iFrames in een sandbox, en op ingesloten plug-ins, zoals PDF's. Wanneer een frame of plug-in wordt weergegeven met een SVG-filtereffect, wordt de effectstructuur doorlopen om de hoogste voorouder zonder SVG-filters te vinden, waarna dat effect in plaats daarvan wordt toegepast.
IndexedDB: SQLite-backend
IndexedDB implementatie van Chromium is herschreven op basis van SQLite ter vervanging van de vorige implementatie die gebruikmaakte van een combinatie van LevelDB en platte bestanden. Deze wijziging heeft geen invloed op de web-API.
Deze herziening zal naar verwachting de betrouwbaarheid en, in mindere mate, de prestaties verbeteren.
Voorlopig geldt deze wijziging voor nieuwe datastores . Deze wijziging is stap 2 van een gefaseerde, stapsgewijze release. Zie de ChromeStatus-pagina voor SQLite in-memory contexten, waar stap 1 wordt bijgehouden.
MediaStreamTrackProcessor frametellers
Voegt de attributen discardedFrames en totalFrames toe aan de MediaStreamTrackProcessor -interface. Met deze tellers kunnen webontwikkelaars de status van hun mediaprocessing-pipelines bewaken door het aantal frames bij te houden dat door de processor is ontvangen en weggegooid.
Onzichtbare oorsprong voor data: URL's
Chrome 150 vernieuwt de manier waarop DedicatedWorker en SharedWorker omgaan data: URL's . In plaats van automatisch de beveiligingsorigin over te nemen van het script of de pagina die ze heeft aangemaakt, krijgen deze workers een unieke, ondoorzichtige origin toegewezen.
Deze wijziging sluit aan bij de HTML-specificatie voor workers en verbetert de beveiliging door deze workers te isoleren van de same-origin-status van de creator. Hierdoor wordt voorkomen dat ze toegang krijgen tot gevoelige gegevens via mechanismen zoals BroadcastChannel of same-origin-opslag. Om de juiste isolatiegrenzen te behouden, bevinden deze workers zich nog steeds in dezelfde opslagpartitie (bijvoorbeeld door de top-level site of nonce te behouden) als hun creator.
Deze beveiligingsaanpassing is standaard ingeschakeld voor zowel desktop- als mobiele platforms. Beheerders kunnen de beveiligingsgrenzen bekijken of verifiëren via hun centrale configuraties. Zie stap 3 van de HTML Living Standard Worker-instellingen voor technische implementatiedetails en specificatiereferenties.
PWA-oorsprongmigratie
Wanneer een gebruiker een Progressive Web App (PWA) installeert, zijn de identiteit en de beveiligingscontext ervan nauw verbonden met de weborigin, bijvoorbeeld app.example.com . Deze koppeling vormt een aanzienlijke uitdaging voor ontwikkelaars die de origin van hun PWA moeten wijzigen vanwege een rebranding, domeinherstructurering of technische herstructurering. Een dergelijke wijziging dwingt gebruikers om de oude app handmatig te verwijderen en de nieuwe opnieuw te installeren, wat leidt tot een storende gebruikerservaring en mogelijk gebruikersverlies. Chrome 150 introduceert een mechanisme waarmee ontwikkelaars een geïnstalleerde PWA kunnen migreren naar een nieuwe origin binnen dezelfde site, waarbij het vertrouwen en de machtigingen van de gebruiker behouden blijven.
Het beleid WebAppInstallForceList blokkeert migratie. Omdat bedrijfsbeleid met betrekking tot webapplicaties voornamelijk gebaseerd is op URL's en oorsprong, bestaat het risico dat een migratie bepaalde beleidsregels omzeilt die een beheerder mogelijk heeft geconfigureerd. Chrome biedt de gebruiker geen migratieoptie aan wanneer een app door de bedrijfsbeheerder geforceerd wordt geïnstalleerd, maar toont in plaats daarvan een banner die dit uitlegt.
Verwerkingsinstructies parseren in HTML
Verwerkingsinstructies (syntaxis: <?target data> ) zijn een bestaande DOM-constructie, beschikbaar in XML, waarmee knooppuntobjecten kunnen worden gebruikt die geen elementen zijn, maar wel een semantische betekenis kunnen hebben voor de verwerking van een document.
Je kunt ze bijvoorbeeld gebruiken om bereiken aan te duiden voor streaming of highlighting zonder dat er nieuwe DOM-elementen nodig zijn en de DOM-structuur verandert wat CSS betreft, of als instructies voor de HTML-parser over hoe te bufferen en te streamen.
Streaming in een verkeerde volgorde
Met out-of-order streaming kunt u <template for> en verwerkingsinstructiebereiken ( <?start> en <?end> ) gebruiken om HTML in een niet-sequentiële volgorde te leveren en bestaande delen van het document bij te werken zonder JavaScript.
Programmatische scrollbeloftes
Deze functionaliteit biedt een betrouwbaar signaal voor de voltooiingsstatus van een programmatisch soepel scrollen. Alle scrollmethoden in Element en Window retourneren Promise-objecten die worden opgelost wanneer het scrollen is voltooid. De opgeloste waarde geeft aan of het scrollen is onderbroken.
WebGPU-directe acties
Voegt een nieuwe directe adresruimte toe aan WGSL en een setImmediateData() methode aan de render-pass-, compute-pass- en renderbundel-encoders. Hierdoor kunnen kleine hoeveelheden frequent bijgewerkte data rechtstreeks aan shaders worden doorgegeven zonder GPU-bufferobjecten of bindgroepen aan te maken. Dit is met name handig voor toepassingen die per-draw-parameters zoals objectindexen, materiaalindexen of transformatiematrices bij elke drawcall moeten bijwerken. Dit leidt tot aanzienlijke prestatieverbeteringen doordat de overhead van buffer- en bindgroepbeheer wordt vermeden.
Web Speech API: Kwaliteit van spraakherkenning op het apparaat
Breidt de SpeechRecognition interface uit door een quality toe te voegen aan SpeechRecognitionOptions . Met deze eigenschap kunnen ontwikkelaars de semantische mogelijkheden specificeren die nodig zijn voor spraakherkenning op het apparaat door processLocally: true te gebruiken.
De voorgestelde quality ondersteunt drie niveaus: command , dictation en conversation . Deze niveaus corresponderen met toenemende taakcomplexiteit en hardwarevereisten. Deze functionaliteit stelt ontwikkelaars in staat te bepalen of het lokale apparaat veeleisende gebruiksscenario's (zoals transcriptie van vergaderingen) aankan, of dat ze moeten terugvallen op cloudservices. Dit lost het probleem op van de ondoorzichtige aard van de mogelijkheden van het on-device model.
Nieuwe oorsprongsproeven
In Chrome 150 kun je je aanmelden voor de volgende nieuwe Origin-proefversies .
E-mailverificatieprotocol ( EVP )
Het Email Verification Protocol ( EVP ) helpt gebruikers bij het aanmaken, openen en herstellen van accounts door naadloos cryptografisch bewijs van eigendom te leveren, in plaats van handmatig OTP's via e-mail te versturen.
Afschrijvingen en verwijderingen
Deze versie van Chrome introduceert de volgende afschaffingen en verwijderingen.
Verwijder [LegacyNoInterfaceObject] uit FontFaceSet IDL
Chromium's FontFaceSet IDL gebruikte voorheen ten onrechte [LegacyNoInterfaceObject] , waardoor FontFaceSet als globale eigenschap werd verborgen en de constructoreigenschap uit het prototype werd verwijderd. Dit gedrag week af van de CSS Font Loading-specificatie en verschilde van het gedrag in Safari en Firefox.
Door deze verwijdering wordt [LegacyNoInterfaceObject] uit de FontFaceSet IDL verwijderd, waardoor FontFaceSet correct toegankelijk wordt als een globale eigenschap. Omdat er geen constructor() is gedefinieerd in de IDL, geeft het aanroepen van new FontFaceSet() vanuit JavaScript terecht de foutmelding TypeError: Illegal constructor , wat overeenkomt met het door de specificatie voorgeschreven gedrag.