Baru di Chrome 62

Pete LePage

Dan masih ada banyak lagi.

Saya Pete LePage. Mari kita pelajari lebih dalam dan lihat hal-hal baru untuk developer di Chrome 62.

Ingin daftar lengkap perubahan? Lihat daftar perubahan repositori sumber Chromium.

Indikator Kualitas Jaringan

Network Information API telah tersedia di Chrome untuk sementara waktu, tetapi hanya memberikan kecepatan jaringan teoretis mengingat koneksi pengguna. Bayangkan Anda berada di WiFi, tetapi terhubung ke {i>hotspot<i} seluler yang hanya memiliki kecepatan 2G? API akan melaporkan Wi-Fi.

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

Di Chrome 62, API telah diperluas untuk memberikan metrik performa jaringan aktual dari klien. Dengan menggunakan sinyal kualitas jaringan ini, Anda dapat menyesuaikan konten dengan jaringan. Misalnya, pada koneksi yang sangat lambat, Anda dapat meningkatkan performa pemuatan halaman dengan menampilkan versi yang lebih rendah.

Untuk menyederhanakan logika aplikasi Anda, API menampilkan performa jaringan yang diukur dalam hal perbandingannya dengan koneksi seluler. Misalnya, terhubung ke koneksi fiber super cepat, API akan melaporkan 4G.

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

Sinyal ini juga akan tersedia sebagai header permintaan HTTP dan diaktifkan melalui Petunjuk Klien. Lihat contoh dan lihat spec untuk mempelajari lebih lanjut.

Font Variabel OpenType

Secara tradisional, satu font hanya berisi satu instance jenis font, misalnya satu ketebalan atau satu peregangan. Jika Anda menginginkan reguler, tebal, dan miring, Anda harus menyertakan tiga {i>font<i} terpisah, untuk meningkatkan ketebalan laman Anda.

Font variabel OpenType setara dengan beberapa font individual yang dapat dikemas rapat dalam satu file font. Dengan menyesuaikan font-variation-settings, properti CSS, regangan, gaya, bobot, dan lainnya, dapat disesuaikan dengan mudah, memberikan jumlah variasi gaya yang tak terbatas. Ketiga font tersebut kini dapat digabungkan menjadi satu file yang ringkas.

.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;
}

Font variabel OpenType memberi kita alat baru yang canggih untuk membuat tipografi responsif, dan mengurangi bobot halaman. Lihat Memperkenalkan Font Variabel OpenType oleh John Hudson untuk detail selengkapnya.

Perekaman media dari elemen DOM

Sekarang Anda dapat merekam langsung konten ke MediaStream langsung dari HTMLMediaElements seperti audio dan video, dengan Media Capture dari DOM Elements API.

Setelah memanggil captureStream() pada elemen media HTML, konten yang di-streaming dapat dimanipulasi, diproses, dikirim dari jarak jauh, atau direkam. Bayangkan menggunakan audio web untuk membuat equalizer atau vocoder Anda sendiri. Atau lakukan streaming konten ke situs jarak jauh menggunakan WebRTC. Kemungkinannya hampir tak terbatas.

Label Tidak Aman untuk beberapa halaman HTTP

Seperti yang telah kami umumkan sebelumnya, mulai Chrome 62, saat pengguna memasukkan data di halaman HTTP, Chrome akan menandai halaman tersebut sebagai "Tidak Aman" dengan label di kolom URL. Label ini juga akan ditampilkan dalam Mode Samaran untuk semua halaman HTTP.

Dan banyak lagi!

Ini hanyalah beberapa perubahan di Chrome 62 untuk developer, tentu saja, masih banyak lagi.

Kemudian, subscribe ke channel YouTube kami, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.

Saya Pete LePage, dan segera setelah Chrome 63 dirilis, saya akan memberi tahu Anda apa yang baru di Chrome!