Chrome 137 bèta

Stay organized with collections Save and categorize content based on your preferences.

Rachel Andrew

Gepubliceerd: 1 mei 2025

Tenzij anders aangegeven, zijn de volgende wijzigingen van toepassing op de nieuwste release van het Chrome-bètakanaal voor Android, ChromeOS, Linux, macOS en Windows. Lees meer over de hier genoemde functies via de aangeboden links of via de lijst op ChromeStatus.com. Chrome 130 is vanaf 30 april 2025 een bètaversie. Je kunt het nieuwste downloaden op Google.com voor desktop of in de Google Play Store op Android.

CSS en gebruikersinterface

Deze release voegt zeven nieuwe CSS- en UI-functies toe.

De if() functie

De CSS if() functie biedt een beknopte manier om voorwaardelijke waarden uit te drukken. Het accepteert een reeks voorwaarde-waardeparen, begrensd door puntkomma's. De functie evalueert elke voorwaarde opeenvolgend en retourneert de waarde die bij de eerste ware voorwaarde hoort. Als geen van de voorwaarden waar is, retourneert de functie een lege tokenstroom. Hiermee kunt u complexe voorwaardelijke logica op een eenvoudige en beknopte manier uitdrukken. Voorbeeld:

div {
      color: var(--color);
      background-color: if(style(--color: white): black; else: white);
  }
  .dark {
      --color: black;
  }
  .light {
      --color: white;
  }

<div class="dark">dark</div>
<div class="light">light</div>

De eigenschappen van reading-flow en reading-order

De CSS-eigenschap reading-flow bepaalt de volgorde waarin elementen in een flex-, raster- of blokindeling worden blootgesteld aan toegankelijkheidshulpmiddelen en gefocust met behulp van tabtoetsenbordfocusnavigatie. Er is een van de volgende zoekwoordwaarden voor nodig:

• normal
• flex-visual
• flex-flow
• grid-rows
• grid-columns
• grid-order
• source-order

Met de CSS-eigenschap reading-order kunt u de volgorde binnen een leesstroomcontainer handmatig overschrijven. Het is een geheel getal met de standaardwaarde 0.

Lees voor meer informatie Gebruik CSS-leesstroom voor logische sequentiële focusnavigatie en probeer enkele voorbeelden van leesstroom .

offset-path: shape()

De functie shape() wordt al ondersteund in clip-path en maakt responsief knippen mogelijk. Als u dit ook inschakelt voor offset-path wordt een klein gat gedicht waar dezelfde soort vorm voor die eigenschap kan worden gebruikt.

Ondersteuning van transformatiekenmerk op SVGSVGElement

Deze functie maakt de toepassing mogelijk van transformatie-eigenschappen, zoals schalen, roteren, translatie en scheeftrekken, rechtstreeks op het <svg> hoofdelement met behulp van het transform-attribuut. Met deze verbetering kunt u het volledige SVG-coördinatensysteem of de inhoud ervan als geheel manipuleren, waardoor u meer flexibiliteit krijgt bij het maken van dynamische, responsieve en interactieve vectorafbeeldingen. Door dit kenmerk te ondersteunen kan het SVG-element worden getransformeerd zonder dat er extra wrapper-elementen of complexe CSS-oplossingen nodig zijn, waardoor het proces van het bouwen van schaalbare en geanimeerde webafbeeldingen wordt gestroomlijnd.

Laat <use> verwijzen naar het hoofdelement van een extern document door het fragment weg te laten.

In deze functie stroomlijnen we het SVG <use> -element door de verwijzingsvereisten te versoepelen. Momenteel moet u expliciet naar fragmenten verwijzen in het SVG-document. Als er geen fragment-ID wordt opgegeven, kan <use> het doel niet omzetten en wordt er niets weergegeven of verwezen.

Met deze functie zal het weglaten van fragmenten of het alleen geven van de externe SVG-bestandsnaam automatisch naar het root-element verwijzen, waardoor u het document waarnaar verwezen wordt niet meer hoeft te wijzigen alleen maar om een ​​ID aan de root toe te wijzen. Deze verbetering vereenvoudigt dit handmatige bewerkingsproces en verbetert de efficiëntie.

Systeemaccentkleur voor accent-color uitgebreid naar Windows en ChromeOS

Hierdoor kunt u de accentkleur van het besturingssysteem gebruiken voor formulierelementen. Door de CSS-eigenschap accent-color te gebruiken, kunt u ervoor zorgen dat formulierelementen zoals selectievakjes, keuzerondjes en voortgangsbalken automatisch de accentkleur aannemen die is gedefinieerd door het besturingssysteem van de gebruiker. Dit wordt sinds 2021 ondersteund op macOS en wordt nu ondersteund op Windows en ChromeOS.

view-transition-name: match-element

De match-element voor de view-transition eigenschap genereert een unieke ID op basis van de identiteit van het element en blijft hetzelfde voor dit element. Dit wordt gebruikt in gevallen waarin het element wordt verplaatst en u het wilt animeren met een weergaveovergang.

Web-API's

Uitlijningsfouttype gegenereerd bij het maken van WebAuthn-referenties voor 'betaling'

Corrigeert het fouttype dat wordt gegenereerd tijdens het aanmaken van WebAuthn-referenties voor payment . Vanwege een historische specificatie die niet overeenkomt, zou het creëren van een payment in een cross-origin iframe zonder gebruikersactivatie een SecurityError genereren in plaats van een NotAllowedError , wat wordt gegenereerd voor niet-betalingsreferenties. Dit is een baanbrekende verandering. Code die eerder het type fout heeft gedetecteerd (bijvoorbeeld e instanceof SecurityError ), zou hierdoor worden beïnvloed. Code die in het algemeen fouten afhandelt tijdens het maken van inloggegevens (bijvoorbeeld catch (e) ) blijft correct functioneren.

