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.
• Specificeren aan welke kant van de tekst de onderstreping moet verschijnen voor tekst die verticaal doorloopt.
• Vereist activering van de gebruiker voordat de spraaksynthese-API wordt gebruikt.

En er is nog veel meer !

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

Wijzig logboek

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

• Wijzigingslijst voor Chromium-bronrepository's
• ChromeStatus.com-updates voor Chrome 71
• Beëindiging en verwijdering van Chrome 71

Geef relatieve tijden weer met Intl.RelativeTimeFormat()

Twitter toont de relatieve tijd voor het laatste bericht

Veel webapps gebruiken uitdrukkingen 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 gewoon geworden dat de meeste gangbare datum-/tijdbibliotheken gelokaliseerde functies bieden om dit voor ons af te handelen. In feite is Moment JS bij bijna elke web-app die ik bouw een van de eerste bibliotheken die ik speciaal voor dit doel toevoeg.

Chrome 71 introduceert Intl.RelativeTimeFormat() , dat het werk naar de JavaScript-engine verschuift en gelokaliseerde opmaak van relatieve tijden mogelijk maakt. Dit geeft ons een kleine prestatieverbetering en betekent dat we die bibliotheken alleen als polyfill nodig hebben als 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 gebruik ervan is eenvoudig: maak een nieuw exemplaar en specificeer de landinstelling, en roep vervolgens gewoon het formaat aan met de relatieve tijd. Bekijk Mathias' The Intl.RelativeTimeFormat API post voor volledige details.

Onderstrepingslocatie voor verticale tekst opgeven

Verticale tekst met inconsistente onderstrepingen

Wanneer Chinese of Japanse tekst verticaal wordt weergegeven, zijn browsers inconsistent met waar de onderstreping wordt geplaatst: deze kan links of rechts zijn.

In Chrome 71 accepteert de eigenschap text-underline-position nu left of right als onderdeel van de CSS3-tekstdecoratiespecificaties. De CSS3-specificatie voor tekstdecoratie voegt verschillende nieuwe eigenschappen toe waarmee u zaken kunt specificeren zoals wat voor soort lijn moet worden gebruikt, de stijl , kleur en positie .

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

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

Spraaksynthese vereist activering van de gebruiker

We zijn allemaal verrast als we op een site terechtkomen en deze plotseling tegen ons begint te praten. Beleid voor automatisch afspelen voorkomt dat sites automatisch audio of videobestanden met audio afspelen. Sommige sites hebben geprobeerd dit te omzeilen door in plaats daarvan de spraaksynthese-API te gebruiken.

Vanaf Chrome 71 vereist de spraaksynthese-API nu een soort gebruikersactivatie op de pagina voordat deze werkt. Dit brengt het in lijn met ander autoplay-beleid . Als u het probeert te gebruiken voordat de gebruiker interactie heeft gehad met de pagina, wordt er een foutmelding gegeven.

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

Opmerking: om er zeker van te zijn dat uw code werkt, raad ik u aan uw oproep voor spraaksynthese in een try / catch blok te plaatsen, zodat de rest van uw app niet kapot gaat als de pagina niet wordt geactiveerd.

Er is niets erger dan naar een locatie gaan en je te laten verrassen, terwijl de collega's om je heen zitten.

En meer!

Dit zijn slechts enkele van de veranderingen 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 meeslepende modus waarin geen user-agent-besturingselementen worden weergegeven totdat een gebruikersgebaar wordt uitgevoerd.
• De standaardmodus voor inloggegevens voor modulescriptverzoeken is gewijzigd van omit in same-origin .
• En door Chrome in lijn te brengen met de Shadow DOM v1-specificatie , berekent Chrome 71 nu de specificiteit voor de :host() en :host-context() pseudo-klassen, evenals voor de argumenten voor ::slotted() .

Chrome DevSummit-video's

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

Eva en Phil gingen dieper in op enkele handige technieken voor het inzetten van servicemedewerkers bij het bouwen van snellere, veerkrachtigere apps met servicemedewerkers .

Mariko en Jake spraken over hoe ze Squoosh bouwen in complexe JS-zware webapps, waarbij ze de langzame .

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

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

Abonneren

Wil je op de hoogte blijven van onze video's, abonneer je dan op ons Chrome Developers YouTube-kanaal en je ontvangt een e-mailmelding wanneer we een nieuwe video lanceren.

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