Chrome 137 bèta

Rachel Andrew

Gepubliceerd: 1 mei 2025

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 130 is een bètaversie vanaf 30 april 2025. U kunt de nieuwste versie downloaden op Google.com voor desktop of in de Google Play Store voor Android.

CSS en UI

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

De if() -functie

De CSS-functie if() biedt een beknopte manier om voorwaardelijke waarden uit te drukken. De functie accepteert een reeks voorwaarde-waardeparen, gescheiden door puntkomma's. Elke voorwaarde wordt achtereenvolgens geëvalueerd en de waarde die hoort bij de eerste voorwaarde die waar is, wordt geretourneerd. Als geen van de voorwaarden waar is, retourneert de functie een lege tokenstroom. Hierdoor 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 reading-flow en reading-order

De CSS-eigenschap ` reading-flow bepaalt de volgorde waarin elementen in een flex-, grid- of block-layout worden weergegeven aan toegankelijkheidstools en worden geselecteerd met behulp van tab-navigatie. Deze eigenschap accepteert een van de volgende trefwoordwaarden:

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

Met de CSS-eigenschap ` reading-order kunt u handmatig de leesvolgorde binnen een leesstroomcontainer wijzigen. Het is een geheel getal met een standaardwaarde van 0.

Lees voor meer informatie 'CSS reading-flow gebruiken voor logische, opeenvolgende focusnavigatie' en probeer enkele voorbeelden van reading-flow uit.

offset-path: shape()

De functie shape() wordt al ondersteund in clip-path en maakt responsief knippen mogelijk. Door deze functie ook voor offset-path in te schakelen, wordt een klein hiaat gedicht waar hetzelfde type vorm voor die eigenschap gebruikt kan worden.

Ondersteuning voor het transform-attribuut op SVGSVGElement

Deze functie maakt het mogelijk om transformatie-eigenschappen – zoals schalen, roteren, verschuiven en scheeftrekken – rechtstreeks toe te passen op het <svg> -hoofdelement met behulp van het transform-attribuut. Deze verbetering stelt u in staat om het volledige SVG-coördinatensysteem of de inhoud ervan te manipuleren, wat meer flexibiliteit biedt bij het creëren van dynamische, responsieve en interactieve vectorafbeeldingen. Door dit attribuut te ondersteunen, kan het SVG-element worden getransformeerd zonder dat extra wrapper-elementen of complexe CSS-oplossingen nodig zijn, waardoor het proces van het bouwen van schaalbare en geanimeerde webafbeeldingen wordt gestroomlijnd.

Sta toe dat <use> verwijst naar het hoofdelement van een extern document door het fragment weg te laten.

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

Met deze functie wordt, als u fragmenten weglaat of alleen de naam van het externe SVG-bestand opgeeft, automatisch naar het hoofdelement verwezen. Hierdoor hoeft u het document waarnaar wordt verwezen niet meer aan te passen om een ​​ID aan het hoofdelement toe te wijzen. Deze verbetering vereenvoudigt dit handmatige bewerkingsproces en verhoogt de efficiëntie.

Systeemaccentkleur voor de eigenschap accent-color uitgebreid naar Windows en ChromeOS.

Hiermee 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 overnemen die is gedefinieerd door het besturingssysteem van de gebruiker. Deze functie wordt sinds 2021 ondersteund op macOS en is nu ook beschikbaar voor Windows en ChromeOS.

view-transition-name: match-element

