Dipublikasikan: 3 Juni 2026
Selamat datang di ringkasan bulanan Baseline. Pada Mei 2026, beberapa fitur CSS baru, properti peristiwa, dan penambahan API menjadi Baseline Baru tersedia, sementara unit CSS, properti interaksi pengguna, dan pseudo-class mencapai Baseline Tersedia secara luas, bersama dengan pembaruan penting dari komunitas developer.
Survei State of CSS 2026
Pemeriksaan rutin tahunan komunitas web telah hadir: survei State of CSS 2026 kini dibuka. Tahun ini, penyelenggara telah melakukan upaya sadar untuk menyempurnakan survei, dengan berfokus pada fitur yang paling penting bagi developer di era coding yang dibantu AI. Vendor browser memantau hasil ini dengan cermat untuk membantu memprioritaskan peta strategi teknik mereka dan mengatasi masalah yang dihadapi developer. Pastikan Anda memberikan pendapat dan berbagi pengalaman dengan lanskap CSS yang terus berkembang sebelum survei ditutup pada 1 Juli.
Fitur Baseline yang baru tersedia
Fitur di bagian ini didukung mulai Mei 2026 di set browser inti dan kini tersedia sebagai Baseline Baru.
Kueri gaya penampung
Kueri penampung tidak lagi terbatas pada ukuran. Dengan kueri gaya, Anda kini dapat menerapkan gaya ke elemen berdasarkan properti kustom penampung induk. Hal ini memungkinkan Anda membuat komponen yang sangat modular yang dapat mengadaptasi tema atau gaya berdasarkan penempatan kontekstualnya tanpa bergantung pada struktur class yang kompleks.
Pelajari lebih lanjut di halaman referensi MDN untuk @container.
Pseudo-class :open
Sebelumnya, penataan gaya elemen yang memiliki status terbuka dan tertutup—seperti <dialog> dan <details>—memerlukan pemeriksaan atribut atau pengelolaan class. Pseudo-class :open menyederhanakan hal ini dengan mencocokkan elemen ini hanya saat elemen tersebut saat ini dalam status terbuka, sehingga memungkinkan CSS yang lebih bersih dan lebih deklaratif.
Baca tentang hal ini di halaman MDN untuk pseudo-class :open.
ToggleEvent.source
Saat menggunakan Popover API, bereaksi terhadap perubahan status sangat penting. Properti source dari antarmuka ToggleEvent menampilkan elemen kontrol yang memicu tindakan tombol popover. Hal ini memungkinkan Anda mengidentifikasi asal peristiwa dan mengoordinasikan interaksi UI yang kompleks.
Cari tahu selengkapnya di dokumentasi MDN untuk ToggleEvent.source.
Properti image-rendering
Properti CSS image-rendering memungkinkan Anda mengontrol algoritma penskalaan yang digunakan saat mengubah ukuran gambar. Hal ini sangat berguna untuk seni piksel, gambar beresolusi rendah, atau kode QR yang penting untuk menghindari interpolasi buram dan menjaga penskalaan tetap tajam dan berpiksel.
Pelajari cara menggunakannya di halaman MDN untuk image-rendering.
text-decoration-skip-ink: all
Garis bawah yang melewati descender terkadang terlihat berantakan. Meskipun text-decoration-skip-ink: auto hanya melewati tinta saat berpotongan, menyetelnya ke all akan memaksa garis bawah untuk melewati semua glyph terlepas dari persimpangan, sehingga menawarkan kontrol yang lebih besar atas estetika tipografi.
Baca detailnya di panduan MDN untuk text-decoration-skip-ink.
SharedWorker
SharedWorker API menyediakan pekerja latar belakang khusus yang dapat diakses dari beberapa konteks penjelajahan, seperti jendela, tab, atau iframe yang berbeda pada asal yang sama. Hal ini sangat berguna untuk berbagi status, mengelola koneksi, atau mengoordinasikan tugas latar belakang di seluruh batas tab.
Lihat dokumentasi MDN untuk SharedWorker.
Fitur Baseline yang tersedia secara luas
Fitur berikut menjadi Baseline yang tersedia secara luas, yang berarti bahwa fitur tersebut kini kompatibel dan dapat digunakan secara luas dalam project Anda.
Unit panjang lh
Unit relatif lh sesuai dengan tinggi baris yang dihitung dari elemen tempat unit tersebut digunakan. Hal ini memudahkan ukuran elemen—seperti badge ikon atau sorotan latar belakang—agar sesuai dengan tinggi baris teks.
Pelajari lebih lanjut di referensi MDN untuk unit panjang.
Unit panjang rlh
Mirip dengan lh, unit rlh mewakili tinggi baris, tetapi khusus untuk elemen root (<html>). Hal ini memungkinkan Anda menetapkan ritme vertikal yang konsisten di seluruh halaman, terlepas dari ukuran font lokal atau penggantian tinggi baris.
Baca selengkapnya di referensi MDN untuk unit panjang.
Navigator.userActivation
Banyak API web (seperti pemutaran video, pop-up, atau akses papan klip) memerlukan interaksi pengguna sebelum dapat dipicu. Properti Navigator.userActivation menampilkan objek yang berisi informasi tentang status aktivasi pengguna saat ini dan historis di jendela, sehingga memungkinkan skrip memverifikasi apakah gestur pengguna telah terjadi.
Cari tahu cara menggunakannya di halaman MDN untuk Navigator.userActivation.
clip-path
Properti CSS clip-path memungkinkan Anda membuat wilayah kliping yang menentukan bagian elemen mana yang harus terlihat. Dengan menggunakan bentuk dasar (seperti lingkaran, elips, atau poligon) atau jalur SVG, Anda dapat membuat desain dan transisi tata letak yang menarik tanpa menyembunyikan overflow.
Periksa detail penerapan di halaman MDN untuk clip-path.
Pseudo-class :user-invalid
Tidak seperti :invalid, yang menerapkan gaya segera setelah pemuatan halaman (sering kali menyebabkan UX yang buruk), pseudo-class :user-invalid hanya cocok dengan elemen formulir yang tidak valid setelah pengguna berinteraksi dengannya. Artinya, Anda dapat menampilkan masukan validasi formulir setelah pengguna meninggalkan kolom.
Pelajari cara kerjanya di dokumentasi MDN untuk :user-invalid.
Selesai
Beri tahu kami jika ada hal terkait Baseline yang terlewat, dan kami akan memastikan hal tersebut dicatat dalam edisi mendatang. Jika ada pertanyaan atau ingin memberikan masukan tentang Baseline, Anda dapat mengajukan masalah di issue tracker kami.