Deze pagina is vertaald door de Cloud Translation API.

Chrome 108 bèta

Nieuwe CSS-viewport-eenheden, Federated Credential Management API, variabele COLRv1-lettertypen en meer.

Tenzij anders aangegeven, zijn de hieronder beschreven 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 108 is vanaf 27 oktober 2022 een bètaversie. Je kunt het nieuwste downloaden op Google.com voor desktop of in de Google Play Store op Android.

CSS

Chrome 108 bevat een aantal nieuwe CSS-functies.

CSS-overloop voor vervangen elementen

Chrome gaat een wijziging doorvoeren waarmee ontwikkelaars de bestaande overflow eigenschap kunnen gebruiken met vervangende elementen die buiten de inhoudsbox schilderen. In combinatie met object-view-box kan dit worden gebruikt om een afbeelding te maken met een aangepaste gloed of schaduw toegepast, met het juiste inktoverloopgedrag zoals een CSS-schaduw zou hebben.

Dit is een potentieel baanbrekende wijziging. Lees meer in Een wijziging in de overloop van vervangen elementen .

Kleine, grote, dynamische en logische viewport-eenheden

Dit voegt ondersteuning toe voor kleine ( svw , svh , svi , svb , svmin , svmax ), grote ( lvw , lvh , lvi , lvb , lvmin , lvmax ), dynamische ( dvw , dvh , dvi , dvb , dvmin , dvmax ), en logische ( vi , vb ) eenheden.

Ondersteuning voor CSS `break-after` , `break-before` en `break-inside`

Ondersteuning voor de vermijdwaarde van de CSS-fragmentatie-eigenschappen break-before , break-after en break-inside tijdens het afdrukken. Deze waarde vertelt de browser om te voorkomen dat deze wordt verbroken vóór, na of binnen het element waarop deze wordt toegepast. De volgende CSS voorkomt bijvoorbeeld dat een figuur wordt afgebroken bij een pagina-einde.

figure {
    break-inside: avoid;
}

Deze functie is toegevoegd omdat Chrome 108 ondersteuning toevoegt voor afdrukken met LayoutNG.

Laatste uitlijning van basislijnitems

Met deze functie kunnen ontwikkelaars items binnen de flex- of rasterindeling uitlijnen op basis van hun laatste basislijn, in plaats van hun eerste. Dit gebeurt via de volgende eigenschappen:

align-items: last baseline;
justify-items: last baseline;
align-self: last baseline;
justify-self: last baseline;

`ContentVisibilityAutoStateChanged` -gebeurtenis

Een gebeurtenis die wordt geactiveerd op een element met content-visibility: auto wanneer de weergavestatus van het element verandert als gevolg van een van de attributen die het element relevant maken voor de gebruiker .

De use-case hiervoor is om ontwikkelaars meer controle te geven over wanneer ze het renderen moeten stoppen of starten als reactie op het stoppen of starten van het renderen van de subboom voor de zichtbaarheid van de inhoud door de user-agent. De ontwikkelaar wil bijvoorbeeld mogelijk React-updates stoppen in een subboom die niet door de user-agent wordt weergegeven. Op dezelfde manier wil de ontwikkelaar mogelijk andere scriptupdates (bijvoorbeeld canvasupdates) stoppen wanneer de user-agent het element niet weergeeft.

Web-API's

Federated Credentials Management (was WebID)

Met de Federated Credential Management API kunnen gebruikers hun federatieve identiteit gebruiken om in te loggen op websites op een manier die compatibel is met verbeteringen in de browserprivacy.

Mediabronextensies in werknemers

Maakt het gebruik van de Media Source Extensions (MSE) API vanuit DedicatedWorker-contexten mogelijk om verbeterde prestaties van het bufferen van media mogelijk te maken voor het afspelen door een HTMLMediaElement in de hoofdvenstercontext. Door een MediaSource-object in een DedicatedWorker-context te maken, kan een toepassing er vervolgens een MediaSourceHandle van verkrijgen en die handle overbrengen naar de hoofdthread voor gebruik bij koppeling aan een HTMLMediaElement. De context die het MediaSource-object heeft gemaakt, kan dit vervolgens gebruiken om media te bufferen.

`Sec-CH-Prefers-Reduced-Motion` Gebruikersvoorkeur Mediafuncties Koptekst met clienttips

Mediafuncties voor gebruikersvoorkeuren Client Hints Headers definieert een set HTTP Client Hints-headers rond mediafuncties voor gebruikersvoorkeuren zoals gedefinieerd door Media Queries Level 5. Indien gebruikt als Critical Client Hints, stellen deze headers servers in staat slimme keuzes te maken met betrekking tot bijvoorbeeld CSS-inlining . Sec-CH-Prefers-Reduced-Motion weerspiegelt de prefers-reduced-motion .