Blob-URL-partitionering: ophalen/navigeren

Als voortzetting van Storage Partitioning implementeert dit het partitioneren van Blob-URL-toegang via Storage Key (site op het hoogste niveau, frame-oorsprong en de has-cross-site-ancestor boolean), met uitzondering van navigatie op het hoogste niveau, die alleen gepartitioneerd blijft op frame-oorsprong.

Deze wijziging kan tijdelijk worden teruggedraaid door het PartitionedBlobURLUsage -beleid in te stellen. Het beleid wordt beëindigd wanneer het andere bedrijfsbeleid dat betrekking heeft op opslagpartitionering wordt beëindigd.

Oproepstapels in crashrapporten van niet-reagerende webpagina's

Deze functie legt de JavaScript-aanroepstack vast wanneer een webpagina niet meer reageert omdat JavaScript-code een oneindige lus of een andere zeer lange berekening uitvoert. Dit helpt ontwikkelaars om de oorzaak van het niet reageren te identificeren en deze gemakkelijker op te lossen. De JavaScript-aanroepstack wordt opgenomen in de crashrapportage-API als de reden niet reageert.

Kleurtypen met drijvende komma voor canvas

Introduceert de mogelijkheid om pixelformaten met drijvende komma te gebruiken (in tegenstelling tot een 8-bits vast punt) met CanvasRenderingContext2D , OffscreenCanvasRenderingContext2D en ImageData . Dit is nodig voor toepassingen met hoge precisie (bijvoorbeeld medische visualisatie), inhoud met een hoog dynamisch bereik en lineaire werkkleurruimten.

Niet-betrouwbare HTTP-prerendering in platte tekst niet toestaan

Momenteel is pre-rendering toegestaan ​​via HTTP en HTTPS, terwijl prefetch alleen via HTTPS werkt. Beperk pre-rendering zodat deze consistent is met prefetch.

Document-isolatiebeleid

Met Document-Isolation-Policy kan een document crossOriginIsolation voor zichzelf inschakelen, zonder COOP of COEP te hoeven inzetten, en ongeacht de crossOriginIsolation -status van de pagina. Het beleid wordt ondersteund door procesisolatie. Bovendien worden de niet-CORS cross-origin-subbronnen van het document geladen zonder inloggegevens of moeten ze een CORP-header hebben.

Lees meer in Documentisolatiebeleid: schakel eenvoudig krachtige webfuncties in .

Ed25519 in webcryptografie

Deze functie voegt ondersteuning toe voor Curve25519-algoritmen in de Web Cryptography API, namelijk het handtekeningalgoritme Ed25519

Registratie en rapportage van IP-adressen

Chrome Enterprise verbetert de mogelijkheden voor beveiligingsmonitoring en respons op incidenten door lokale en externe IP-adressen te verzamelen en te rapporteren en deze IP-adressen naar de Security Investigation Logs (SIT) te sturen. Daarnaast biedt Chrome Enterprise beheerders de mogelijkheid om de IP-adressen optioneel naar 1P- en 3P SIEM-providers te sturen met behulp van de Chrome Enterprise Reporting-connector. Dit zal beschikbaar zijn voor Chrome Enterprise Core-klanten.

JavaScript Promise-integratie

JavaScript Promise Integration (JSPI) is een API waarmee WebAssembly-applicaties kunnen integreren met JavaScript Promises. Hierdoor kan een WebAssembly-programma fungeren als de generator van een Promise, en kan het WebAssembly-programma communiceren met Promise-dragende API's. Met name wanneer een applicatie JSPI gebruikt om een ​​Promise-bearing (JavaScript) API aan te roepen, wordt de WebAssembly-code opgeschort; en de oorspronkelijke aanroeper van het WebAssembly-programma krijgt een belofte die zal worden vervuld wanneer het WebAssembly-programma eindelijk is voltooid.

Taaldetector-API

De Language Detector API is een JavaScript-API die de taal van een opgegeven tekenreeks identificeert. Deze API wordt ondersteund door een onderliggend model dat is afgestemd om taaldetectietaken uit te voeren.

Gegeven een tekenreeks retourneert de Language Detector API een geordende lijst van de gedetecteerde talen, samen met een betrouwbaarheidsscore voor elk resultaat.

Optioneel kunnen ontwikkelaars een lijst met verwachte invoertalen doorgeven bij het maken van een Language Detector-instantie om te helpen optimaliseren voor gebruiksscenario's waarbij naar verwachting detectie wordt uitgevoerd op bepaalde talen.

Beperk float-attributen en argumenten op SVGMatrix , SVGRect en SVGPoint

Wanneer u float-attributen of argumenten instelt op SVGMatrix , SVGRect en SVGPoint , kunt u ze nu niet instellen als Infinity of Nan . Er wordt een JavaScript-uitzondering gegenereerd als u deze probeert in te stellen, zoals gedefinieerd in de SVG-specificatie.

Selectie-API getComposedRanges en direction

Deze functie levert twee nieuwe API-methoden voor de Selectie-API:

• Selection.direction die de richting van de selectie retourneert als "none" , "forward" of "backward"
• Selection.getComposedRanges() die een lijst met 0 of 1 "samengestelde" StaticRange retourneert

Een "samengestelde" StaticRange mag schaduwgrenzen overschrijden, wat normale Ranges niet kunnen.

Bijvoorbeeld:

const range = getSelection().getComposedRanges({ shadowRoots: [root] });

