Baru di Chrome 117

Adriana Jara

Berikut hal yang perlu Anda ketahui:

Saya Adriana Jara. Mari selami dan lihat hal-hal baru untuk developer di Chrome 117.

Fitur CSS baru untuk animasi masuk dan keluar.

Ketiga fitur CSS baru ini melengkapi rangkaian untuk menambahkan animasi masuk dan keluar dengan mudah, serta menganimasikan ke dan dari elemen yang dapat ditutup di lapisan atas seperti dialog dan popover.

Fitur pertama adalah transition-behavior. Untuk mentransisikan properti diskret, 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 akan digunakan untuk menganimasikan efek entri dari display: none ke lapisan teratas. 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 memastikan overlay tetap berada di lapisan teratas saat menganimasikan. Tindakan ini akan terlihat jauh lebih halus.

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

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

Lihat Empat fitur CSS baru untuk animasi masuk dan keluar yang lancar untuk mengetahui 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 dari SQL (yang lebih baik dianggap sebagai map-group-Reduce).

Kemampuan untuk menggabungkan data ke dalam grup memungkinkan developer menghitung set data pesanan 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 disediakan satu kali untuk setiap elemen dalam iterable. Fungsi callback harus menampilkan string atau simbol yang menunjukkan grup elemen terkait.

Dalam contoh berikut, dari dokumentasi MDN, ada array produk dengan metode groupBy yang digunakan untuk menampilkannya dan 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 dari resource jarak jauh dari panel Network tanpa akses ke resource 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 belum menyiapkannya, DevTools akan meminta Anda dalam panel tindakan di bagian atas. Pilih folder untuk menyimpan penggantian dan izinkan DevTools mengaksesnya.

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.

Perhatikan bahwa resource yang diganti ditunjukkan dengan Disimpan. di panel Network. Arahkan kursor ke ikon untuk melihat apa yang diabaikan.

Ikon penggantian di samping permintaan di panel Jaringan.

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

Dan banyak lagi!

Tentu saja masih banyak lagi.

Bacaan lebih lanjut

Bagian ini hanya mencakup beberapa sorotan utama. Periksa link di bawah untuk mengetahui perubahan tambahan di Chrome 117.

Langganan

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

Halo Adriana Jara, dan segera setelah Chrome 117 dirilis, saya akan langsung memberitahukan fitur-fitur baru di Chrome.