Nowości w Chrome 71

Pete LePage

Twitter GitHub Glitch Mastodon strona główna

W Chrome 71 dodaliśmy obsługę tych funkcji:

• Wyświetlanie względnych czasów jest teraz częścią interfejsu API Intl.
• Możesz określić, po której stronie tekstu ma być podkreślone w przypadku tekstu wyświetlanego w pionie.
• wymaganie aktywacji użytkownika przed użyciem interfejsu Speech Synthesis API;

A jest to wiele innych!

Nazywam się Pete LePage. Sprawdźmy, co nowego dla deweloperów w Chrome 71.

Historia zmian

To tylko niektóre z najważniejszych zmian. Aby poznać dodatkowe zmiany w Chrome 71, kliknij linki poniżej.

• Lista zmian repozytorium źródłowego Chromium
• Aktualizacje ChromeStatus.com dla Chrome 71
• Wycofywanie i usuwanie Chrome 71

Wyświetlaj względne czasy za pomocą funkcji Intl.RelativeTimeFormat()

Twitter pokazuje względny czas dla najnowszego posta

Wiele aplikacji internetowych zamiast wyświetlać pełną datę i godzinę używa zwrotów „wczoraj”, „za dwa dni” lub „godzinę temu”, aby określić, kiedy coś się wydarzyło lub będzie miało miejsce.

Wyświetlanie czasu względnego stało się tak powszechne, że większość popularnych bibliotek daty i godziny udostępnia zlokalizowane funkcje, które zajmują się tą sprawą. Moment JS to jedna z pierwszych bibliotek, które dodam do większości aplikacji internetowych. Specjalnie do tego celu.

W Chrome 71 wprowadzamy narzędzie Intl.RelativeTimeFormat(), które przenosi działanie do mechanizmu JavaScriptu i umożliwia zlokalizowane formatowanie czasów względnych. To daje nam niewielki wzrost wydajności, a to oznacza, że będziemy potrzebować tych bibliotek jako kodu polyfill tylko wtedy, gdy przeglądarka nie obsługuje jeszcze nowych interfejsów API.

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

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

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

Wystarczy, że w prosty sposób utworzysz nową instancję i określisz język, a następnie wywołasz format z odpowiednim czasem. Więcej informacji znajdziesz w poście Intl.RelativeTimeFormat API Mathiasa.

Określanie lokalizacji podkreślenia tekstu w pionie

Tekst w pionie z niespójnymi podkreśleniami

Jeśli tekst w języku chińskim lub japońskim jest wyświetlany w pionie, przeglądarki nie spójnie z miejscem, w którym jest podkreślone, ponieważ tekst znajduje się po lewej lub po prawej stronie.

W Chrome 71 właściwość text-underline-position akceptuje teraz left i right jako część specyfikacji tekstu CSS3. Specyfikacja tekstu CSS3 dodaje kilka nowych właściwości, które umożliwiają określenie na przykład rodzaju linii, stylu, koloru i pozycji.

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

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

Synteza mowy wymaga aktywacji użytkownika

Wszyscy byliśmy zaskoczeni, gdy odwiedzaliśmy jakąś stronę i nagle zaczynaliśmy z nami rozmawiać. Zasady autoodtwarzania uniemożliwiają witrynom automatyczne odtwarzanie dźwięku i plików wideo z dźwiękiem. Niektóre witryny próbowały obejść ten problem, korzystając z interfejsu Speech synthesis API.

Od wersji Chrome 71 interfejs API do syntezy mowy wymaga pewnej aktywacji przez użytkownika na stronie, zanim będzie mógł działać. Jest to zgodne z innymi zasadami autoodtwarzania. Jeśli spróbujesz użyć tagu, zanim użytkownik wejdzie w interakcję ze stroną, spowoduje to wystąpienie błędu.

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

Uwaga: aby mieć pewność, że kod działa, zalecamy owinięcie wywołania syntezy mowy blokiem try/catch. Jeśli strona nie zostanie aktywowana, nie spowoduje to awarii reszty aplikacji.

Nie ma nic gorszego niż wizyta na stronie i zdziwienie się, gdyby pracownicy Ci towarzyszyli.

…i wiele innych.

To tylko kilka ze zmian wprowadzonych w Chrome 71 dla deweloperów, oczywiście jest ich znacznie więcej.

• Metodę Element.requestFullscreen() można teraz dostosowywać na Androidzie i umożliwia wybór między wyświetlaniem paska nawigacyjnego a trybem całkowicie pojemnym, w którym do momentu wykonania gestu użytkownika nie są wyświetlane żadne elementy sterujące klienta użytkownika.
• Domyślny tryb danych logowania dla żądań skryptu modułu zmienił się z omit na same-origin.
• Dzięki połączeniu Chrome ze specyfikacją Shadow DOM v1 Chrome 71 oblicza teraz specyficzność pseudoklas :host() i :host-context() oraz argumentów dla ::slotted().

Filmy na temat Chrome DevSummit

Jeśli nie udało Ci się uczestniczyć w konferencji Chrome Dev Summit lub udało Ci się tam dotrzeć, ale nie udało Ci się obejrzeć wszystkich rozmów, obejrzyj playlistę Chrome Dev Summit 2018 na naszym kanale w YouTube.

Eva i Phil przedstawili kilka ciekawych technik korzystania z mechanizmów Service Worker w artykule Tworzenie szybszych i bardziej odpornych aplikacji dzięki mechanizmom Service Worker.

Mariko i Jake opowiadali o tym, jak tworzą Squoosh w filmie Complex JS-heavy Web Apps,jming the Slow.

W filmie Speed Essentials: Key Techniques for Fast Websites (Podstawowe techniki dotyczące szybkości witryn) Katie i Hussein przedstawili kilka świetnych technik maksymalizowania wydajności witryny.

Jake upuścił tort. Na playliście Chrome DevSummit 2018 Chrome znajdziesz wiele innych świetnych filmów, więc je obejrzyj.

Zasubskrybuj

Jeśli chcesz być na bieżąco z naszymi filmami, zasubskrybuj kanał dla deweloperów Chrome w YouTube, a za każdym razem, gdy opublikujemy nowy film, otrzymasz e-maila z powiadomieniem.

Nazywam się Pete LePage i jak tylko pojawi się Chrome 72, zajmę się tym, co nowego w Chrome.