Baru di Chrome 71

Pete LePage

Di Chrome 71, kami telah menambahkan dukungan untuk:

Dan masih ada banyak lagi.

Saya Pete LePage. Mari selami dan lihat apa yang baru untuk developer di Chrome 71.

Log Perubahan

Informasi ini hanya mencakup beberapa sorotan utama, periksa link di bawah untuk mengetahui perubahan tambahan di Chrome 71.

Tampilkan waktu relatif dengan Intl.RelativeTimeFormat()

Twitter menampilkan waktu relatif untuk postingan terbaru

Banyak aplikasi web menggunakan frasa seperti "kemarin", "dalam dua hari", atau "satu jam yang lalu" untuk menunjukkan kapan sesuatu terjadi - atau akan terjadi, bukan menampilkan tanggal dan waktu lengkapnya.

Menampilkan waktu relatif sudah menjadi sangat umum sehingga sebagian besar library tanggal/waktu yang umum menyediakan fungsi yang dilokalkan untuk menangani hal ini untuk kita. Bahkan, hampir setiap aplikasi web yang saya buat, Moment JS adalah salah satu library pertama yang saya tambahkan, secara khusus untuk tujuan ini.

Chrome 71 memperkenalkan Intl.RelativeTimeFormat(), yang mengalihkan pekerjaan ke mesin JavaScript, dan memungkinkan pemformatan waktu relatif yang dilokalkan. Hal ini akan memberi sedikit peningkatan performa, dan berarti kita hanya memerlukan library tersebut sebagai polyfill jika browser belum mendukung API baru.

const rtf = new Intl.RelativeTimeFormat('en');

rtf.format(3.14, 'second');
// → 'in 3.14 seconds'

rtf.format(-15, 'minute');
// → '15 minutes ago'

Caranya mudah, buat instance baru dan tentukan lokalitasnya, lalu cukup panggil format dengan waktu relatif. Lihat postingan Intl.RelativeTimeFormat API Mathias untuk detail selengkapnya.

Menentukan lokasi garis bawah untuk teks vertikal

Teks vertikal dengan garis bawah yang tidak konsisten

Jika teks bahasa China atau Jepang ditampilkan dalam alur vertikal, browser tidak konsisten dengan tempat garis bawah ditempatkan, mungkin di sebelah kiri atau kanan.

Di Chrome 71, properti text-underline-position kini menerima left atau right sebagai bagian dari spesifikasi dekorasi teks CSS3. Spesifikasi dekorasi teks CSS3 menambahkan beberapa properti baru yang memungkinkan penggunaan untuk menentukan hal-hal seperti jenis baris yang akan digunakan, gaya, warna, dan posisi.


.left {
  text-underline-position: left;
}

.right {
  text-underline-position: right;
}

Sintesis ucapan memerlukan aktivasi pengguna

Kami semua terkejut saat membuka sebuah situs dan tiba-tiba situs itu mulai berbicara dengan kita. Kebijakan putar otomatis mencegah situs memutar otomatis file audio atau video dengan audio. Beberapa situs telah mencoba mengatasi masalah ini dengan menggunakan API sintesis ucapan.

Mulai Chrome 71, API sintesis ucapan kini memerlukan semacam aktivasi pengguna di halaman agar dapat berfungsi. Hal ini sejalan dengan kebijakan putar otomatis lainnya. Jika Anda mencoba menggunakannya sebelum pengguna berinteraksi dengan halaman, error akan muncul.

const utterance = new window.SpeechSynthesisUtterance('Hello');
utterance.lang = lang || 'en-US';
try {
  window.speechSynthesis.speak(utterance);
} catch (ex) {
  console.log('speechSynthesis not available', ex);
}

Tidak ada yang lebih buruk daripada membuka situs dan membuatnya mengejutkan Anda, dan rekan kerja duduk di sekeliling Anda.

Dan banyak lagi!

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

  • Metode Element.requestFullscreen() kini dapat disesuaikan di Android dan memungkinkan Anda memilih antara membuat menu navigasi terlihat atau mode yang sepenuhnya imersif di mana tidak ada kontrol agen pengguna yang ditampilkan hingga gestur pengguna dilakukan.
  • Mode kredensial default untuk permintaan skrip modul, telah diubah dari omit menjadi same-origin.
  • Dan agar Chrome selaras dengan spesifikasi Shadow DOM v1, Chrome 71 kini menghitung kekhususan untuk class pseudo :host() dan :host-context() serta argumen untuk ::slotted().

Video Chrome DevSummit

Jika Anda tidak berhasil hadir di Chrome Dev Summit, atau mungkin sudah menghadirinya, tetapi tidak melihat semua perbincangan, lihat playlist Chrome Dev Summit 2018 di saluran YouTube kami.

Eva dan Phil mulai mempelajari beberapa teknik rapi untuk menggunakan pekerja layanan di Membuat Aplikasi yang Lebih Cepat dan Lebih Tangguh dengan Service Worker.

Mariko dan Jake membahas cara mereka membangun Squoosh di Aplikasi Web yang Kompleks dan Berat JS, Menghindari yang Lambat.

Katie dan Houssein membahas beberapa teknik bagus untuk memaksimalkan performa situs Anda dalam artikel Dasar-Dasar Kecepatan: Teknik Utama untuk Situs Cepat.

Jaka memberikan kuenya. Dan ada banyak video bagus lainnya di playlist Chrome DevSummit 2018, jadi tontonlah.

Subscribe

Ingin terus mendapatkan video terbaru kami, lalu berlangganan channel YouTube Developer Chrome kami, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.

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