WebTransport BYOB-lezers

Ondersteunt BYOB-lezers (bring-your-own-buffer) voor WebTransport om lezen in een door de ontwikkelaar geleverde buffer mogelijk te maken. BYOB-lezers kunnen bufferkopieën minimaliseren en geheugentoewijzingen verminderen.

Jokertekens in de oorsprong van het machtigingsbeleid

De Permissions Policy-specificatie definieert een mechanisme waarmee ontwikkelaars het gebruik van verschillende browserfuncties en API's selectief kunnen in- en uitschakelen. Eén mogelijkheid van dit mechanisme maakt het mogelijk dat functies alleen worden ingeschakeld op expliciet opgesomde oorsprongen (bijvoorbeeld https://foo.com/ ). Dit mechanisme is niet flexibel genoeg voor het ontwerp van sommige CDN's, die inhoud leveren via een oorsprong die kan worden gehost op een van de honderden mogelijke subdomeinen.

Daarom voegt deze functie ondersteuning toe voor jokertekens in het machtigingsbeleid dat is gestructureerd als SCHEME://*.HOST:PORT (bijvoorbeeld https://*.foo.com/ ) waarbij een geldige oorsprong kan worden opgebouwd uit SCHEME://HOST:PORT (bijvoorbeeld https://foo.com/ ). Dit vereist dat HOST een registreerbaar domein is. Dit betekent dat https://*.bar.foo.com/ werkt, maar https://*.com/ niet (als u alle domeinen wilt toestaan deze functie te gebruiken, moet u dit gewoon delegeren aan * ).

Synchronisatiemethoden voor AccessHandles in File System Access API

Werkt de asynchrone methoden flush() , getSize() en truncate() in FileSystemSyncAccessHandle in de File System Access API bij naar synchrone methoden. FileSystemSyncAccessHandle heeft momenteel een mix van synchronisatie- en asynchrone methoden, wat de prestaties en bruikbaarheid belemmert, vooral voor applicaties die C/C++ naar Wasm porteren. Deze update zorgt voor consistentie in het API-gebruik en verbetert de prestaties voor op Wasm gebaseerde bibliotheken.

Dit is een potentiële ingrijpende wijziging. U kunt meer lezen in Brekende wijziging: synchronisatiemethoden voor AccessHandles .

Voorwaardelijke gebruikersinterface van WebAuthn

Voorwaardelijke gebruikersinterface voor WebAuthn wordt ondersteund op Windows 22H2 of hoger, macOS en Android P of hoger. De WebAuthn-gebruikersinterface op desktopplatforms is ook vernieuwd.

Variabele COLRv1-lettertypen en detectie van lettertypefuncties

COLRv1-ondersteuning voor variabele lettertypen

COLRv1-kleurvectorlettertypen worden ondersteund sinds Chrome 98, maar deze eerste release ondersteunde alleen de statische functionaliteit van de COLRv1-tabel. De COLRv1-specificatie definieert de integratie met OpenType-variaties, waardoor lettertype-eigenschappen van verlopen en transformaties kunnen worden gewijzigd door middel van het wijzigen van variabele asparameters. Deze tweede stap brengt ondersteuning voor dergelijke variaties in COLRv1.

`font-tech()` en `font-format()` voorwaarde-extensies voor CSS @supports

Het gebruik van font-tech() en font-format() samen met CSS @supports maakt detectie van lettertypetechnologie en formaatondersteuning mogelijk, en progressieve verbetering van de inhoud. In het volgende voorbeeld wordt de ondersteuning van COLRv1-lettertypen getest.

@supports font-tech(color-COLRv1) {

}

`tech()` functieondersteuning in `@font-face src:` descriptor

CSS-lettertypen Niveau 4 biedt aanvullende manieren om lettertypebronnen te selecteren of te filteren. De functie tech() is geïntroduceerd, waarmee een lijst met lettertypetechnologieën kan worden doorgegeven die deze respectieve lettertype-blob nodig heeft om te functioneren. Op basis daarvan selecteert de User Agent de eerste geschikte bron.

Chroom op Android

Android OSK past nu standaard de grootte van de visuele viewport aan

Het Android-schermtoetsenbord past standaard de grootte van de visuele viewport aan in plaats van het oorspronkelijke bevattende blok. Auteurs kunnen zich hiervoor afmelden met behulp van de nieuwe meta-viewport-sleutel interactive-widget .

Oorsprongsproeven

Deze release van Chrome bevat twee nieuwe origin-proefversies .

Identiteit van de verkoper in `canmakepayment`

