Baru di Chrome 74

Pete LePage

Di Chrome 74, kami telah menambahkan dukungan untuk:

Dan masih banyak lagi fitur lainnya.

Saya Pete LePage. Mari kita pelajari lebih lanjut 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.

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 mengatakan bahwa kolom class pribadi sedang dalam proses. Dengan senang hati kami sampaikan bahwa kolom class pribadi telah hadir di Chrome 74. Sintaksis kolom pribadi baru mirip dengan kolom publik, kecuali Anda menandai kolom sebagai pribadi menggunakan # (tanda pagar). Anggap # sebagai bagian dari nama kolom.

class IncreasingCounter {
  // Private class field
  #privateValue = 0;
  get value() {
    return this.#privateValue;
  }
  increment() {
    this.#privateValue++;
  }
}

Ingat, kolom private bersifat pribadi. Class ini dapat diakses di dalam class, tetapi tidak tersedia di luar isi class.

class SimpleClass {
  _iAmPublic = 'shared';
  #iAmPrivate = 'secret';
  doSomething() {
    ...
  }
}

Untuk membaca selengkapnya tentang class publik dan pribadi, lihat postingan Mathias di kolom class.

prefers-reduced-motion

Beberapa pengguna melaporkan rasa mual saat melihat scrolling paralaks, zooming, dan efek gerakan lainnya. Untuk mengatasinya, banyak sistem operasi menyediakan opsi untuk mengurangi gerakan jika memungkinkan.

Chrome kini menyediakan kueri media, prefers-reduced-motion - bagian dari spesifikasi Media Queries Level 5, yang memungkinkan Anda mendeteksi saat opsi ini diaktifkan.


@media (prefers-reduced-motion: reduce)

Bayangkan saya memiliki tombol sign-up yang menarik perhatian dengan sedikit gerakan. Kueri baru ini memungkinkan saya menonaktifkan gerakan hanya untuk tombol tersebut.

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 prefers-reduced-motion! untuk mengetahui detail selengkapnya.

Peristiwa transition CSS

Spesifikasi CSS Transition mewajibkan peristiwa transisi dikirim saat transisi diantrekan, dimulai, diakhiri, atau dibatalkan. Peristiwa ini telah didukung di browser lain selama beberapa waktu…

Namun, hingga saat ini, fitur tersebut tidak didukung di Chrome. Di Chrome 74, Anda kini 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 memodifikasi perilaku API dan fitur web lainnya secara selektif. Hal ini dilakukan melalui header Feature-Policy atau melalui atribut izin 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(...).
  • Selain itu, Anda bisa mendapatkan daftar domain yang digunakan di halaman saat ini yang mengizinkan fitur tertentu dengan document.featurePolicy.getAllowlistForFeature().

Lihat postingan Pengantar Kebijakan Fitur untuk mengetahui 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 Penyimpanan KV, layanan penyimpanan kunci/nilai asinkron yang super cepat, tersedia sebagai uji coba origin.

Google I/O akan segera hadir!

Dan jangan lupa - Google I/O tinggal beberapa minggu lagi (7 sampai 9 Mei) dan kami akan punya banyak hal baru yang keren untuk Anda. Jika Anda tidak dapat hadir, semua sesi akan di-live streaming, dan setelah itu akan tersedia di channel YouTube Developer Chrome.

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 75 dirilis, saya akan langsung memberi tahu Anda -- yang baru di Chrome.