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.
• Możesz określić, na której stronie tekstu ma się pojawiać podkreślenie w przypadku tekstu opadającego w pionie.
• Wymaganie aktywacji przez użytkownika przed użyciem interfejsu API syntezy mowy.

A jest ich wiele więcej.

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 na ChromeStatus.com w przypadku Chrome 71
• Funkcje wycofane i usunięte z Chrome 71

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

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 czasu względnego jest tak powszechne, że większość popularnych bibliotek daty i godziny udostępnia zlokalizowane funkcje, które potrafią to załatwić. 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 JavaScript 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

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 autoodtwarzania uniemożliwiają witrynom automatyczne odtwarzanie plików audio i wideo z dźwiękiem. Niektóre strony próbowały obejść ten problem, korzystając z interfejsu Speech synthesis API.

Począwszy od wersji Chrome 71 interfejs Speech synthesis API będzie działać dopiero po aktywowaniu na stronie jakiegoś użytkownika. Jest to zgodne z innymi zasadami autoodtwarzania. 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);
}

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 zmian, które wprowadziliśmy w Chrome 71, ale oczywiście jest ich znacznie więcej.

• Metodę Element.requestFullscreen() można teraz spersonalizować na Androidzie, aby wybrać, czy pasek nawigacji 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.
• Domyślny tryb danych logowania dla żądań skryptu modułu zmienił się z omit na same-origin.
• Dzięki wykorzystaniu specyfikacji Shadow DOM w wersji 1 Chrome 71 oblicza precyzję pseudoklas :host() i :host-context() oraz argumentów ::slotted().

Filmy z konferencji Chrome DevSummit

Jeśli nie udało Ci się wziąć udziału w Chrome Dev Summit, ale nie udało Ci się obejrzeć wszystkich prezentacji, sprawdź playlistę 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 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 nasz kanał w YouTube dla deweloperów Chrome. Otrzymasz wtedy e-maila z powiadomieniem, gdy tylko opublikujemy nowy film.

Nazywam się Pete LePage i zaraz po wydaniu Chrome 72 opowiem Ci, co nowego w tej wersji przeglądarki.