Di Chrome 74, kami telah menambahkan dukungan untuk:
- Membuat kolom class pribadi di JavaScript kini jauh lebih bersih.
- Anda dapat mendeteksi saat pengguna meminta pengalaman pengurangan pengalaman gerakan.
- Peristiwa transisi CSS
- Menambahkan API kebijakan fitur baru untuk memeriksa apakah fitur diaktifkan atau tidak.
Dan masih ada banyak lagi!
Saya Pete LePage. Mari selami dan lihat apa yang baru untuk developer di Chrome 74!
Log perubahan
Ini hanya mencakup beberapa sorotan utama, periksa link di bawah untuk perubahan tambahan di Chrome 74.
- Yang baru di Chrome DevTools (74)
- Penghentian & penghapusan Chrome 74
- Update ChromeStatus.com untuk Chrome 74
- Yang baru di JavaScript di Chrome 74
- Daftar perubahan repositori sumber Chromium
Kolom class pribadi
Kolom class menyederhanakan sintaksis class dengan menghindari kebutuhan akan fungsi konstruktor hanya untuk menentukan properti instance. Di Chrome 72, kami menambahkan dukungan untuk kolom class publik.
class IncreasingCounter {
// Public class field
_publicValue = 0;
get value() {
return this._publicValue;
}
increment() {
this._publicValue++;
}
}
Dan saya bilang bidang kelas
pribadi sedang diperbaiki. Saya senang mengatakan bahwa bidang
kelas pribadi telah diterapkan di Chrome 74. Sintaksis kolom pribadi baru mirip dengan kolom publik, tetapi Anda menandai kolom tersebut sebagai pribadi menggunakan #
(tanda pagar). Anggaplah #
sebagai bagian dari nama kolom.
class IncreasingCounter {
// Private class field
#privateValue = 0;
get value() {
return this.#privateValue;
}
increment() {
this.#privateValue++;
}
}
Ingat, kolom private
hanya bersifat pribadi. Fungsi tersebut dapat diakses
di dalam class, tetapi tidak tersedia di luar isi class.
class SimpleClass {
_iAmPublic = 'shared';
#iAmPrivate = 'secret';
doSomething() {
...
}
}
Untuk membaca lebih lanjut tentang class publik dan pribadi, lihat postingan Mathias tentang kolom class.
prefers-reduced-motion
Beberapa pengguna melaporkan mengalami mabuk perjalanan saat melihat scrolling paralaks, zoom, dan efek gerakan lainnya. Untuk mengatasinya, banyak sistem operasi menyediakan opsi untuk mengurangi gerakan bila memungkinkan.
Chrome kini menyediakan kueri media, prefers-reduced-motion
- bagian dari
spesifikasi Kueri Media Level 5, yang memungkinkan Anda mendeteksi saat opsi
ini diaktifkan.
@media (prefers-reduced-motion: reduce)
Bayangkan saya memiliki tombol daftar yang menarik perhatian ke tombol itu sendiri dengan sedikit gerakan. Kueri baru memungkinkan saya mematikan {i>motion <i}hanya untuk tombolnya.
button {
animation: vibrate 0.3s linear infinite both;
}
@media (prefers-reduced-motion: reduce) {
button {
animation: none;
}
}
Lihat artikel Tom Move Ya! Atau mungkin, jangan, jika pengguna lebih memilih-pengurangan-motion! untuk mengetahui detail selengkapnya.
Peristiwa transition
CSS
Spesifikasi Transisi CSS mengharuskan peristiwa transisi dikirim saat transisi diantrekan, dimulai, berakhir, atau dibatalkan. Peristiwa ini telah didukung di browser lain selama beberapa waktu...
Namun, sampai sekarang, versi tersebut tidak didukung di Chrome. Di Chrome 74, kini Anda dapat memproses:
transitionrun
transitionstart
transitionend
transitioncancel
Dengan memproses peristiwa ini, Anda dapat melacak atau mengubah perilaku saat transisi dijalankan.
Update API kebijakan fitur
Kebijakan fitur, memungkinkan Anda mengaktifkan, menonaktifkan, dan mengubah perilaku API dan fitur web lainnya secara selektif. Hal ini dilakukan melalui header Kebijakan Fitur atau melalui atribut izinkan di iframe.
Feature-Policy: geolocation 'self'
<iframe ... allow="geolocation self">
</iframe>
Chrome 74 memperkenalkan kumpulan API baru untuk memeriksa fitur mana yang diaktifkan:
- Anda bisa mendapatkan daftar fitur yang diizinkan dengan
document.featurePolicy.allowedFeatures()
. - Anda dapat memeriksa apakah fitur tertentu diizinkan dengan
document.featurePolicy.allowsFeature(...)
. - Anda juga bisa mendapatkan daftar domain yang digunakan di halaman saat ini yang mengizinkan fitur tertentu dengan
document.featurePolicy.getAllowlistForFeature()
.
Lihat postingan Pengantar Kebijakan Fitur untuk detail selengkapnya.
Dan banyak lagi!
Ini hanyalah beberapa perubahan di Chrome 74 untuk developer, tentu saja, masih banyak lagi. Secara pribadi, saya cukup antusias dengan KV Storage, layanan penyimpanan kunci/nilai yang sangat cepat dan asinkron, yang tersedia sebagai uji coba origin.
Google I/O akan segera berlangsung!
Dan jangan lupa - Google I/O tinggal beberapa minggu lagi (7 sampai 9 Mei) dan kami akan punya banyak hal menarik baru untuk Anda. Jika Anda tidak dapat hadir, semua sesi akan di-live streaming, dan setelah itu akan tersedia di channel YouTube Developer Chrome kami.
Langganan
Ingin terus mengetahui info terbaru tentang video kami, lalu subscribe ke channel YouTube Developer Chrome kami, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.
Saya Pete LePage, dan segera setelah Chrome 75 dirilis, saya akan ada di sini untuk memberi tahu Anda -- apa yang baru di Chrome!