Halaman ini diterjemahkan oleh Cloud Translation API.

Baru di Chrome 117

Adriana Jara

Berikut hal yang perlu Anda ketahui:

Tiga fitur CSS baru memudahkan penambahan animasi masuk dan keluar yang mulus.
Hitung set data tingkat tinggi dengan pengelompokan array.
DevTools mempermudah penggantian lokal.
Masih ada banyak lagi.

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

Fitur CSS baru untuk animasi masuk dan keluar.

Tiga fitur CSS baru ini melengkapi kumpulan untuk menambahkan animasi masuk dan keluar dengan mudah, dan menganimasikan dengan lancar ke dan dari elemen yang dapat ditutup di 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. 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;
}

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

/*  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 dengan fitur lainnya dan pastikan overlay tetap berada di lapisan atas saat menganimasikan. Tampilannya 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 untuk meningkatkan pengalaman pengguna dengan gerakan.

Pengelompokan array

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

Kemampuan untuk menggabungkan data ke dalam grup memungkinkan developer menghitung set data tingkat tinggi. Misalnya, usia rata-rata kohor, 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 iterabel. 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 menurut 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 membuat tiruan header respons dan konten web resource jarak jauh dari panel Jaringan 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 Anda belum menyiapkannya, DevTools akan meminta Anda di panel tindakan di bagian atas. Pilih folder untuk menyimpan penggantian dan izinkan DevTools mengaksesnya.

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

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

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

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.

Nilai subgrid yang sangat dinantikan untuk grid-template-columns dan grid-template-rows kini diterapkan di Chrome.
Ada uji coba penghentian penggunaan WebSQL dan uji coba developer untuk penghentian peristiwa unload.

Bacaan lebih lanjut

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

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

Yo soy Adriana Jara, dan segera setelah Chrome 117 dirilis, saya akan segera hadir untuk memberi tahu Anda yang baru di Chrome.