Met de gebeurtenis canmakepayment weet de verkoper of de gebruiker een kaart heeft opgeslagen in een geïnstalleerde betalingsapp. Het geeft in stilte de herkomst van de handelaar en willekeurige gegevens door aan een servicemedewerker van de oorsprong van de betalingsapp. Deze cross-origin communicatie vindt plaats via PaymentRequest constructie in JavaScript, vereist geen gebruikersgebaar en toont geen gebruikersinterface. De proefversie voor ontwikkelaars voor het verwijderen van de identiteitsvelden uit de gebeurtenis "canmakebetaling" kan worden ingeschakeld via: chrome://flags/#clear-identity-in-can-make-payment . Als u deze vlag inschakelt, worden de identiteitsvelden leeggemaakt in de gebeurtenis 'canmakebetaling' (en de Android IS_READY_TO_PAY intentie).

Lees meer in Update van het CanMakePayment-gebeurtenisgedrag van de Payment Handler API .

Achterwaartse/voorwaartse cache NotRestoredReason API

De NotRestoredReason API rapporteert de lijst met redenen waarom een pagina niet vanuit BFcache wordt weergegeven in een frameboomstructuur, via de PerformanceNavigationTiming API.

Pagina's kunnen om verschillende redenen worden geblokkeerd voor BFcache, zoals redenen vereist door de specificatie en redenen die specifiek zijn voor de browserimplementatie. Ontwikkelaars kunnen de hit-rate van BFCache op hun site verzamelen door de persistente parameter van de pageshow handler en PerformanceNavigationTiming.type(back-forward) te gebruiken. Deze API maakt het voor sites mogelijk om informatie te verzamelen over waarom BFCache niet wordt gebruikt in een geschiedenisnavigatie, zodat ze op basis van elke reden actie kunnen ondernemen en hun pagina BFCache-compatibel kunnen maken.

Beëindigingen en verwijderingen

Deze versie van Chrome introduceert de hieronder vermelde beëindigingen en verwijderingen. Ga naar ChromeStatus.com voor een lijst met geplande beëindigingen, huidige beëindigingen en eerdere verwijderingen.

Beëindigingen

In deze versie van Chrome wordt één functie beëindigd.

Beëindig en verwijder `window.defaultStatus` en `window.defaultstatus`

Dit zijn niet-standaard API's die niet door alle browsers worden geïmplementeerd en geen effect hebben op het browsergedrag. Hierdoor worden ze opgeschoond en wordt een mogelijk vingerafdruksignaal verwijderd.

Ze werden oorspronkelijk gebruikt om de "statusbalk"-tekst onder aan browservensters te wijzigen/controleren. Ze hebben echter nooit enig daadwerkelijk effect gehad op de statusbalk van Chrome en het zijn geen gestandaardiseerde kenmerken. Gecko ondersteunt deze kenmerken niet meer sinds versie 23; WebKit ondersteunt deze kenmerken nog steeds. Het gerelateerde window.status attribuut is gestandaardiseerd, maar mag ook nooit een impact hebben op de window status bar .

Verhuizingen

Deze versie van Chrome verwijdert vier functies.

Verwijder `ImageDecoderInit.premultiplyAlpha`

De functie heeft geen waarneembare effecten in primaire gebruiksscenario's, maar kan implementaties op suboptimale manieren beperken. Zie dit nummer voor een meer gedetailleerde beschrijving. Volgens consensus van WebCodecs-specificatie-editors en gebrek aan gebruik (0,000000339% - 0,00000687% van paginaladingen per gebruiksteller in M106).

`navigateEvent.restoreScroll()` verwijderen

restoreScroll() wordt vervangen door navigateEvent.scroll() . scroll() werkt op dezelfde manier, behalve dat de ontwikkelaar de scroll-timing voor niet-traverse navigatie kan bepalen ( scroll() werkt wanneer de scroll geen herstel is, vandaar de naamsverandering samen met de gedragsverandering).

`navigateEvent.transitionWhile()` verwijderen

transitionWhile() wordt vervangen door navigateEvent.intercept() vanwege ontwerpfouten die door ontwikkelaars zijn gemeld. intercept() gedraagt zich vrijwel identiek aan transitionWhile(), maar in plaats van een verplichte Promise-parameter te gebruiken, is er een optionele handlerfunctie nodig die een Promise retourneert. Hierdoor kan de browser bepalen wanneer de handler wordt uitgevoerd, wat later en intuïtiever is dan voor transitionWhile() .

Verwijder `googIPv6` van WebRTC mediaConstraint

"googIPv6: false" kan worden gebruikt om IPv6-ondersteuning in WebRTC uit te schakelen, zoals in het volgende voorbeeld.

new RTCPeerConnection({}, {mandatory:{googIPv6:false}});

IPv6 is al vele jaren standaard ingeschakeld en we zouden het niet moeten kunnen uitschakelen. Dit is een verouderde API die niet voorkomt in de specificatie.