Nieuw in Chrome 71

Pete LePage

In Chrome 71 hebben we ondersteuning toegevoegd voor:

• Het weergeven van relatieve tijden is nu onderdeel van de Intl API.
• Aangeven aan welke zijde van de tekst de onderstreping moet verschijnen voor tekst die verticaal doorloopt.
• Activering van de gebruiker vereist voordat de spraaksynthese-API kan worden gebruikt.

En er is nog veel meer !

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

Wijzigingslogboek

Dit zijn slechts enkele van de belangrijkste hoogtepunten. Bekijk de onderstaande links voor meer wijzigingen in Chrome 71.

• Wijzigingslijst voor Chromium-bronrepository
• ChromeStatus.com-updates voor Chrome 71
• Chrome 71-verouderde en verwijderde versies

Relatieve tijden weergeven met Intl.RelativeTimeFormat()

Veel webapps gebruiken zinnen als "gisteren", "over twee dagen" of "een uur geleden" om aan te geven wanneer iets is gebeurd of gaat gebeuren, in plaats van de volledige datum en tijd weer te geven.

Het weergeven van relatieve tijden is zo gebruikelijk geworden dat de meeste gangbare datum-/tijdbibliotheken gelokaliseerde functies bieden om dit voor ons te regelen. Sterker nog, bijna elke webapp die ik bouw, Moment JS is een van de eerste bibliotheken die ik speciaal voor dit doel toevoeg.

Chrome 71 introduceert Intl.RelativeTimeFormat() , wat het werk naar de JavaScript-engine verschuift en gelokaliseerde opmaak van relatieve tijden mogelijk maakt. Dit levert ons een kleine prestatieverbetering op en betekent dat we deze bibliotheken alleen als polyfill nodig hebben wanneer een browser de nieuwe API's nog niet ondersteunt.

const rtf = new Intl.RelativeTimeFormat('en');

rtf.format(3.14, 'second');
// → 'in 3.14 seconds'

rtf.format(-15, 'minute');
// → '15 minutes ago'

Het is eenvoudig te gebruiken: maak een nieuwe instantie aan, geef de locale op en roep vervolgens format aan met de relatieve tijd. Bekijk Mathias' blogpost over de Intl.RelativeTimeFormat API voor meer informatie.

De onderstrepingslocatie voor verticale tekst specificeren

Wanneer Chinese of Japanse tekst verticaal wordt weergegeven, zijn browsers niet consistent met de plaats van de onderstreping; dit kan links of rechts zijn.

In Chrome 71 accepteert de eigenschap text-underline-position nu left of right als onderdeel van de CSS3-specificatie voor tekstdecoratie. De CSS3-specificatie voor tekstdecoratie voegt verschillende nieuwe eigenschappen toe waarmee u zaken kunt specificeren zoals het te gebruiken lijntype , de stijl , kleur en positie .

.left {
  text-underline-position: left;
}

.right {
  text-underline-position: right;
}

Spraaksynthese vereist activering van de gebruiker

We zijn allemaal wel eens verrast geweest wanneer we een site bezoeken en die plotseling tegen ons begint te praten. Autoplay-beleid voorkomt dat sites automatisch audio of videobestanden met audio afspelen. Sommige sites hebben geprobeerd dit te omzeilen door de spraaksynthese-API te gebruiken.

Vanaf Chrome 71 vereist de API voor spraaksynthese een vorm van activering door de gebruiker op de pagina voordat deze werkt. Dit komt overeen met andere beleidsregels voor automatisch afspelen . Als u de API probeert te gebruiken voordat de gebruiker interactie met de pagina heeft gehad, wordt er een foutmelding gegenereerd.

const utterance = new window.SpeechSynthesisUtterance('Hello');
utterance.lang = lang || 'en-US';
try {
  window.speechSynthesis.speak(utterance);
} catch (ex) {
  console.log('speechSynthesis not available', ex);
}

Er is niets erger dan een site te bezoeken en verrast te worden door de verrassing, terwijl je collega's om je heen zitten.

En nog veel meer!

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

• De Element.requestFullscreen() -methode kan nu worden aangepast op Android en biedt u de mogelijkheid om te kiezen tussen het zichtbaar maken van de navigatiebalk of een volledig immersieve modus waarin geen besturingselementen van de gebruikersagent worden weergegeven totdat er een gebruikersgebaar wordt uitgevoerd.
• De standaardreferentiemodus voor modulescriptaanvragen is gewijzigd van omit naar same-origin .
• Door Chrome in lijn te brengen met de Shadow DOM v1-specificatie , berekent Chrome 71 nu de specificiteit voor de pseudo-klassen :host() en :host-context() en voor de argumenten voor ::slotted() .

Chrome DevSummit-video's

Als je de Chrome Dev Summit niet hebt bijgewoond, of misschien wel, maar niet alle presentaties hebt gezien, bekijk dan de Chrome Dev Summit 2018-afspeellijst op ons YouTube-kanaal.

In 'Snellere, veerkrachtigere apps bouwen met serviceworkers' gingen Eva en Phil in op een aantal handige technieken voor het inzetten van serviceworkers.

Mariko en Jake vertelden hoe ze Squoosh bouwen in complexe JS-zware web-apps, waarbij ze de trage werking vermijden .

Katie en Houssein hebben in Speed ​​Essentials: Key Techniques for Fast Websites een aantal geweldige technieken besproken om de prestaties van uw site te maximaliseren.

Jake liet de taart vallen . En er staan ​​nog veel meer geweldige video's in de Chrome DevSummit 2018-afspeellijst , dus bekijk ze eens.

Abonneren

Wilt u op de hoogte blijven van onze video's? Abonneer u dan op ons Chrome Developers YouTube-kanaal . U ontvangt dan een e-mailmelding wanneer we een nieuwe video lanceren.

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