Als de selectie een schaduwwortelgrens overschrijdt die niet in de shadowRoots -lijst staat, worden de eindpunten van de StaticRange "opnieuw ingeschaald" zodat ze buiten die boom vallen. Dit zorgt ervoor dat we geen onbekende schaduwbomen blootleggen.

Bereikextensies voor web-apps

Voegt een scope_extensions web-app-manifestveld toe waarmee web-apps hun bereik kunnen uitbreiden naar andere oorsprongen.

Voorbeeld:

{
  "name": "Example",
  "display": "standalone",
  "start_url": "/index.html",
  "scope_extensions": [
    {"type" : "type", "origin" : "https://example.com"}
  ]
}

Hierdoor kunnen sites die meerdere subdomeinen en topniveaudomeinen beheren, als één webapp worden gepresenteerd.

Vereist vermelde oorsprongen om de koppeling met de web-app te bevestigen met behulp van een configuratiebestand .well-known/web-app-origin-association .

{
  "https://sample-app.com/": {
    "scope": "/"
  }
}

WebAssembly Branch-tips

Verbetert de prestaties van gecompileerde WebAssembly-code door de engine te informeren dat een bepaalde vertakkingsinstructie zeer waarschijnlijk een specifiek pad zal volgen. Hierdoor kan de engine betere beslissingen nemen over de code-indeling (het verbeteren van instructiecachehits) en registertoewijzing.

WebGPU: GPUTextureView voor externalTexture binding

Een GPUTextureView mag nu worden gebruikt voor een externalTexture binding bij het maken van een GPUBindGroup .

WebGPU: copyBufferToBuffer overbelasting

De GPUCommandEncoder copyBufferToBuffer() -methode bevat nu een eenvoudigere manier om volledige buffers te kopiëren met behulp van een nieuwe overbelasting met optionele offsets en grootteparameters.

Nieuwe oorsprongsproeven

In Chrome 137 kunt u zich aanmelden voor de volgende nieuwe origin-proefversies .

Renderblokkeringsattribuut met volledige framesnelheid

Voegt een nieuw weergaveblokkeringstoken met volledige framesnelheid toe aan de blokkerende kenmerken. Wanneer de renderer wordt geblokkeerd met het token met volledige framesnelheid, werkt de renderer met een lagere framesnelheid om zo meer bronnen te reserveren voor het laden.

Pauzeer het afspelen van media op niet-gerenderde iframes

Voegt een toestemmingsbeleid "media-playback-while-not-rendered" toe, zodat insluitwebsites het afspelen van media kunnen pauzeren van ingebedde iframes die niet worden weergegeven, dat wil zeggen dat hun eigenschap 'display' is ingesteld op 'none'. Dit zou ontwikkelaars in staat moeten stellen gebruiksvriendelijkere ervaringen op te bouwen en ook de prestaties te verbeteren door de browser het afspelen van inhoud te laten regelen die niet zichtbaar is voor gebruikers.

Rewriter-API

De Rewriter API transformeert en herformuleert invoertekst op de gevraagde manieren, ondersteund door een AI-taalmodel op het apparaat. Ontwikkelaars kunnen deze API gebruiken om overbodigheden in een tekst te verwijderen om binnen een woordlimiet te passen, berichten opnieuw te formuleren zodat ze bij de beoogde doelgroep passen of om constructiever te zijn als blijkt dat een bericht giftige taal gebruikt, een bericht of artikel te herformuleren om eenvoudigere woorden en concepten te gebruiken en meer.

Schrijver-API

De Writer API kan worden gebruikt voor het schrijven van nieuw materiaal, gegeven een schrijftaakprompt, ondersteund door een AI-taalmodel op het apparaat. Ontwikkelaars kunnen deze API gebruiken om tekstuele uitleg van gestructureerde gegevens te genereren, een bericht over een product op te stellen op basis van recensies of productbeschrijvingen, pro- en contra-lijsten uit te breiden tot volledige weergaven en meer.

Rachel Andrew

Gepubliceerd: 1 mei 2025

Tenzij anders aangegeven, zijn de volgende wijzigingen van toepassing op de nieuwste release van het Chrome-bètakanaal voor Android, ChromeOS, Linux, macOS en Windows. Lees meer over de hier genoemde functies via de aangeboden links of via de lijst op ChromeStatus.com. Chrome 130 is vanaf 30 april 2025 een bètaversie. Je kunt het nieuwste downloaden op Google.com voor desktop of in de Google Play Store op Android.

CSS en gebruikersinterface

Deze release voegt zeven nieuwe CSS- en UI-functies toe.

De if() functie

De CSS if() functie biedt een beknopte manier om voorwaardelijke waarden uit te drukken. Het accepteert een reeks voorwaarde-waardeparen, begrensd door puntkomma's. De functie evalueert elke voorwaarde opeenvolgend en retourneert de waarde die bij de eerste ware voorwaarde hoort. Als geen van de voorwaarden waar is, retourneert de functie een lege tokenstroom. Hiermee kunt u complexe voorwaardelijke logica op een eenvoudige en beknopte manier uitdrukken. Voorbeeld:

div {
      color: var(--color);
      background-color: if(style(--color: white): black; else: white);
  }
  .dark {
      --color: black;
  }
  .light {
      --color: white;
  }

<div class="dark">dark</div>
<div class="light">light</div>

De eigenschappen van reading-flow en reading-order

De CSS-eigenschap reading-flow bepaalt de volgorde waarin elementen in een flex-, raster- of blokindeling worden blootgesteld aan toegankelijkheidshulpmiddelen en gefocust met behulp van tabtoetsenbordfocusnavigatie. Er is een van de volgende zoekwoordwaarden voor nodig:

• normal
• flex-visual
• flex-flow
• grid-rows
• grid-columns
• grid-order
• source-order

