Baru di Chrome 117

Adriana Jara

Berikut hal yang perlu Anda ketahui:

Saya Adriana Jara. Mari kita pelajari lebih dalam dan lihat apa yang baru untuk developer di Chrome 117.

Fitur CSS baru untuk animasi masuk dan keluar.

Ketiga fitur CSS baru ini menyelesaikan pengaturan untuk menambahkan animasi masuk dan keluar dengan mudah, dan menganimasikan dengan halus ke dan dari elemen yang dapat ditutup dari lapisan atas seperti dialog dan popover.

Fitur pertama adalah transition-behavior. Untuk mentransisikan properti terpisah, seperti display, gunakan nilai allow-discrete untuk transition-behavior.

.card {
  transition: opacity 0.25s, display 0.25s;
  transition-behavior: allow-discrete; /* Note: be sure to write this after the shorthand */
}

.card.fade-out {
  opacity: 0;
  display: none;
}

Kemudian, aturan @starting-style digunakan untuk menganimasikan efek entri dari display: none dan ke lapisan atas. Gunakan @starting-style untuk menerapkan gaya yang dapat dicari browser sebelum elemen dibuka di halaman.

/*  0. BEFORE-OPEN STATE   */
/*  Starting point for the transition */
@starting-style {
  .item {
    opacity: 0;
    height: 0;
  }
}

/*  1. IS-OPEN STATE   */
/*  The state at which the element is open + transition logic */
.item {
  height: 3rem;
  display: grid;
  overflow: hidden;
  transition: opacity 0.5s, transform 0.5s, height 0.5s, display 0.5s allow-discrete;
}

/*  2. EXITING STATE   */
/*  While it is deleting, before DOM removal in JS, apply this
    transformation for height, opacity, and a transform which
    skews the element and moves it to the left before setting
    it to display: none */
.is-deleting {
  opacity: 0;
  height: 0;
  display: none;
  transform: skewX(50deg) translateX(-25vw);
}

Terakhir, untuk memudarkan popover atau dialog dari lapisan atas, tambahkan properti overlay ke daftar transisi Anda. Sertakan overlay dalam transisi atau animasi untuk menganimasikan overlay bersama fitur lainnya, dan pastikan overlay tetap berada di lapisan atas ketika menganimasikan. Proses ini akan terlihat jauh lebih lancar.

[open] {
  transition: opacity 1s, display 1s allow-discrete;
}

[open] {
  transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}

Baca Empat fitur CSS baru untuk animasi masuk dan keluar yang lancar untuk detail tentang cara menggunakan fitur ini guna meningkatkan pengalaman pengguna dengan gerakan.

Pengelompokan array

Dalam pemrograman, pengelompokan array adalah operasi yang sangat umum, paling sering terlihat ketika kita menggunakan klausa GROUP BY dan pemrograman MapReduce SQL (yang lebih baik dianggap sebagai map-group-reduce).

Kemampuan untuk menggabungkan data ke dalam grup memungkinkan developer menghitung set data dengan urutan yang lebih tinggi. Misalnya, usia rata-rata kelompok, atau nilai LCP harian untuk halaman web.

Pengelompokan array memungkinkan skenario ini dengan menambahkan metode statis Object.groupBy dan Map.groupBy.

groupBy memanggil fungsi callback yang diberikan satu kali untuk setiap elemen dalam iterable. Fungsi callback harus menampilkan string atau simbol yang menunjukkan grup elemen terkait.

Pada contoh berikut, dari dokumentasi MDN, terdapat array produk dengan metode groupBy yang digunakan untuk menampilkannya yang dikelompokkan berdasarkan jenisnya.

const inventory = [
  { name: "asparagus", type: "vegetables", quantity: 5 },
  { name: "bananas", type: "fruit", quantity: 0 },
  { name: "goat", type: "meat", quantity: 23 },
  { name: "cherries", type: "fruit", quantity: 5 },
  { name: "fish", type: "meat", quantity: 22 },
];

const result = Object.groupBy(inventory, ({ type }) => type);

/* Result is:
{
  vegetables: [
    { name: 'asparagus', type: 'vegetables', quantity: 5 },
  ],
  fruit: [
    { name: "bananas", type: "fruit", quantity: 0 },
    { name: "cherries", type: "fruit", quantity: 5 }
  ],
  meat: [
    { name: "goat", type: "meat", quantity: 23 },
    { name: "fish", type: "meat", quantity: 22 }
  ]
}
*/

Untuk mengetahui detail selengkapnya, lihat dokumentasi groupBy.

Penggantian lokal disederhanakan di DevTools.

Fitur penggantian lokal kini disederhanakan, sehingga Anda dapat dengan mudah meniru header respons dan konten web resource jarak jauh dari panel Jaringan tanpa mengakses fitur tersebut.

Untuk mengganti konten web, buka panel Jaringan, klik kanan permintaan, lalu pilih Ganti konten.

Opsi penggantian di menu drop-down permintaan.

Jika Anda telah menyiapkan penggantian lokal tetapi dinonaktifkan, DevTools akan mengaktifkannya. Jika Anda belum menyiapkannya, DevTools akan meminta Anda di panel tindakan di bagian atas. Pilih folder untuk menyimpan penggantian dan izinkan akses DevTools ke folder tersebut.

Pilih folder dan izinkan akses ke folder tersebut dalam panel tindakan di bagian atas.

Setelah penggantian disiapkan, DevTools akan mengarahkan Anda ke Sumber > Penggantian > Editor agar Anda dapat mengganti konten web.

Perlu diketahui bahwa resource yang diganti ditunjukkan dengan Disimpan. di panel Network. Arahkan kursor ke ikon untuk melihat bagian yang diganti.

Ikon penggantian di samping permintaan dalam panel Jaringan.

Lihat yang baru di DevTools untuk mengetahui semua detail dan informasi selengkapnya tentang DevTools di Chrome 117.

Dan banyak lagi!

Tentu saja masih banyak lagi.

Bacaan lebih lanjut

Artikel ini hanya mencakup beberapa sorotan utama. Periksa tautan di bawah untuk perubahan tambahan di Chrome 117.

Langganan

Untuk mendapatkan info terbaru, berlangganan Channel YouTube Developer Chrome, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.

Halo Adriana Jara, dan segera setelah Chrome 117 dirilis, saya akan ada di sini untuk memberi tahu Anda apa saja yang baru di Chrome.