Deze pagina is vertaald door de Cloud Translation API.

Nieuw in Chrome 62

Pete LePage

Chrome 62 maakt de netwerkinformatie-API nuttiger door daadwerkelijke prestatiestatistieken te bieden in plaats van theoretische resultaten.
Ondersteuning voor variabele OpenType-lettertypen is geland.
U kunt mediastreams vastleggen van HTML-media-elementen.
Ik heb een speciale herinnering over een belangrijke wijziging die in Chrome 62 wordt doorgevoerd.

Ik ben Pete LePage . Laten we erin duiken en kijken wat er nieuw is voor ontwikkelaars in Chrome 62!

Wilt u de volledige lijst met wijzigingen? Bekijk de Chromium-bronrepositorywijzigingslijst .

Netwerkkwaliteitsindicator

De Network Information API is al een tijdje beschikbaar in Chrome, maar biedt alleen theoretische netwerksnelheden op basis van de verbinding van de gebruiker. Stel je voor dat je wifi gebruikt, maar verbonden bent met een mobiele hotspot die alleen 2G-snelheden heeft? De API zou WiFi rapporteren!

console.log(navigator.connection.type);
> wifi

In Chrome 62 is de API uitgebreid om daadwerkelijke netwerkprestatiestatistieken van de client te bieden. Met behulp van deze netwerkkwaliteitssignalen kunt u de inhoud afstemmen op het netwerk. Bij zeer langzame verbindingen kunt u bijvoorbeeld de laadprestaties van de pagina verbeteren door een verkorte versie aan te bieden.

Om uw applicatielogica te vereenvoudigen, retourneert de API de gemeten netwerkprestaties in termen van hoe deze zich zouden vergelijken met een mobiele verbinding. Bij aansluiting op een supersnelle glasvezelverbinding rapporteert de API bijvoorbeeld 4G .

console.log(navigator.connection.effectiveType);
> 4G

Deze signalen zullen ook beschikbaar zijn als HTTP-verzoekheaders en mogelijk worden gemaakt via Client Hints . Bekijk het voorbeeld en bekijk de specificaties voor een diepere duik.

OpenType variabele lettertypen

Traditioneel bevatte één lettertype slechts één exemplaar van een lettertypefamilie, bijvoorbeeld één gewicht of één stretch. Als u normaal, vet en cursief wilt, moet u drie afzonderlijke lettertypen toevoegen, waardoor uw pagina zwaarder wordt.

Een variabel OpenType-lettertype is het equivalent van meerdere afzonderlijke lettertypen die compact kunnen worden verpakt in één lettertypebestand. Door de font-variation-settings aan te passen, kunnen CSS-eigenschappen, uitrekbaarheid, stijl, gewicht en meer eenvoudig worden aangepast, waardoor een oneindig aantal stilistische variaties wordt geboden. Deze drie lettertypen kunnen nu worden gecombineerd tot één compact bestand.

.heading {
  font-family: "Avenir Next Variable";
  font-size: 48px;
  font-variation-settings: 'wght' 700, 'wdth' 75;
}
.content {
  font-family: "Avenir Next Variable";
  font-size: 24px;
  font-variation-settings: 'wght' 400;
}

Variabele OpenType-lettertypen bieden ons een krachtig nieuw hulpmiddel om responsieve typografie te creëren en ons paginagewicht te verminderen. Bekijk Introducing OpenType Variable Fonts van John Hudson voor meer details.

Media-opname van DOM-elementen

U kunt nu inhoud rechtstreeks vanuit HTMLMediaElements live vastleggen in een MediaStream , zoals audio en video, met de Media Capture van DOM Elements API .

Na het aanroepen van captureStream() op een HTML-media-element kan de gestreamde inhoud worden gemanipuleerd, verwerkt, op afstand verzonden of opgenomen. Stel je voor dat je webaudio gebruikt om je eigen equalizer of vocoder te maken. Of stream de inhoud naar een externe site met behulp van WebRTC. De mogelijkheden zijn vrijwel eindeloos.

Geen beveiligde labels voor sommige HTTP-pagina's

Zoals we eerder hebben aangekondigd , zal Chrome, vanaf Chrome 62, wanneer een gebruiker gegevens invoert op een HTTP-pagina, de pagina markeren als 'Niet veilig' met een label in de adresbalk. Dit label wordt ook weergegeven in de incognitomodus voor alle HTTP-pagina's.

En meer!

Dit zijn slechts enkele van de veranderingen in Chrome 62 voor ontwikkelaars. Er is natuurlijk nog veel meer.

De Payment Request API is nu beschikbaar in Chrome voor iOS.
U kunt beginnen met het bouwen van experimenteel rijke VR-ervaringen met de WebVR Origin-proefversie .

Abonneer u dan op ons YouTube-kanaal en u ontvangt een e-mailmelding wanneer we een nieuwe video lanceren.

Ik ben Pete LePage, en zodra Chrome 63 uitkomt, ben ik hier om je te vertellen: wat er nieuw is in Chrome!