Met de CSS-eigenschap reading-order kunt u de volgorde binnen een leesstroomcontainer handmatig overschrijven. Het is een geheel getal met de standaardwaarde 0.

Lees voor meer informatie Gebruik CSS-leesstroom voor logische sequentiële focusnavigatie en probeer enkele voorbeelden van leesstroom .

offset-path: shape()

De functie shape() wordt al ondersteund in clip-path en maakt responsief knippen mogelijk. Als u dit ook inschakelt voor offset-path wordt een klein gat gedicht waar dezelfde soort vorm voor die eigenschap kan worden gebruikt.

Ondersteuning van transformatiekenmerk op SVGSVGElement

Deze functie maakt de toepassing mogelijk van transformatie-eigenschappen, zoals schalen, roteren, translatie en scheeftrekken, rechtstreeks op het <svg> hoofdelement met behulp van het transform-attribuut. Met deze verbetering kunt u het volledige SVG-coördinatensysteem of de inhoud ervan als geheel manipuleren, waardoor u meer flexibiliteit krijgt bij het maken van dynamische, responsieve en interactieve vectorafbeeldingen. Door dit kenmerk te ondersteunen kan het SVG-element worden getransformeerd zonder dat er extra wrapper-elementen of complexe CSS-oplossingen nodig zijn, waardoor het proces van het bouwen van schaalbare en geanimeerde webafbeeldingen wordt gestroomlijnd.

Laat <use> verwijzen naar het hoofdelement van een extern document door het fragment weg te laten.

In deze functie stroomlijnen we het SVG <use> -element door de verwijzingsvereisten te versoepelen. Momenteel moet u expliciet naar fragmenten verwijzen in het SVG-document. Als er geen fragment-ID wordt opgegeven, kan <use> het doel niet omzetten en wordt er niets weergegeven of verwezen.

Met deze functie zal het weglaten van fragmenten of het alleen geven van de externe SVG-bestandsnaam automatisch naar het root-element verwijzen, waardoor u het document waarnaar verwezen wordt niet meer hoeft te wijzigen alleen maar om een ​​ID aan de root toe te wijzen. Deze verbetering vereenvoudigt dit handmatige bewerkingsproces en verbetert de efficiëntie.

Systeemaccentkleur voor accent-color uitgebreid naar Windows en ChromeOS

Hierdoor kunt u de accentkleur van het besturingssysteem gebruiken voor formulierelementen. Door de CSS-eigenschap accent-color te gebruiken, kunt u ervoor zorgen dat formulierelementen zoals selectievakjes, keuzerondjes en voortgangsbalken automatisch de accentkleur aannemen die is gedefinieerd door het besturingssysteem van de gebruiker. Dit wordt sinds 2021 ondersteund op macOS en wordt nu ondersteund op Windows en ChromeOS.

view-transition-name: match-element

De match-element voor de view-transition eigenschap genereert een unieke ID op basis van de identiteit van het element en blijft hetzelfde voor dit element. Dit wordt gebruikt in gevallen waarin het element wordt verplaatst en u het wilt animeren met een weergaveovergang.

Web-API's

Uitlijningsfouttype gegenereerd bij het maken van WebAuthn-referenties voor 'betaling'

Corrigeert het fouttype dat wordt gegenereerd tijdens het aanmaken van WebAuthn-referenties voor payment . Vanwege een historische specificatie die niet overeenkomt, zou het creëren van een payment in een cross-origin iframe zonder gebruikersactivatie een SecurityError genereren in plaats van een NotAllowedError , wat wordt gegenereerd voor niet-betalingsreferenties. Dit is een baanbrekende verandering. Code die eerder het type fout heeft gedetecteerd (bijvoorbeeld e instanceof SecurityError ), zou hierdoor worden beïnvloed. Code die in het algemeen fouten afhandelt tijdens het maken van inloggegevens (bijvoorbeeld catch (e) ) blijft correct functioneren.

Blob-URL-partitionering: ophalen/navigeren

Als voortzetting van Storage Partitioning implementeert dit het partitioneren van Blob-URL-toegang via Storage Key (site op het hoogste niveau, frame-oorsprong en de has-cross-site-ancestor boolean), met uitzondering van navigatie op het hoogste niveau, die alleen gepartitioneerd blijft op frame-oorsprong.

Deze wijziging kan tijdelijk worden teruggedraaid door het PartitionedBlobURLUsage -beleid in te stellen. Het beleid wordt beëindigd wanneer het andere bedrijfsbeleid dat betrekking heeft op opslagpartitionering wordt beëindigd.

Oproepstapels in crashrapporten van niet-reagerende webpagina's

Deze functie legt de JavaScript-aanroepstack vast wanneer een webpagina niet meer reageert omdat JavaScript-code een oneindige lus of een andere zeer lange berekening uitvoert. Dit helpt ontwikkelaars om de oorzaak van het niet reageren te identificeren en deze gemakkelijker op te lossen. De JavaScript-aanroepstack wordt opgenomen in de crashrapportage-API als de reden niet reageert.

Kleurtypen met drijvende komma voor canvas

Introduceert de mogelijkheid om pixelformaten met drijvende komma te gebruiken (in tegenstelling tot een 8-bits vast punt) met CanvasRenderingContext2D , OffscreenCanvasRenderingContext2D en ImageData . Dit is nodig voor toepassingen met hoge precisie (bijvoorbeeld medische visualisatie), inhoud met een hoog dynamisch bereik en lineaire werkkleurruimten.

Niet-betrouwbare HTTP-prerendering in platte tekst niet toestaan

