- W Chrome 62 interfejs API informacji o sieci jest jeszcze bardziej przydatny, ponieważ podaje rzeczywiste dane o wydajności, a nie wyniki teoretyczne.
- Dodano obsługę czcionek zmiennych OpenType.
- Możesz przechwytywać strumienie multimedialne z elementów multimedialnych HTML.
- Mam specjalne przypomnienie o ważnych zmianach, które pojawią się w Chrome 62.
A jest ich wiele więcej.
Mam na imię Pete LePage. Zobaczmy, co nowego dla deweloperów w Chrome 62.
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 superszybkim światłowodem 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. Aby uzyskać czcionkę standardową, pogrubioną i kursywą, dodaj 3 osobne czcionki, co zwiększy rozmiar strony.
Czcionka zmienna OpenType jest odpowiednikiem wielu pojedynczych czcionek, które można skompresować w jeden plik 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 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 OpenType Variable dają nam nowe, potężne 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 rejestrować treści na żywo w MediaStream bezpośrednio z HTMLMediaElements, np. dźwięk i obraz, za pomocą interfejsu Media Capture from 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 z dźwiękiem z internetu utworzysz własny korektor lub vocoder. 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.
- Interfejs Payment Request API jest teraz dostępny w Chrome na iOS.
- Możesz zacząć tworzyć eksperymentalne atrakcje VR w ramach testu origin WebVR.
Potem zasubskrybuj nasz kanał w YouTube, aby otrzymywać e-maile z powiadomieniami o każdej publikacji nowego filmu.
Nazywam się Pete LePage i zaraz po wydaniu Chrome 63 opowiem Ci o nowościach w tej przeglądarce.