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.

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

Menampilkan waktu relatif telah menjadi hal yang sangat umum sehingga sebagian besar library tanggal/waktu umum menyediakan fungsi yang dilokalkan untuk menangani hal ini. 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 sedikit peningkatan performa, yang 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'

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, 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 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 versus mode yang benar-benar imersif tanpa kontrol agen pengguna 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 dalam 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 dalam artikel Speed Essentials: Key Techniques for Fast Website.

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

Langganan

Ingin mendapatkan info terbaru terkait video kami, lalu subscribe ke channel YouTube Chrome Developers kami, 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.