De waarde match-element voor de view-transition eigenschap genereert een unieke ID op basis van de identiteit van het element, die voor dat element hetzelfde blijft. Dit wordt gebruikt in Single Page Applications (SPA's) waarbij een element wordt verplaatst en je dit wilt animeren met een view transition.

Web-API's

Foutmelding van het type 'Align' die wordt weergegeven bij het aanmaken van WebAuthn-gegevens voor 'betaling'.

Corrigeert het fouttype dat wordt gegenereerd tijdens het aanmaken van WebAuthn-referenties voor payment . Vanwege een historische specificatiefout genereerde het aanmaken van payment in een cross-origin iframe zonder gebruikersactivering een SecurityError in plaats van een NotAllowedError , wat wel het geval is bij niet-betaalgegevens. Dit is een ingrijpende wijziging. Code die voorheen het type fout detecteerde (bijvoorbeeld ` e instanceof SecurityError ) wordt hierdoor beïnvloed. Code die in het algemeen fouten afhandelt tijdens het aanmaken van referenties (bijvoorbeeld ` catch (e) ) blijft correct functioneren.

Blob-URL-partitionering: Ophalen/Navigatie

Als voortzetting van opslagpartitionering implementeert dit de partitionering van toegang tot blob-URL's op basis van opslagsleutel (topsite, frame-oorsprong en de boolean-waarde ' has-cross-site-ancestor '), met uitzondering van navigaties op het hoogste niveau, die alleen gepartitioneerd blijven op basis van frame-oorsprong.

Deze wijziging kan tijdelijk ongedaan worden gemaakt door het beleid PartitionedBlobURLUsage in te stellen. Dit beleid wordt buiten werking gesteld zodra de andere bedrijfsbeleidsregels met betrekking tot opslagpartitionering ook buiten werking worden gesteld.

Oproepstapels in crashrapporten van niet-reagerende webpagina's

Deze functie legt de JavaScript-aanroepstack vast wanneer een webpagina niet meer reageert doordat JavaScript-code in een oneindige lus terechtkomt of een andere zeer langdurige berekening uitvoert. Dit helpt ontwikkelaars om de oorzaak van de onresponsiviteit te achterhalen en deze gemakkelijker te verhelpen. De JavaScript-aanroepstack wordt opgenomen in de crashrapportage-API wanneer de reden 'onresponsiviteit' is.

Canvas Floating Point Kleurtypen

Introduceert de mogelijkheid om pixelformaten met drijvende komma te gebruiken (in plaats van 8-bits vaste komma) met CanvasRenderingContext2D , OffscreenCanvasRenderingContext2D en ImageData . Dit is noodzakelijk voor toepassingen met hoge precisie (bijvoorbeeld medische visualisatie), content met een hoog dynamisch bereik en lineaire kleurruimtes.

Voorkom dat onbetrouwbare HTTP-prerendering in platte tekst wordt toegestaan.

Momenteel is prerendering toegestaan ​​via HTTP en HTTPS, terwijl prefetch alleen werkt via HTTPS. Beperk prerendering zodat het consistent is met prefetch.

Document-isolatiebeleid

Document-Isolation-Policy maakt het mogelijk dat een document crossOriginIsolation voor zichzelf inschakelt, zonder dat COOP of COEP hoeft te worden geïmplementeerd, en ongeacht de crossOriginIsolation status van de pagina. Het beleid wordt ondersteund door procesisolatie. Bovendien worden de niet-CORS cross-origin subresources van het document ofwel zonder referenties geladen, ofwel moeten ze een CORP-header hebben.

Lees meer in Documentisolatiebeleid: Schakel krachtige webfuncties eenvoudig in .

Ed25519 in Web Cryptography

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

Registratie en rapportage van IP-adressen

Chrome Enterprise verbetert de mogelijkheden voor beveiligingsmonitoring en incidentrespons door lokale en externe IP-adressen te verzamelen en te rapporteren en deze IP-adressen naar de Security Investigation Logs (SIT) te sturen. Daarnaast kunnen beheerders van Chrome Enterprise de IP-adressen optioneel naar SIEM-providers van eerste en derde partij sturen via de Chrome Enterprise Reporting-connector. Deze functie is beschikbaar voor Chrome Enterprise Core-klanten.

JavaScript Promise-integratie

JavaScript Promise Integration (JSPI) is een API waarmee WebAssembly-applicaties kunnen integreren met JavaScript Promises. Het stelt een WebAssembly-programma in staat om als generator van een Promise te fungeren en om te interageren met API's die Promises bevatten. Wanneer een applicatie JSPI gebruikt om een ​​Promise-bevattende (JavaScript) API aan te roepen, wordt de WebAssembly-code opgeschort en krijgt de oorspronkelijke aanroeper van het WebAssembly-programma een Promise die wordt vervuld zodra het WebAssembly-programma is voltooid.

Taaldetector-API

De Language Detector API is een JavaScript API die de taal van een opgegeven tekenreeks identificeert. Deze API is gebaseerd op een onderliggend model dat is geoptimaliseerd voor taaldetectie.

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

Optioneel kunnen ontwikkelaars bij het aanmaken van een Language Detector-instantie een lijst met verwachte invoertalen doorgeven. Dit helpt bij het optimaliseren voor gebruikssituaties waarin detectie op bepaalde talen moet worden uitgevoerd.

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

Bij het instellen van float-attributen of -argumenten op SVGMatrix , SVGRect en SVGPoint is het nu niet meer mogelijk om ze in te stellen als Infinity of Nan . Een JavaScript-uitzondering wordt gegenereerd als u dit probeert, zoals gedefinieerd in de SVG-specificatie.

Selectie-API getComposedRanges en direction

Deze functie introduceert twee nieuwe API-methoden voor de selectie-API:

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

Een "samengestelde" StaticRange mag schaduwgrenzen overschrijden, wat bij normale Ranges niet mogelijk is.

Bijvoorbeeld:

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

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

Web-app-bereikuitbreidingen

Voegt een veld scope_extensions toe aan het manifest van de webapp, waarmee webapps hun bereik kunnen uitbreiden naar andere origins.

Voorbeeld:

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

Dit maakt het mogelijk voor websites die meerdere subdomeinen en topdomeinen beheren om als één webapplicatie te worden gepresenteerd.

Vereist dat de vermelde origins de koppeling met de web-app bevestigen met behulp van een .well-known/web-app-origin-association configuratiebestand.

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

WebAssembly-vertakkingshints

Verbetert de prestaties van gecompileerde WebAssembly-code door de engine te laten weten dat een bepaalde vertakkingsinstructie zeer waarschijnlijk een specifiek pad zal volgen. Hierdoor kan de engine betere beslissingen nemen over de code-indeling (waardoor het aantal cache-hits bij instructies toeneemt) en de toewijzing van registers.

WebGPU: GPUTextureView voor externalTexture textuurbinding

Het is nu toegestaan ​​om een GPUTextureView te gebruiken voor een externalTexture binding bij het aanmaken van een GPUBindGroup .

WebGPU: copyBufferToBuffer -overbelasting

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

Nieuwe oorsprongsproeven

In Chrome 137 kun je je aanmelden voor de volgende nieuwe Origin-proefversies .

Volledige framesnelheid renderblokkeringsattribuut

Voegt een nieuw renderblokkeringstoken 'full-frame-rate' toe aan de blokkeringsattributen. Wanneer de renderer geblokkeerd is met het 'full-frame-rate'-token, zal de renderer op een lagere framesnelheid werken om meer resources te reserveren voor het laden.

Pauzeer de mediaweergave op iframes die nog niet zijn weergegeven.

Voegt een machtigingsbeleid "media-playback-while-not-rendered" toe, waarmee websites die media insluiten de weergave van ingesloten iframes die niet worden weergegeven (dat wil zeggen, waarvan de eigenschap "display" is ingesteld op "none") kunnen pauzeren. Dit zou ontwikkelaars in staat moeten stellen gebruiksvriendelijkere ervaringen te creëren en de prestaties te verbeteren doordat de browser de weergave van inhoud die niet zichtbaar is voor gebruikers afhandelt.

Rewriter API

De Rewriter API transformeert en herschrijft invoertekst op de door u gewenste manier, ondersteund door een lokaal AI-taalmodel. Ontwikkelaars kunnen deze API gebruiken om redundantie in een tekst te verwijderen om binnen een woordlimiet te blijven, berichten te herschrijven om ze beter af te stemmen op de beoogde doelgroep of om constructiever te zijn als een bericht kwetsende taal bevat, een bericht of artikel te herschrijven met eenvoudigere woorden en concepten, en nog veel meer.

Writer API

De Writer API kan worden gebruikt om nieuw materiaal te schrijven op basis van een schrijfopdracht, ondersteund door een lokaal AI-taalmodel. Ontwikkelaars kunnen deze API gebruiken om tekstuele uitleg van gestructureerde data te genereren, een bericht over een product te schrijven op basis van recensies of productbeschrijvingen, lijsten met voor- en nadelen uit te breiden tot volledige overzichten en meer.