Nowości w Chrome 62

Pete LePage

A jest to wiele innych!

Nazywam się Pete LePage. Przyjrzyjmy się, co nowego dla deweloperów w Chrome 62.

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

Wskaźnik jakości sieci

Interfejs Network Information API jest dostępny w Chrome od jakiegoś czasu, ale podaje tylko teoretyczne szybkości sieci w zależności od połączenia użytkownika. Wyobraź sobie, że masz połączenie z siecią Wi-Fi, ale połączone z hotspotem komórkowym, który działa tylko z prędkością 2G. Interfejs API zgłasza Wi-Fi!

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

W Chrome 62 interfejs API został rozszerzony, aby udostępniać po stronie klienta rzeczywiste dane o wydajności sieci. Korzystając z tych sygnałów, możesz dopasowywać treści do sieci. Na przykład w przypadku bardzo wolnych połączeń można przyspieszyć wczytywanie stron, wyświetlając ograniczoną wersję.

Aby uprościć działanie logiki aplikacji, interfejs API zwraca zmierzoną wydajność sieci w porównaniu do połączenia komórkowego. Na przykład jeśli masz bardzo szybkie połączenie światłowodowe, interfejs API zwróci informację 4G.

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

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

Czcionki zmiennych OpenType

Tradycyjnie jedna czcionka zawierała tylko jedno wystąpienie rodziny czcionek, np. 1 grubość lub 1 rozciąg. Aby użyć czcionki standardowej, pogrubionej i kursywy, musisz dodać 3 osobne czcionki, co zwiększy grubość strony.

Czcionka zmiennej typu OpenType jest odpowiednikiem kilku pojedynczych czcionek, które można umieścić w jednym pliku czcionek. Dzięki dostosowaniu właściwości CSS font-variation-settings można łatwo dostosować ustawienia rozciągania, stylu, grubości i innych elementów, co zapewnia nieskończoną liczbę wariacji stylistycznych. Te 3 czcionki można teraz połączyć w jeden kompaktowy 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 zmiennych OpenType dają nam nowe zaawansowane narzędzie do tworzenia elastycznej typografii i ograniczania rozmiaru strony. Aby dowiedzieć się więcej, zapoznaj się z publikacją John Hudson o wprowadzaniu czcionek zmiennych OpenType.

Przechwytywanie multimediów z elementów DOM

Teraz możesz przechwytywać treści na żywo w elemencie MediaStream bezpośrednio z poziomu HTMLMediaElements, np. audio i wideo, za pomocą Media Capture w interfejsie DOM Elements API.

Po wywołaniu funkcji captureStream() w elemencie multimedialnym HTML strumieniowana zawartość może być modyfikowana, przetwarzana, wysyłana zdalnie lub nagrywana. Wyobraź sobie, że używasz dźwięku z internetu do tworzenia własnego korektora lub vokodera. Możesz też przesyłać treści do witryny zdalnej za pomocą WebRTC. Możliwości są niemal nieograniczone.

Niezabezpieczone etykiety niektórych stron HTTP

Jak ogłosiliśmy wcześniej, od Chrome 62, gdy użytkownik wpisze dane na stronie HTTP, Chrome oznaczy tę stronę jako „Niezabezpieczona” z etykietą na pasku adresu. Ta etykieta będzie też widoczna w trybie incognito w przypadku wszystkich stron HTTP.

…i wiele innych.

To tylko niektóre ze zmian w Chrome 62 dla deweloperów, oczywiście jest ich znacznie więcej.

Potem zasubskrybuj nasz kanał 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 63, zajmę się tym, co nowego w Chrome.