Baru di Chrome 71

Pete LePage

Di Chrome 71, kami telah menambahkan dukungan untuk:

Dan masih banyak lagi fitur lainnya.

Saya Pete LePage. Mari kita lihat yang baru untuk developer di Chrome 71.

Log perubahan

Bagian ini hanya mencakup beberapa sorotan utama. Lihat link di bawah untuk perubahan tambahan di Chrome 71.

Menampilkan 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 lengkap.

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

Chrome 71 memperkenalkan Intl.RelativeTimeFormat(), yang menggeser pekerjaan ke mesin JavaScript, dan memungkinkan pemformatan lokal waktu relatif. Hal ini memberi kita sedikit peningkatan performa, dan berarti kita hanya memerlukan library tersebut sebagai polyfill saat 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'

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

Menentukan lokasi garis bawah untuk teks vertikal

Teks vertikal dengan garis bawah yang tidak konsisten

Saat teks China atau Jepang ditampilkan dalam alur vertikal, browser tidak konsisten dengan tempat garis bawah ditempatkan, mungkin di sebelah kiri, atau di sebelah 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 garis yang akan digunakan, gaya, warna, dan posisi.


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

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

Sintesis ucapan memerlukan aktivasi pengguna

Kita semua terkejut saat membuka situs dan tiba-tiba situs tersebut mulai berbicara kepada kita. Kebijakan putar otomatis mencegah situs memutar audio, atau file video dengan audio secara otomatis. Beberapa situs telah mencoba mengatasi hal ini dengan menggunakan API sintesis ucapan.

Mulai Chrome 71, API sintesis ucapan kini memerlukan semacam aktivasi pengguna di halaman sebelum dapat berfungsi. Hal ini selaras dengan kebijakan pemutaran otomatis lainnya. Jika Anda mencoba menggunakannya sebelum pengguna berinteraksi dengan halaman, kode ini akan memicu error.

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 yang mengejutkan Anda, dan rekan kerja yang duduk di sekitar Anda.

Dan banyak lagi!

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

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

Video Chrome DevSummit

Jika Anda tidak dapat menghadiri Chrome Dev Summit, atau mungkin Anda dapat menghadirinya, tetapi tidak melihat semua presentasi, lihat playlist Chrome Dev Summit 2018 di channel YouTube kami.

Eva dan Phil membahas beberapa teknik yang bagus untuk menggunakan pekerja layanan di Mem-build Aplikasi yang Lebih Cepat dan Lebih Tangguh dengan Pekerja Layanan.

Mariko dan Jake membahas cara mereka mem-build Squoosh di Aplikasi Web yang Rumit dan Berat JS, Menghindari Lambat.

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

Jake menjatuhkan kue. Selain itu, ada banyak video menarik lainnya di playlist Chrome DevSummit 2018, jadi lihat video tersebut.

Langganan

Ingin terus mendapatkan info terbaru tentang video kami, subscribe ke channel YouTube Chrome Developers, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.

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