Nieuw in Chrome 121

Adriana Jara

Dit is wat u moet weten:

Ik ben Adriana Jara. Laten we erin duiken en kijken wat er nieuw is voor ontwikkelaars in Chrome 121.

CSS-updates.

Laten we beginnen met CSS-updates:

De eigenschappen scrollbar-color en scrollbar-width zijn nu beschikbaar. Hiermee kun je schuifbalken aanpassen en (zoals je waarschijnlijk al geraden had) hun kleur en breedte wijzigen.

Met de eigenschap font-palette kunt u een specifiek palet selecteren om een ​​kleurlettertype weer te geven. Deze eigenschap ondersteunt nu animatie, zodat het schakelen tussen paletten een vloeiende overgang wordt tussen de twee geselecteerde paletten.

Met de pseudo-elementen ::spelling-error en ::grammar-error kunt u de kleuren voor de spelling- en grammaticafouten aanpassen, verkeerd gespelde woorden markeren met achtergrondkleuren of andere versieringen, en aangepaste spellingcontrole implementeren met een meer geïntegreerd uiterlijk.

CSS-maskering voor SVG is verbeterd. Dit is een vervolg op de verbeterde CSS-maskerondersteuning in Chrome 120, waarbij nieuwe maskerondersteuning wordt toegevoegd aan SVG (meerdere maskers, evenals mask-mode , mask-composite , mask-position en mask-repeat ). Bovendien worden externe SVG-maskers (bijvoorbeeld mask: url(masks.svg#star) ) nu ondersteund.

Correctie: in een eerdere versie van dit artikel werd melding gemaakt van het toevoegen van ondersteuning voor supports() voorwaarden aan @import , wat niet het geval was. De wijziging is opgenomen in Chrome 122.

Speculatieregels API-updates

Sites kunnen de Speculation Rules API gebruiken om Chrome programmatisch te vertellen welke pagina's vooraf moeten worden weergegeven, waardoor een betere gebruikerservaring wordt gecreëerd door de paginanavigatietijd te verkorten.

Nu bevat de API ondersteuning voor documentregels : ze zijn een uitbreiding op de syntaxis van speculatieregels waarmee de browser de lijst met URL's kan verkrijgen voor speculatief laden uit elementen op een pagina. Documentregels kunnen criteria bevatten waarvoor deze links kunnen worden gebruikt. Dit, in combinatie met een nieuw veld 'gretness', maakt het mogelijk links op pagina's automatisch vooraf op te halen of vooraf weer te geven, door met de muis te bewegen of door met de muis omlaag te gaan.

Hier is een voorbeeld van documentregels:

{
  "prerender": [
    {"where": {"and": [
       {"href_matches": "/*"},
       {"not": {"href_matches": "/logout"}},
       {"not": {"selector_matches": ".no-prerender"}}
     ]}}
  ]
}

Een afzonderlijke wijziging maakt het mogelijk speculatieregels op te geven met behulp van de Speculation-Rules HTTP-antwoordheader. De header is een alternatief voor het gebruik van inline <script> -elementen. De waarde van deze header moet een URL zijn die verwijst naar een tekstbron met het MIME-type "application/speculationrules+json" . De regels van de bron worden toegevoegd aan de regelset van het document.

Bovendien zorgt de No-Vary-Search hint ervoor dat speculatieve prefetches overeenkomen, zelfs als de URL-queryparameters veranderen. De HTTP-antwoordheader No-Vary-Search verklaart dat sommige of alle delen van de zoekopdracht van een URL kunnen worden genegeerd voor matchingdoeleinden. Het kan verklaren dat de volgorde van de queryparametersleutels geen overeenkomsten mag voorkomen, dat specifieke queryparameters geen overeenkomsten mogen voorkomen, of dat alleen bepaalde bekende queryparameters tot mismatches mogen leiden.

Bezoek Verbeteringen aan de Speculatieregels-API voor meer informatie over deze wijzigingen.

Proefversie van de Element Capture API-oorsprong

De Element Capture API is beschikbaar in een origin-proefversie. Met deze API kunt u een specifiek HTML-element vastleggen en opnemen. Het transformeert een opname van het hele tabblad in een opname van een specifieke DOM-subboom, waarbij alleen directe afstammelingen van het doelelement worden vastgelegd. Met andere woorden, het snijdt en verwijdert zowel occluderende als occludeerde inhoud.

Een voorbeeld van waar de Element Capture API nuttig is, is een app voor videoconferenties waarmee u applicaties van derden in een iframe kunt insluiten. In dit scenario wilt u dat iframe mogelijk als video vastleggen en naar externe deelnemers verzenden.

Schermafbeelding van een videoconferentiegesprek in Chrome.
Elad gebruikt een applicatie van derden tijdens een videoconferentiegesprek met François.

Houd er rekening mee dat u Region Capture hiervoor kunt gebruiken, maar in dat geval zal, als bepaalde inhoud, zoals een vervolgkeuzelijst, bovenop de geselecteerde inhoud wordt geplaatst, die vervolgkeuzelijst deel uitmaken van de opname.

Schermafbeelding van een vastgelegde vervolgkeuzelijst.
De vervolgkeuzelijst van Elad verschijnt bovenaan de inhoud die François heeft ontvangen.

De Element Capture API lost dit probleem op, doordat u zich kunt richten op het element dat u wilt delen.

Schermafbeelding van het doelelement zonder vervolgkeuzelijst in beeld.
François ziet de vervolgkeuzelijst van Elad niet.

Afrekenen Leg een videostream vast van elk element voor codevoorbeelden en registreer u voor de ElementCapture Origin-proefversie

En meer!

Natuurlijk is er nog veel meer.

  • De methoden resizeBy() en resizeTo() , onderdeel van de Document Picture-in-Picture API , vereisen nu een gebruikersgebaar.

  • U kunt de optiekiezer van een <select> -element programmatisch openen met de showPicker() -methode van HTMLSelectElement .

  • scope_extensions , is in origin trial , het maakt het mogelijk het gedrag van een web-app uit te breiden met andere oorsprongen, als er overeenstemming is tussen de primaire oorsprong van een web-app en de bijbehorende oorsprong.

Verder lezen

Dit behandelt slechts enkele belangrijke hoogtepunten. Controleer de volgende links voor aanvullende wijzigingen in Chrome 121.

Abonneren

Als u op de hoogte wilt blijven, abonneert u zich op het YouTube-kanaal van Chrome Developers . U ontvangt dan een e-mailmelding wanneer we een nieuwe video lanceren.

Yo soy Adriana Jara, en zodra Chrome 122 uitkomt, ben ik hier om je te vertellen wat er nieuw is in Chrome!