Nowości w Chrome 62

Pete LePage

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

Mam na imię Pete LePage. Sprawdź, co nowego w Chrome 62 dla deweloperów.

Chcesz zobaczyć pełną listę zmian? Sprawdź listę zmian w repozytorium źródłowym Chromium.

Wskaźnik jakości sieci

Interfejs Network Information API jest dostępny w Chrome od jakiegoś czasu, ale podaje tylko teoretyczne prędkości sieci w zależności od połączenia użytkownika. Wyobraź sobie, że masz połączenie Wi-Fi, ale połączysz się z hotspotem komórkowym, który ma tylko prędkość 2G. Interfejs API raportuje WiFi.

console.log(navigator.connection.type);
> wifi

W Chrome 62 interfejs API został rozszerzony o rzeczywiste dane o wydajności sieci pochodzące z klienta. Korzystając z tych sygnałów dotyczących jakości sieci, możesz dostosować treści do sieci. Na przykład w przypadku bardzo wolnych połączeń możesz poprawić wydajność wczytywania strony, wyświetlając jej wersję uproszczoną.

Aby uprościć logikę aplikacji, interfejs API zwraca zmierzoną wydajność sieci w porównaniu z połączeniem komórkowym. Na przykład w przypadku połączenia z superszybką siecią światłowodową interfejs API zgłosi wartość 4G.

console.log(navigator.connection.effectiveType);
> 4G

Te sygnały będą też dostępne jako nagłówki żądań HTTP i będą włączane za pomocą wskazówek klienta. Aby dowiedzieć się więcej, zapoznaj się z przykładem i specyfikacją.

Czcionki zmienne OpenType

Tradycyjnie jeden czcionka zawierał tylko jeden egzemplarz rodziny czcionek, na przykład jedną grubość lub jeden rozciąg. Jeśli chcesz użyć czcionki normalnej, pogrubionej i kursywy, musisz użyć 3 osobnych czcionek, co zwiększy rozmiar strony.

Czcionka zmienna OpenType jest odpowiednikiem wielu pojedynczych czcionek, które można umieścić w jednym pliku czcionki. Dzięki dostosowywaniu właściwości CSS font-variation-settings można łatwo zmieniać rozciągnięcie, styl, wagę i inne parametry, uzyskując w ten sposób nieskończoną liczbę wariantów stylistycznych. Te 3 czcionki można teraz połączyć w jeden, zwarty plik.

.heading {
  font-family: "Avenir Next Variable";
  font-size: 48px;
  font-variation-settings: 'wght' 700, 'wdth' 75;
}
.content {
  font-family: "Avenir Next Variable";
  font-size: 24px;
  font-variation-settings: 'wght' 400;
}

Czcionki zmienne OpenType to potężne nowe narzędzie do tworzenia responsywnej typografii i zmniejszania rozmiaru strony. Więcej informacji znajdziesz w artykule Introducing OpenType Variable Fonts (w języku angielskim) autorstwa Johna Hudsona.

Przechwytywanie multimediów z elementów DOM

Teraz możesz nagrywać treści MediaStream bezpośrednio z HTMLMediaElements, np. audio i wideo, za pomocą interfejsu Media Capture z DOM Elements API.

Po wywołaniu captureStream() w elemencie multimedialnym HTML treści strumieniowe można manipulować, przetwarzać, wysyłać zdalnie lub nagrywać. Wyobraź sobie, że używasz dźwięku internetowego do tworzenia własnego korektora lub vocodera. Możesz też przesyłać treści do witryny zdalnej za pomocą WebRTC. Możliwości są nieograniczone.

Etykiety „Niezabezpieczone” na niektórych stronach HTTP

Jak ogłosiliśmy wcześniej, od wersji Chrome 62, gdy użytkownik wprowadzi dane na stronie HTTP, Chrome będzie oznaczać tę stronę jako „niezabezpieczona” za pomocą etykiety na pasku adresu. Ta etykieta będzie też widoczna w trybie incognito na wszystkich stronach HTTP.

I inne funkcje

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

Następnie zasubskrybuj nasz kanał w YouTube, a otrzymasz e-maila z powiadomieniem o każdym nowym filmie.

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