Momenteel is pre-rendering toegestaan ​​via HTTP en HTTPS, terwijl prefetch alleen via HTTPS werkt. Beperk pre-rendering zodat deze consistent is met prefetch.

Document-isolatiebeleid

Met Document-Isolation-Policy kan een document crossOriginIsolation voor zichzelf inschakelen, zonder COOP of COEP te hoeven inzetten, en ongeacht de crossOriginIsolation -status van de pagina. Het beleid wordt ondersteund door procesisolatie. Bovendien worden de niet-CORS cross-origin-subbronnen van het document geladen zonder inloggegevens of moeten ze een CORP-header hebben.

Lees meer in Documentisolatiebeleid: schakel eenvoudig krachtige webfuncties in .

Ed25519 in webcryptografie

Deze functie voegt ondersteuning toe voor Curve25519-algoritmen in de Web Cryptography API, namelijk het handtekeningalgoritme Ed25519

Registratie en rapportage van IP-adressen

Chrome Enterprise verbetert de mogelijkheden voor beveiligingsmonitoring en respons op incidenten door lokale en externe IP-adressen te verzamelen en te rapporteren en deze IP-adressen naar de Security Investigation Logs (SIT) te sturen. Daarnaast biedt Chrome Enterprise beheerders de mogelijkheid om de IP-adressen optioneel naar 1P- en 3P SIEM-providers te sturen met behulp van de Chrome Enterprise Reporting-connector. Dit zal beschikbaar zijn voor Chrome Enterprise Core-klanten.

JavaScript Promise-integratie

JavaScript Promise Integration (JSPI) is een API waarmee WebAssembly-applicaties kunnen integreren met JavaScript Promises. Hierdoor kan een WebAssembly-programma fungeren als de generator van een Promise, en kan het WebAssembly-programma communiceren met Promise-dragende API's. Met name wanneer een applicatie JSPI gebruikt om een ​​Promise-bearing (JavaScript) API aan te roepen, wordt de WebAssembly-code opgeschort; en de oorspronkelijke aanroeper van het WebAssembly-programma krijgt een belofte die zal worden vervuld wanneer het WebAssembly-programma eindelijk is voltooid.

Taaldetector-API

De Language Detector API is een JavaScript-API die de taal van een opgegeven tekenreeks identificeert. Deze API wordt ondersteund door een onderliggend model dat is afgestemd om taaldetectietaken uit te voeren.

Gegeven een tekenreeks retourneert de Language Detector API een geordende lijst van de gedetecteerde talen, samen met een betrouwbaarheidsscore voor elk resultaat.

Optioneel kunnen ontwikkelaars een lijst met verwachte invoertalen doorgeven bij het maken van een Language Detector-instantie om te helpen optimaliseren voor gebruiksscenario's waarbij naar verwachting detectie wordt uitgevoerd op bepaalde talen.

Beperk float-attributen en argumenten op SVGMatrix , SVGRect en SVGPoint

Wanneer u float-attributen of argumenten instelt op SVGMatrix , SVGRect en SVGPoint , kunt u ze nu niet instellen als Infinity of Nan . Er wordt een JavaScript-uitzondering gegenereerd als u deze probeert in te stellen, zoals gedefinieerd in de SVG-specificatie.

Selectie-API getComposedRanges en direction

Deze functie levert twee nieuwe API-methoden voor de Selectie-API:

• Selection.direction die de richting van de selectie retourneert als "none" , "forward" of "backward"
• Selection.getComposedRanges() die een lijst met 0 of 1 "samengestelde" StaticRange retourneert

Een "samengestelde" StaticRange mag schaduwgrenzen overschrijden, wat normale Ranges niet kunnen.

Bijvoorbeeld:

const range = getSelection().getComposedRanges({ shadowRoots: [root] });

Als de selectie een schaduwwortelgrens overschrijdt die niet in de shadowRoots -lijst staat, worden de eindpunten van de StaticRange "opnieuw ingeschaald" zodat ze buiten die boom vallen. Dit zorgt ervoor dat we geen onbekende schaduwbomen blootleggen.

Bereikextensies voor web-apps

Voegt een scope_extensions web-app-manifestveld toe waarmee web-apps hun bereik kunnen uitbreiden naar andere oorsprongen.

Voorbeeld:

{
  "name": "Example",
  "display": "standalone",
  "start_url": "/index.html",
  "scope_extensions": [
    {"type" : "type", "origin" : "https://example.com"}
  ]
}

Hierdoor kunnen sites die meerdere subdomeinen en topniveaudomeinen beheren, als één webapp worden gepresenteerd.

Vereist vermelde oorsprongen om de koppeling met de web-app te bevestigen met behulp van een configuratiebestand .well-known/web-app-origin-association .

{
  "https://sample-app.com/": {
    "scope": "/"
  }
}

WebAssembly Branch-tips

Verbetert de prestaties van gecompileerde WebAssembly-code door de engine te informeren dat een bepaalde vertakkingsinstructie zeer waarschijnlijk een specifiek pad zal volgen. Hierdoor kan de engine betere beslissingen nemen over de code-indeling (het verbeteren van instructiecachehits) en registertoewijzing.

WebGPU: GPUTextureView voor externalTexture binding

Een GPUTextureView mag nu worden gebruikt voor een externalTexture binding bij het maken van een GPUBindGroup .

WebGPU: copyBufferToBuffer overbelasting

De GPUCommandEncoder copyBufferToBuffer() -methode bevat nu een eenvoudigere manier om volledige buffers te kopiëren met behulp van een nieuwe overbelasting met optionele offsets en grootteparameters.

Nieuwe oorsprongsproeven

In Chrome 137 kunt u zich aanmelden voor de volgende nieuwe origin-proefversies .

Renderblokkeringsattribuut met volledige framesnelheid

