Nieuwe CSS-kleurtypen en kleurruimten, CSS-trigonometrische functies en de View Transitions API.
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 111 is vanaf 9 februari 2023 een bètaversie. Je kunt het nieuwste downloaden op Google.com voor desktop of in de Google Play Store op Android.
CSS
Nieuwe CSS-kleurtypen en spaties
Alle functies beschreven in CSS Kleurniveau 4 zijn nu ingeschakeld. Dit omvat vier apparaatonafhankelijke kleurtypen (lab, Oklab, lch en Oklch), de functie color() en door de gebruiker gedefinieerde kleurruimten voor verlopen en animaties.
Lees de High Definition CSS-kleurengids voor meer informatie over deze nieuwe kleurtypen en spaties.
De color-mix() functie
De ongelooflijk nuttige color-mix() functie van CSS Color 5 is ook verkrijgbaar. Met deze functie kunt u een percentage van de ene kleur in de andere mengen, in elke ondersteunde kleurruimte. In dit volgende voorbeeld wordt 10% blue gemengd met white in SRGB.
.item {
background-color: color-mix(in srgb, blue 10%, white);
}
CSS-kiezers 4 Pseudoklasse:n-kind(an + b van S)
Breidt :nth-child(an + b) en :nth-last-child() om een selector te nemen. : :nth-child(3 of .c) is bijvoorbeeld de derde .c onder een bepaalde ouder. Lees voor meer informatie het bericht Meer controle over :nth-child() selecties met de syntaxis of S .
CSS-hoofdlettertype-eenheden
Voegt hoofdlettertype-eenheden toe: rex , rch , ric en rlh aan de bestaande hoofdlettertype-eenheid rem .
CSS-trigonometrische functies
De trigonometrische functies sin() , cos() , tan() , asin() , acos() , atan() , atan2() zijn toegevoegd aan wiskundige CSS-uitdrukkingen.
Stijlcontainerquery's voor aangepaste CSS-eigenschappen
Voegt de functie style() toe aan @container regels om het mogelijk te maken stijlen toe te passen op basis van de berekende waarden van aangepaste eigenschappen van een bovenliggend element.
De baseline-source
Met de eigenschap baseline-source kunnen webontwikkelaars opgeven of een box op inline-niveau de first of last baseline moet gebruiken voor uitlijning binnen een linebox.
Web-API's
De machtiging window-management en de tekenreeks voor het machtigingsbeleid
Chrome 111 voegt window-management toe als alias voor toestemming voor window-placement en tekenreeksen voor toestemmingsbeleid. Dit maakt deel uit van een grotere poging om de strings te hernoemen door uiteindelijk window-placement af te schaffen en te verwijderen. De terminologiewijziging verbetert de levensduur van de descriptor naarmate de Window Management API in de loop van de tijd evolueert.
Mediasessie-API: Acties voor het presenteren van dia's
Voegt previousslide en nextslide acties toe aan de bestaande Media Session API.
Aanpasbare ArrayBuffer en groeibare SharedArrayBuffer
Verleng de ArrayBuffer constructors om een extra maximale lengte te krijgen die in-place groei en inkrimping van buffers mogelijk maakt. Op dezelfde manier wordt SharedArrayBuffer uitgebreid met een extra maximale lengte die groei ter plaatse mogelijk maakt.
Speculatieregels: sleutel voor verwijzend beleid
Dit breidt de syntaxis van de speculatieregels uit, zodat ontwikkelaars het verwijzingsbeleid kunnen specificeren dat moet worden gebruikt met speculatieve verzoeken die worden geactiveerd door speculatieregels. Hiermee wordt ook opnieuw de vereiste van een ‘voldoende strikt verwijzerbeleid’ geïntroduceerd.
Streaming declaratieve schaduw DOM
Dit voegt ondersteuning toe voor streaming, door de schaduwwortel aan de opening te bevestigen in plaats van aan de sluitende sjabloontag.
Bekijk Transitions-API
Maakt het mogelijk om gepolijste overgangen te creëren in Single-Page Applications (SPA's) door momentopnamen te maken van weergaven en de DOM te laten veranderen zonder enige overlap tussen statussen. Gebruik View Transitions om aangepaste overgangen te maken, of gebruik een eenvoudige crossfade-standaard om de gebruikerservaring te verbeteren.
Bekijk het Chrome Developers-artikel voor meer informatie en voorbeeldovergangen om u op weg te helpen.
WebRTC schaalbare videocoderingsextensies
Deze extensie definieert een standaardmethode voor het kiezen tussen mogelijke Scalable Video Coding (SVC)-configuraties op een uitgaande WebRTC-videotrack.
WebXR enabledFeatures -kenmerk
Retourneert de set functies die zijn ingeschakeld voor deze XRSession zoals gespecificeerd door XRSessionInit en de impliciete functies die vereist zijn door de specificatie voor de gegeven modus en functies. Voor een toegekende sessie bevat deze alle requiredFeatures , maar kan een subset van optionalFeatures zijn. De meeste functies hebben alternatieve manieren om te detecteren of ze zijn verleend; Voor sommige functies kan het signaal of een functie wel of niet is ingeschakeld echter nauw samenhangen met gegevens over een functie die op dit moment gewoon niet beschikbaar is, in plaats van dat gegevens ooit niet beschikbaar zijn. Door enabledFeatures te bevragen, kunt u bepalen of er nuttige tips (bijvoorbeeld om de tracking te verbeteren of te starten) moeten worden weergegeven, of dat een functie nooit zal worden ondersteund in de huidige sessie.
Oorsprongsproeven zijn aan de gang
In Chrome 111 kunt u zich aanmelden voor de volgende nieuwe origin-proefversies .
Beëindigingsproef voor verwijdering van de connect-src CSP-bypass in Web Payment API
Beëindig de mogelijkheid voor Web Payment API om het connect-src CSP-beleid te omzeilen bij het ophalen van het manifest. Na deze beëindiging moet het connect-src CSP-beleid van een site rekening houden met de URL van de betalingsmethode die is opgegeven in een PaymentRequest-aanroep, evenals met alle andere URL's die de methode koppelt om het manifest op te halen.
Deze bypass-mogelijkheid is verwijderd in Chrome 111 met een proefperiode met omgekeerde oorsprong van 111 naar 113 voor ontwikkelaars die de bypass tijdelijk opnieuw moeten inschakelen. Als u zich hiervoor wilt aanmelden, registreert u zich voor de omgekeerde afschrijvingsproef voor de connect-src CSP-bypass .
Documenteer Picture-in-Picture
De Document Picture-in-Picture API is een nieuwe API om een altijd zichtbaar venster te openen dat kan worden gevuld met willekeurige HTML-inhoud. Dit is een uitbreiding op de bestaande Picture-in-Picture API waarmee alleen een HTMLVideoElement in een PiP-venster kan worden geplaatst. Hierdoor kunnen webontwikkelaars gebruikers een betere PiP-ervaring bieden.
Lees de documentatie voor Document Picture-in-Picture .
Meld u aan voor de proefversie van Document Picture-In-Picture .
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.
In deze versie van Chrome worden drie functies verwijderd.
Betaalinstrumenten verwijderen
PaymentInstruments is de web-API die de niet-JIT-installatie van betalingsapps ondersteunt (zie https://w3c.github.io/betalingshandler/). Het is ontworpen in de veronderstelling dat de browser de daadwerkelijke details van het betaalinstrument zou opslaan, wat niet waar is gebleken, en er zijn enkele privacylekken. Het is ook niet in een andere browser geleverd en we hebben geen enkele interesse van andere browserleveranciers gezien. Als zodanig is deze API verouderd en verwijderd .
Verwijder connect-src CSP-bypass in Web Payment API
Beëindig de mogelijkheid voor de Web Payment API om het connect-src CSP-beleid te omzeilen bij het ophalen van het manifest . Na deze verwijdering moet het connect-src CSP-beleid van een site rekening houden met de URL van de betalingsmethode die is opgegeven in een PaymentRequest-aanroep, evenals met alle andere URL's die de methode koppelt om het manifest op te halen.
Zie de informatie onder origin-proefversies voor een methode om u aan te melden voor een beëindigingsproefperiode, waardoor u meer tijd heeft om de vereiste wijzigingen aan te brengen als gevolg van deze verwijdering.
Identiteit van de verkoper in de canmakepayment
Met de gebeurtenis canmakepayment weet de verkoper of de gebruiker een kaart heeft opgeslagen in een geïnstalleerde betalingsapp. Vroeger gaf het de herkomst van de handelaar en willekeurige gegevens stilletjes door aan een servicemedewerker van de oorsprong van de betalingsapp. Deze cross-origin-communicatie vond plaats via de PaymentRequest-constructie in JavaScript, vereiste geen gebruikersgebaar en liet geen gebruikersinterface zien. Deze stille gegevenspassage is verwijderd uit de canmakepayment en de Android IS_READY_TO_PAY Intent) .