Nowości w Chrome 71

Pete LePage

W Chrome 71 dodaliśmy obsługę:

• Wyświetlanie czasów względnych jest teraz częścią interfejsu API Intl.
• W przypadku tekstu płynącego w poziomie określ po której stronie tekstu ma się pojawić podkreślenie.
• Wymaganie aktywacji przez użytkownika przed użyciem interfejsu API syntezy mowy.

A to nie wszystko – to tylko część.

Mam na imię Pete LePage. Zobacz, co nowego w Chrome 71 dla deweloperów.

Historia zmian

To tylko niektóre z najważniejszych zmian. Aby poznać więcej szczegółów, kliknij linki poniżej.

• Lista zmian w repozytorium kodu Chromium
• Aktualizacje ChromeStatus.com dotyczące Chrome 71
• Funkcje wycofane i usunięte z Chrome 71

Wyświetlanie czasów względnych za pomocą Intl.RelativeTimeFormat()

Twitter pokazujący czas względny ostatniego wpisu

Wiele aplikacji internetowych używa wyrażeń takich jak „wczoraj”, „za 2 dni” czy „godzinę temu”, aby wskazać, kiedy coś się stało lub ma się wydarzyć, zamiast wyświetlać pełną datę i godzinę.

Wyświetlanie czasów względnych stało się tak powszechne, że większość popularnych bibliotek daty/czasu udostępnia funkcje zlokalizowane, które to robią za nas. W prawie każdej tworzonej przeze mnie aplikacji internetowej Moment JS jest jedną z pierwszych bibliotek, które dodaję, właśnie w tym celu.

Chrome 71 wprowadza funkcję Intl.RelativeTimeFormat(), która przenosi pracę na mechanizm JavaScriptu i umożliwia zlokalizowane formatowanie czasów względnych. Daje to niewielki wzrost wydajności i oznacza, że te biblioteki są potrzebne jako 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'

Korzystanie z niego jest proste: utwórz nową instancję i określ lokalizację, a potem po prostu wywołaj format z czasem względnym. Więcej informacji znajdziesz w artykule Mathiasa The Intl.RelativeTimeFormat API.

Określanie lokalizacji podkreślenia dla tekstu pionowego

Tekst pionowy z niespójnymi podkreśleniami

Gdy tekst w języku chińskim lub japońskim jest wyświetlany w układzie pionowym, przeglądarki nie są spójne w kwestii umieszczania podkreślenia – może ono znajdować się po lewej lub po prawej stronie.

W Chrome 71 właściwość text-underline-position akceptuje teraz wartości left lub right jako część specyfikacji dekoracji tekstu CSS3. Specyfikacja dekoracji tekstu CSS3 zawiera kilka nowych właściwości, które umożliwiają określenie takich rzeczy jak rodzaj linii, styl, kolor i pozycja.

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

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

Synteza mowy wymaga aktywacji przez użytkownika

Wszyscy byliśmy zaskoczeni, gdy nagle strona zaczęła do nas mówić. Zasady dotyczące automatycznego odtwarzania uniemożliwiają automatyczne odtwarzanie plików audio lub wideo z dźwiękiem. Niektóre witryny próbowały obejść to ograniczenie, używając zamiast tego interfejsu API do syntezy mowy.

Od wersji Chrome 71 interfejs API do syntezy mowy wymaga aktywacji przez użytkownika na stronie. Dzięki temu będzie ona zgodna z innymi zasadami dotyczącymi automatycznego odtwarzania. Jeśli spróbujesz użyć go, zanim użytkownik wejdzie w interakcję ze stroną, pojawi się błąd.

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 prawidłowo, zalecam otaczanie wywołania syntezy mowy blokiem try/catch. Jeśli strona nie będzie aktywna, nie spowoduje to błędu w pozostałych częściach aplikacji.

Nie ma nic gorszego niż wejście na stronę i zostanie zaskoczonym przez reklamę, która wyświetla się Tobie i Twoim współpracownikom.

I inne funkcje

To tylko kilka z wielu zmian w Chrome 71 dla deweloperów.

• Metodę Element.requestFullscreen() można teraz spersonalizować na Androidzie, aby wybrać, czy pasek nawigacyjny ma być widoczny, czy też ma być włączony tryb pełnoekranowy, w którym żadne elementy sterujące nie są widoczne, dopóki użytkownik nie wykona żadnego gestu.
• Tryb domyślnych danych logowania w przypadku żądań skryptu modułu zmienił się z omit na same-origin.
• Aby dostosować Chrome do specyfikacji Shadow DOM w wersji 1, Chrome 71 oblicza teraz specyficzność dla pseudoklas :host() i :host-context(), a także dla argumentów funkcji ::slotted().

Filmy z konferencji Chrome DevSummit

Jeśli nie udało Ci się wziąć udziału w Chrome Dev Summit lub nie udało Ci się obejrzeć wszystkich wystąpień, zapoznaj się z playlistą z Chrome Dev Summit 2018 na naszym kanale w YouTube.

Eva i Phil omówili kilka przydatnych technik korzystania z usług działających w tle w artykule Tworzenie szybszych i bardziej odpornych aplikacji za pomocą usług działających w tle.

Mariko i Jake opowiedzieli o tym, jak tworzyli Squoosh w artykule Złożone aplikacje internetowe oparte na JS – unikanie spowolnień.

Katie i Houssein omówili kilka świetnych technik maksymalizowania wydajności witryny w artykule Speed Essentials: Key Techniques for Fast Websites (Podstawy szybkości: kluczowe techniki tworzenia szybkich witryn).

Jake upuścił ciasto. W playliście z Chrome Dev Summit 2018 znajdziesz też wiele innych świetnych filmów.

Subskrybuj

Jeśli chcesz być na bieżąco z naszych filmów, zasubskrybuj kanał YouTube dla programistów Chrome. Otrzymasz wtedy e-maila z powiadomieniem, gdy opublikujemy nowy film.

Nazywam się Pete LePage i zaraz po wydaniu Chrome 72 opowiem Ci o nowościach w tej przeglądarce.