Voegt een nieuw weergaveblokkeringstoken met volledige framesnelheid toe aan de blokkerende kenmerken. Wanneer de renderer wordt geblokkeerd met het token met volledige framesnelheid, werkt de renderer met een lagere framesnelheid om zo meer bronnen te reserveren voor het laden.

Pauzeer het afspelen van media op niet-gerenderde iframes

Voegt een toestemmingsbeleid "media-playback-while-not-rendered" toe, zodat insluitwebsites het afspelen van media kunnen pauzeren van ingebedde iframes die niet worden weergegeven, dat wil zeggen dat hun eigenschap 'display' is ingesteld op 'none'. Dit zou ontwikkelaars in staat moeten stellen gebruiksvriendelijkere ervaringen op te bouwen en ook de prestaties te verbeteren door de browser het afspelen van inhoud te laten regelen die niet zichtbaar is voor gebruikers.

Rewriter-API

De Rewriter API transformeert en herformuleert invoertekst op de gevraagde manieren, ondersteund door een AI-taalmodel op het apparaat. Ontwikkelaars kunnen deze API gebruiken om overbodigheden in een tekst te verwijderen om binnen een woordlimiet te passen, berichten opnieuw te formuleren zodat ze bij de beoogde doelgroep passen of om constructiever te zijn als blijkt dat een bericht giftige taal gebruikt, een bericht of artikel te herformuleren om eenvoudigere woorden en concepten te gebruiken en meer.

Schrijver-API

De Writer API kan worden gebruikt voor het schrijven van nieuw materiaal, gegeven een schrijftaakprompt, ondersteund door een AI-taalmodel op het apparaat. Ontwikkelaars kunnen deze API gebruiken om tekstuele uitleg van gestructureerde gegevens te genereren, een bericht over een product op te stellen op basis van recensies of productbeschrijvingen, pro- en contra-lijsten uit te breiden tot volledige weergaven en meer.

Rachel Andrew

Gepubliceerd: 1 mei 2025

Tenzij anders aangegeven, zijn de volgende wijzigingen van toepassing op de nieuwste release van het Chrome-bètakanaal voor Android, ChromeOS, Linux, macOS en Windows. Lees meer over de hier genoemde functies via de aangeboden links of via de lijst op ChromeStatus.com. Chrome 130 is vanaf 30 april 2025 een bètaversie. Je kunt het nieuwste downloaden op Google.com voor desktop of in de Google Play Store op Android.

CSS en gebruikersinterface

Deze release voegt zeven nieuwe CSS- en UI-functies toe.

De if() functie

De CSS if() functie biedt een beknopte manier om voorwaardelijke waarden uit te drukken. Het accepteert een reeks voorwaarde-waardeparen, begrensd door puntkomma's. De functie evalueert elke voorwaarde opeenvolgend en retourneert de waarde die bij de eerste ware voorwaarde hoort. Als geen van de voorwaarden waar is, retourneert de functie een lege tokenstroom. Hiermee kunt u complexe voorwaardelijke logica op een eenvoudige en beknopte manier uitdrukken. Voorbeeld:

div {
      color: var(--color);
      background-color: if(style(--color: white): black; else: white);
  }
  .dark {
      --color: black;
  }
  .light {
      --color: white;
  }

<div class="dark">dark</div>
<div class="light">light</div>

De eigenschappen van reading-flow en reading-order

De CSS-eigenschap reading-flow bepaalt de volgorde waarin elementen in een flex-, raster- of blokindeling worden blootgesteld aan toegankelijkheidshulpmiddelen en gefocust met behulp van tabtoetsenbordfocusnavigatie. Er is een van de volgende zoekwoordwaarden voor nodig:

• normal
• flex-visual
• flex-flow
• grid-rows
• grid-columns
• grid-order
• source-order

Met de CSS-eigenschap reading-order kunt u de volgorde binnen een leesstroomcontainer handmatig overschrijven. Het is een geheel getal met de standaardwaarde 0.

Lees voor meer informatie Gebruik CSS-leesstroom voor logische sequentiële focusnavigatie en probeer enkele voorbeelden van leesstroom .

offset-path: shape()

De functie shape() wordt al ondersteund in clip-path en maakt responsief knippen mogelijk. Als u dit ook inschakelt voor offset-path wordt een klein gat gedicht waar dezelfde soort vorm voor die eigenschap kan worden gebruikt.

Ondersteuning van transformatiekenmerk op SVGSVGElement

Deze functie maakt de toepassing mogelijk van transformatie-eigenschappen, zoals schalen, roteren, translatie en scheeftrekken, rechtstreeks op het <svg> hoofdelement met behulp van het transform-attribuut. Met deze verbetering kunt u het volledige SVG-coördinatensysteem of de inhoud ervan als geheel manipuleren, waardoor u meer flexibiliteit krijgt bij het maken van dynamische, responsieve en interactieve vectorafbeeldingen. Door dit kenmerk te ondersteunen kan het SVG-element worden getransformeerd zonder dat er extra wrapper-elementen of complexe CSS-oplossingen nodig zijn, waardoor het proces van het bouwen van schaalbare en geanimeerde webafbeeldingen wordt gestroomlijnd.

Laat <use> verwijzen naar het hoofdelement van een extern document door het fragment weg te laten.

In deze functie stroomlijnen we het SVG <use> -element door de verwijzingsvereisten te versoepelen. Momenteel moet u expliciet naar fragmenten verwijzen in het SVG-document. Als er geen fragment-ID wordt opgegeven, kan <use> het doel niet omzetten en wordt er niets weergegeven of verwezen.

