Yang baru di Chrome 154

Rachel Andrew

Dipublikasikan: 22 September 2026

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

Sorotan dari rilis ini:

Ukuran responsif <iframe>

Chrome 154 menambahkan dukungan untuk iframe berukuran responsif, sehingga elemen <iframe> dalam dokumen induk dapat menyesuaikan ukurannya dengan tata letak dokumen yang disematkan dan ukuran overflow sehingga scroll di dokumen turunan dapat dihindari. Hal ini menggantikan pola saat Anda mengukur konten iframe secara manual, mengirimkan dimensi dengan postMessage(), dan memperbarui ukuran iframe di halaman penyematan.

Untuk menyesuaikan ukuran iframe dengan tinggi kontennya, gunakan properti CSS frame-sizing pada elemen <iframe> di halaman penyematan:

.embed {
  width: 100%;
  frame-sizing: content-height;
}

Dokumen sematan juga harus memilih untuk ikut serta dengan menyertakan elemen <meta name="responsive-embedded-sizing"> dalam <head>-nya:

<meta name="responsive-embedded-sizing" content="allow-origins=*">

Untuk mengetahui detail dan demo selengkapnya, lihat iframe responsif di Chrome 154.

Mode scroll-marker-group CSS

Properti scroll-marker-group mengontrol apakah penampung scroll membuat pseudo-elemen ::scroll-marker-group sebelum atau setelah kontennya. Chrome 154 meningkatkan scroll-marker-group dengan dua mode yang menetapkan urutan fokus dan semantik aksesibilitas WAI-ARIA dari ::scroll-marker-group dan ::scroll-marker:

/* Links mode (default) */
scroll-marker-group: after links;

/* Tabs mode */
scroll-marker-group: before tabs;

CSS text-decoration-inset

Secara default, dekorasi teks elemen (seperti garis bawah, garis atas, atau coretan) memiliki panjang yang sama dengan teks yang dirender. Properti CSS text-decoration-inset memungkinkan Anda menyesuaikan titik awal dan akhir dekorasi teks elemen sehingga disisipkan dari, diperluas di luar, atau bergeser relatif terhadap tepi rangkaian teks.

text-decoration-inset menerima nilai auto, panjang, dan persentase menggunakan sintaksis satu nilai atau dua nilai, misalnya untuk menyisipkan kedua ujung sebesar 10 piksel:

text-decoration-inset: 10px;

Nilai positif menyisipkan dekorasi (membuatnya lebih pendek), sedangkan nilai negatif mengeluarkan dekorasi (membuatnya lebih panjang). Dengan begitu, Anda dapat menyesuaikan jarak dekorasi dan membuat efek reveal garis bawah animasi dengan dekorasi teks CSS, bukan gradien latar belakang atau elemen tambahan.

Untuk mengetahui informasi selengkapnya, lihat dokumentasi text-decoration-inset di MDN.

Bacaan lebih lanjut

Hal ini hanya mencakup beberapa sorotan utama. Buka link berikut untuk mengetahui perubahan tambahan di Chrome 154:

Langganan

Untuk terus 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 155 dirilis, kami akan memberi tahu Anda hal-hal baru di Chrome.