Nieuw in Chrome 62

Pete LePage

En er is nog veel meer !

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

Wilt u de volledige lijst met wijzigingen bekijken? Bekijk de wijzigingenlijst in de Chromium-bronrepository .

Netwerkkwaliteitsindicator

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

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

In Chrome 62 is de API uitgebreid met actuele netwerkprestatiegegevens van de client. Met behulp van deze netwerkkwaliteitssignalen kunt u content afstemmen op het netwerk. Bij zeer trage verbindingen kunt u bijvoorbeeld de laadprestaties van pagina's verbeteren door een beperkte versie weer te geven.

Om uw applicatielogica te vereenvoudigen, retourneert de API de gemeten netwerkprestaties in vergelijking met een mobiele verbinding. Bijvoorbeeld, bij een verbinding met een supersnelle glasvezelverbinding zou de API 4G rapporteren.

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

Deze signalen zijn ook beschikbaar als HTTP-aanvraagheaders en worden ingeschakeld via Client Hints . Bekijk het voorbeeld en de specificatie voor meer informatie.

OpenType variabele lettertypen

Traditioneel bevatte één lettertype slechts één exemplaar van een lettertypefamilie, bijvoorbeeld één dikte of één rek. Als u normaal, vet en cursief wilde, moest u drie afzonderlijke lettertypen gebruiken, waardoor de pagina zwaarder werd.

Een variabel OpenType-lettertype is het equivalent van meerdere individuele lettertypen die compact in één lettertypebestand kunnen worden verpakt. Door de CSS-eigenschap font-variation-settings aan te passen, kunnen stretch, stijl, dikte en meer eenvoudig worden aangepast, wat een oneindig aantal stilistische variaties oplevert. 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;
}

Met variabele OpenType-lettertypen beschikken we over een krachtige nieuwe tool om responsieve typografie te creëren en de paginadikte te verminderen. Lees 'Introducing OpenType Variable Fonts' van John Hudson voor meer informatie.

Media-opname van DOM-elementen

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

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

Niet-beveiligde labels voor sommige HTTP-pagina's

Zoals we eerder al aankondigden , markeert Chrome vanaf Chrome 62, wanneer een gebruiker gegevens invoert op een HTTP-pagina, de pagina als 'Niet beveiligd' met een label in de adresbalk. Dit label wordt ook weergegeven in de incognitomodus voor alle HTTP-pagina's.

En nog veel meer!

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

Abonneer je dan op ons YouTube-kanaal , dan ontvang je een e-mailmelding wanneer we een nieuwe video lanceren.

Ik ben Pete LePage en zodra Chrome 63 uitkomt, vertel ik u wat er nieuw is in Chrome!