Baru di Chrome 62

Pete LePage

Dan masih banyak lagi fitur lainnya.

Saya Pete LePage. Mari kita lihat apa saja yang baru untuk developer di Chrome 62.

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

Indikator Kualitas Jaringan

Network Information API telah tersedia di Chrome selama beberapa waktu, tetapi hanya memberikan kecepatan jaringan teoretis mengingat koneksi pengguna. Bayangkan Anda menggunakan Wi-Fi, tetapi terhubung ke hotspot 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 yang sebenarnya 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 menayangkan versi yang diperkecil.

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 spesifikasi 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 font biasa, tebal, dan miring, Anda harus menyertakan tiga font terpisah, sehingga meningkatkan ketebalan halaman.

Font variabel OpenType setara dengan beberapa font individual yang dapat dikemas secara ringkas dalam satu file font. Dengan menyesuaikan properti CSS font-variation-settings, rentang, gaya, ketebalan, dan lainnya, dapat dengan mudah disesuaikan, yang memberikan variasi gaya yang tak terbatas. Ketiga font tersebut kini dapat digabungkan menjadi satu file 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 berat halaman. Lihat Memperkenalkan Font Variabel OpenType oleh John Hudson untuk detail selengkapnya.

Perekaman media dari elemen DOM

Sekarang Anda dapat mengambil konten secara live ke MediaStream langsung dari HTMLMediaElements seperti audio dan video, dengan Media Capture from 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, streamingkan konten ke situs jarak jauh menggunakan WebRTC. Kemungkinannya hampir tidak ada batasnya.

Label Tidak Aman untuk beberapa halaman HTTP

Seperti yang 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, ada 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 langsung memberi tahu Anda -- apa yang baru di Chrome.