Yang baru di Chrome 142

Rachel Andrew

Dipublikasikan: 28 Oktober 2025

Chrome 142 diluncurkan sekarang, dan postingan ini membagikan beberapa fitur utama dari rilis tersebut. Baca catatan rilis Chrome 142 selengkapnya.

Sorotan dari rilis ini:

Pseudo-class :target-before dan :target-after

Class pseudo ini cocok dengan penanda scroll yang berada sebelum atau setelah penanda aktif (yang cocok dengan :target-current) dalam grup penanda scroll yang sama, sebagaimana ditentukan oleh urutan hierarki datar:

  • :target-before: Mencocokkan semua penanda scroll yang mendahului penanda aktif dalam urutan hierarki datar dalam grup.
  • :target-after: Mencocokkan semua penanda scroll yang mengikuti penanda aktif dalam urutan hierarki datar dalam grup.

Sintaksis rentang untuk kueri penampung gaya dan if()

Chrome meningkatkan kualitas kueri gaya CSS dan fungsi if() dengan menambahkan dukungan untuk sintaksis rentang.

Fitur ini memperluas kueri gaya di luar pencocokan nilai persis (misalnya, style(--theme: dark)). Developer dapat menggunakan operator perbandingan (seperti > dan <) untuk membandingkan properti kustom, nilai literal (misalnya, 10 px atau 25%), dan nilai dari fungsi penggantian seperti attr() dan env(). Untuk perbandingan yang valid, kedua sisi harus diselesaikan ke jenis data yang sama. Nilai ini terbatas pada jenis numerik berikut: <length>, <number>, <percentage>, <angle>, <time>, <frequency>, dan <resolution>.

Contoh:

Membandingkan properti kustom dengan panjang literal:

@container style(--inner-padding > 1em) {
  .card {
    border: 2px solid;
  }
}

Membandingkan dua nilai literal

@container style(1em < 20px) {
  /* ... */
}

Menggunakan rentang gaya di if():

.item-grid {
  background-color: if(style(attr(data-columns, type<number>) > 2): lightblue; else: white);
}

Pemicu Minat (atribut interestfor)

Chrome menambahkan atribut interestfor ke elemen <button> dan <a>. Atribut ini menambahkan perilaku "minat" ke elemen. Saat pengguna menunjukkan minat pada elemen, tindakan akan dipicu pada elemen target, misalnya, menampilkan popover.

Agen pengguna mendeteksi saat pengguna menunjukkan minat pada elemen melalui metode seperti menahan kursor di atas elemen, menekan hotkey khusus di keyboard, atau menekan lama elemen di layar sentuh. Saat minat ditampilkan atau hilang, InterestEvent diaktifkan pada target, yang memiliki tindakan default untuk popover, seperti menampilkan dan menyembunyikan popover.

Bacaan lebih lanjut

Ini hanya mencakup beberapa sorotan utama. Lihat link berikut untuk mengetahui perubahan tambahan di Chrome 141.

Langganan

Agar tetap mendapatkan info terbaru, subscribe ke channel YouTube Chrome Developers, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru. Atau, ikuti kami di X atau LinkedIn untuk membaca artikel dan postingan blog baru.

Segera setelah Chrome 143 dirilis, kami akan memberi tahu Anda tentang fitur baru di Chrome.