Met deze functie zal het weglaten van fragmenten of het alleen geven van de externe SVG-bestandsnaam automatisch naar het root-element verwijzen, waardoor u het document waarnaar verwezen wordt niet meer hoeft te wijzigen alleen maar om een ​​ID aan de root toe te wijzen. Deze verbetering vereenvoudigt dit handmatige bewerkingsproces en verbetert de efficiëntie.

Systeemaccentkleur voor accent-color uitgebreid naar Windows en ChromeOS

Hierdoor kunt u de accentkleur van het besturingssysteem gebruiken voor formulierelementen. Door de CSS-eigenschap accent-color te gebruiken, kunt u ervoor zorgen dat formulierelementen zoals selectievakjes, keuzerondjes en voortgangsbalken automatisch de accentkleur aannemen die is gedefinieerd door het besturingssysteem van de gebruiker. Dit wordt sinds 2021 ondersteund op macOS en wordt nu ondersteund op Windows en ChromeOS.

view-transition-name: match-element

De match-element voor de view-transition eigenschap genereert een unieke ID op basis van de identiteit van het element en blijft hetzelfde voor dit element. Dit wordt gebruikt in gevallen waarin het element wordt verplaatst en u het wilt animeren met een weergaveovergang.

Web-API's

Uitlijningsfouttype gegenereerd bij het maken van WebAuthn-referenties voor 'betaling'

Corrigeert het fouttype dat wordt gegenereerd tijdens het aanmaken van WebAuthn-referenties voor payment . Vanwege een historische specificatie die niet overeenkomt, zou het creëren van een payment in een cross-origin iframe zonder gebruikersactivatie een SecurityError genereren in plaats van een NotAllowedError , wat wordt gegenereerd voor niet-betalingsreferenties. Dit is een baanbrekende verandering. Code die eerder het type fout heeft gedetecteerd (bijvoorbeeld e instanceof SecurityError ), zou hierdoor worden beïnvloed. Code die in het algemeen fouten afhandelt tijdens het maken van inloggegevens (bijvoorbeeld catch (e) ) blijft correct functioneren.

Blob-URL-partitionering: ophalen/navigeren

Als voortzetting van Storage Partitioning implementeert dit het partitioneren van Blob-URL-toegang via Storage Key (site op het hoogste niveau, frame-oorsprong en de has-cross-site-ancestor boolean), met uitzondering van navigatie op het hoogste niveau, die alleen gepartitioneerd blijft op frame-oorsprong.

Deze wijziging kan tijdelijk worden teruggedraaid door het PartitionedBlobURLUsage -beleid in te stellen. Het beleid wordt beëindigd wanneer het andere bedrijfsbeleid dat betrekking heeft op opslagpartitionering wordt beëindigd.

Oproepstapels in crashrapporten van niet-reagerende webpagina's

Deze functie legt de JavaScript-aanroepstack vast wanneer een webpagina niet meer reageert omdat JavaScript-code een oneindige lus of een andere zeer lange berekening uitvoert. Dit helpt ontwikkelaars om de oorzaak van het niet reageren te identificeren en deze gemakkelijker op te lossen. De JavaScript-aanroepstack wordt opgenomen in de crashrapportage-API als de reden niet reageert.

Kleurtypen met drijvende komma voor canvas

Introduceert de mogelijkheid om pixelformaten met drijvende komma te gebruiken (in tegenstelling tot een 8-bits vast punt) met CanvasRenderingContext2D , OffscreenCanvasRenderingContext2D en ImageData . Dit is nodig voor toepassingen met hoge precisie (bijvoorbeeld medische visualisatie), inhoud met een hoog dynamisch bereik en lineaire werkkleurruimten.

Niet-betrouwbare HTTP-prerendering in platte tekst niet toestaan

Momenteel is pre-rendering toegestaan ​​via HTTP en HTTPS, terwijl prefetch alleen via HTTPS werkt. Beperk pre-rendering zodat deze consistent is met prefetch.

Document-isolatiebeleid

Met Document-Isolation-Policy kan een document crossOriginIsolation voor zichzelf inschakelen, zonder COOP of COEP te hoeven inzetten, en ongeacht de crossOriginIsolation -status van de pagina. Het beleid wordt ondersteund door procesisolatie. Bovendien worden de niet-CORS cross-origin-subbronnen van het document geladen zonder inloggegevens of moeten ze een CORP-header hebben.

Lees meer in Documentisolatiebeleid: schakel eenvoudig krachtige webfuncties in .

Ed25519 in webcryptografie

Deze functie voegt ondersteuning toe voor Curve25519-algoritmen in de Web Cryptography API, namelijk het handtekeningalgoritme Ed25519

Registratie en rapportage van IP-adressen

Chrome Enterprise verbetert de mogelijkheden voor beveiligingsmonitoring en respons op incidenten door lokale en externe IP-adressen te verzamelen en te rapporteren en deze IP-adressen naar de Security Investigation Logs (SIT) te sturen. Daarnaast biedt Chrome Enterprise beheerders de mogelijkheid om de IP-adressen optioneel naar 1P- en 3P SIEM-providers te sturen met behulp van de Chrome Enterprise Reporting-connector. Dit zal beschikbaar zijn voor Chrome Enterprise Core-klanten.

JavaScript Promise-integratie

JavaScript Promise Integration (JSPI) is een API waarmee WebAssembly-applicaties kunnen integreren met JavaScript Promises. Hierdoor kan een WebAssembly-programma fungeren als de generator van een Promise, en kan het WebAssembly-programma communiceren met Promise-dragende API's. Met name wanneer een applicatie JSPI gebruikt om een ​​Promise-bearing (JavaScript) API aan te roepen, wordt de WebAssembly-code opgeschort; en de oorspronkelijke aanroeper van het WebAssembly-programma krijgt een belofte die zal worden vervuld wanneer het WebAssembly-programma eindelijk is voltooid.

Taaldetector-API

De Language Detector API is een JavaScript-API die de taal van een opgegeven tekenreeks identificeert. Deze API wordt ondersteund door een onderliggend model dat is afgestemd om taaldetectietaken uit te voeren.

Gegeven een tekenreeks retourneert de Language Detector API een geordende lijst van de gedetecteerde talen, samen met een betrouwbaarheidsscore voor elk resultaat.

Optioneel kunnen ontwikkelaars een lijst met verwachte invoertalen doorgeven bij het maken van een Language Detector-instantie om te helpen optimaliseren voor gebruiksscenario's waarbij naar verwachting detectie wordt uitgevoerd op bepaalde talen.

Beperk float-attributen en argumenten op SVGMatrix , SVGRect en SVGPoint

Wanneer u float-attributen of argumenten instelt op SVGMatrix , SVGRect en SVGPoint , kunt u ze nu niet instellen als Infinity of Nan . Er wordt een JavaScript-uitzondering gegenereerd als u deze probeert in te stellen, zoals gedefinieerd in de SVG-specificatie.

Selectie-API getComposedRanges en direction

Deze functie levert twee nieuwe API-methoden voor de Selectie-API:

• Selection.direction die de richting van de selectie retourneert als "none" , "forward" of "backward"
• Selection.getComposedRanges() die een lijst met 0 of 1 "samengestelde" StaticRange retourneert

Een "samengestelde" StaticRange mag schaduwgrenzen overschrijden, wat normale Ranges niet kunnen.

Bijvoorbeeld:

const range = getSelection().getComposedRanges({ shadowRoots: [root] });

Als de selectie een schaduwwortelgrens overschrijdt die niet in de shadowRoots -lijst staat, worden de eindpunten van de StaticRange "opnieuw ingeschaald" zodat ze buiten die boom vallen. Dit zorgt ervoor dat we geen onbekende schaduwbomen blootleggen.

Bereikextensies voor web-apps

Voegt een scope_extensions web-app-manifestveld toe waarmee web-apps hun bereik kunnen uitbreiden naar andere oorsprongen.

Voorbeeld:

{
  "name": "Example",
  "display": "standalone",
  "start_url": "/index.html",
  "scope_extensions": [
    {"type" : "type", "origin" : "https://example.com"}
  ]
}

Hierdoor kunnen sites die meerdere subdomeinen en topniveaudomeinen beheren, als één webapp worden gepresenteerd.

Vereist vermelde oorsprongen om de koppeling met de web-app te bevestigen met behulp van een configuratiebestand .well-known/web-app-origin-association .

{
  "https://sample-app.com/": {
    "scope": "/"
  }
}

WebAssembly Branch-tips

Verbetert de prestaties van gecompileerde WebAssembly-code door de engine te informeren dat een bepaalde vertakkingsinstructie zeer waarschijnlijk een specifiek pad zal volgen. Hierdoor kan de engine betere beslissingen nemen over de code-indeling (het verbeteren van instructiecachehits) en registertoewijzing.

WebGPU: GPUTextureView voor externalTexture binding

Een GPUTextureView mag nu worden gebruikt voor een externalTexture binding bij het maken van een GPUBindGroup .

WebGPU: copyBufferToBuffer overbelasting

De GPUCommandEncoder copyBufferToBuffer() -methode bevat nu een eenvoudigere manier om volledige buffers te kopiëren met behulp van een nieuwe overbelasting met optionele offsets en grootteparameters.

Nieuwe oorsprongsproeven

In Chrome 137 kunt u zich aanmelden voor de volgende nieuwe origin-proefversies .

Renderblokkeringsattribuut met volledige framesnelheid

Voegt een nieuw weergaveblokkeringstoken met volledige framesnelheid toe aan de blokkerende kenmerken. Wanneer de renderer wordt geblokkeerd met het token met volledige framesnelheid, werkt de renderer met een lagere framesnelheid om zo meer bronnen te reserveren voor het laden.

Pauzeer het afspelen van media op niet-gerenderde iframes

Voegt een toestemmingsbeleid "media-playback-while-not-rendered" toe, zodat insluitwebsites het afspelen van media kunnen pauzeren van ingebedde iframes die niet worden weergegeven, dat wil zeggen dat hun eigenschap 'display' is ingesteld op 'none'. Dit zou ontwikkelaars in staat moeten stellen gebruiksvriendelijkere ervaringen op te bouwen en ook de prestaties te verbeteren door de browser het afspelen van inhoud te laten regelen die niet zichtbaar is voor gebruikers.

Rewriter-API

De Rewriter API transformeert en herformuleert invoertekst op de gevraagde manieren, ondersteund door een AI-taalmodel op het apparaat. Ontwikkelaars kunnen deze API gebruiken om overbodigheden in een tekst te verwijderen om binnen een woordlimiet te passen, berichten opnieuw te formuleren zodat ze bij de beoogde doelgroep passen of om constructiever te zijn als blijkt dat een bericht giftige taal gebruikt, een bericht of artikel te herformuleren om eenvoudigere woorden en concepten te gebruiken en meer.

Schrijver-API

De Writer API kan worden gebruikt voor het schrijven van nieuw materiaal, gegeven een schrijftaakprompt, ondersteund door een AI-taalmodel op het apparaat. Ontwikkelaars kunnen deze API gebruiken om tekstuele uitleg van gestructureerde gegevens te genereren, een bericht over een product op te stellen op basis van recensies of productbeschrijvingen, pro- en contra-lijsten uit te breiden tot volledige weergaven en meer.