Di Google I/O, saya menyampaikan berita tentang perkembangan Dasar Pengukuran sejak pengumuman kami di I/O tahun lalu. Saya juga mengumumkan Dasbor Platform Web, integrasi dengan Arsip RUM, dan integrasi yang akan datang dengan RUMvision. Postingan ini mengumpulkan semua referensi dari pembicaraan ke satu tempat.
Dasbor Platform Web adalah cara baru yang menarik untuk melihat seluruh platform web, dan perjalanan fitur individual terhadap interoperabilitas, dan menjadi bagian dari Dasar Pengukuran. Pelajari lebih lanjut di Mengumumkan Dasbor Platform Web.
Mengintegrasikan Baseline dengan alat yang Anda gunakan setiap hari selalu menjadi bagian dari visi untuk project ini. Kami ingin berurusan dengan kompatibilitas browser menjadi sesuatu yang tidak perlu menghabiskan banyak waktu untuk memikirkannya. Pelajari integrasi Arsip RUM lebih lanjut, dan tonton ruang ini untuk segera mengetahui berita tentang lebih banyak penyedia alat.
Baru menggunakan Baseline
Di I/O, saya membagikan 12 fitur platform web yang baru-baru ini menjadi bagian
dari Baseline Baru Tersedia. Fitur-fitur ini kini tersedia di Chrome, Edge, Firefox, dan Safari, serta beragam fitur tambahan yang dapat menyederhanakan pengembangan, hingga beberapa fitur yang paling dicari oleh developer, termasuk kueri container dan :has().
Ukuran kueri penampung
Kueri penampung ukuran memungkinkan Anda mengubah desain berdasarkan lebar atau ukuran inline penampung, bukan hanya dapat menargetkan ukuran area pandang dengan kueri media. Hal ini memungkinkan lebih banyak komponen yang dapat digunakan kembali dan dapat memodifikasi sendiri berdasarkan ruang yang tersedia saat ditempatkan ke tata letak. Desain ini telah menjadi daftar fitur yang paling dicari hampir selama konsep desain responsif telah ada.
- Baru tersedia pada Februari 2023.
- Tersedia secara luas pada Agustus 2025.
Pelajari kueri penampung di MDN lebih lanjut, di Kueri container disimpan di browser stabil, dan temukan bagaimana tim pengembangan lain mendapatkan manfaat darinya dalam studi kasus kueri container.
Pemilih :has()
Pemilih :has() memberi kita sesuatu yang telah menjadi permintaan teratas lainnya
dari developer selama bertahun-tahun—pemilih induk, cara untuk memilih elemen
berdasarkan apa yang ada di dalamnya. Tapi, :has() bisa lebih dari sekadar itu.
Seperti kueri penampung, hal ini sangat berguna saat membuat komponen yang dapat digunakan kembali, karena Anda dapat membuat satu komponen yang dapat beradaptasi dengan apa yang ada di dalamnya.
- Baru tersedia pada Desember 2023.
- Tersedia secara luas pada Juni 2026.
Pelajari lebih lanjut :has() di MDN,
di :has() pemilih keluarga,
dan di studi kasus :has().
Subgrid tata letak petak CSS
Subgrid memungkinkan kemampuan tata letak petak bertingkat untuk mewarisi jalur dari induknya. Hal ini memungkinkan penyelarasan item yang lebih baik dalam petak bertingkat.
- Baru tersedia pada Desember 2023.
- Tersedia secara luas pada Juni 2026.
Pelajari lebih lanjut subgrid di MDN dan di subgrid CSS yang tertaut ke sejumlah besar resource lainnya.
Penyusunan CSS
Dalam beberapa tahun terakhir, CSS telah mengambil inspirasi dari fitur yang digunakan developer dalam praprosesor seperti Sass. Misalnya, Properti Khusus CSS, yang sering dikenal sebagai variabel CSS, adalah fitur yang tersedia secara luas yang memungkinkan variabel seperti warna ditetapkan di satu tempat dan digunakan di seluruh CSS Anda, sesuatu yang sebelumnya hanya tersedia saat menggunakan praprosesor.
Fitur lain dari praprosesor adalah Nesting. Penyusunan bertingkat membantu menghindari pengulangan pemilih, dan membantu keterbacaan CSS, karena hal-hal terkait dapat lebih mudah dikelompokkan bersama.
- Baru tersedia pada Agustus 2023
- Tersedia secara luas pada Februari 2026
Pelajari lebih lanjut Penyusunan CSS di MDN, dan di Penyarangan CSS.
Elemen <search> HTML
Penelusuran adalah sesuatu yang muncul di banyak situs dan aplikasi, tetapi
hingga saat ini tidak ada elemen untuk me-markup fungsi yang digunakan untuk
menelusuri atau memfilter halaman. Elemen <search> didesain untuk
tujuan ini. Penelusuran ada sebagai elemen di dalamnya, Anda dapat menempatkan formulir
penelusuran, atau elemen lain yang digunakan untuk memfilter hasil.
- Baru tersedia pada Oktober 2023
- Tersedia secara luas pada April 2026
Pelajari elemen <search> di MDN lebih lanjut.
Responsive video
Fitur ini mengacu pada kemampuan untuk menggunakan elemen <source> di dalam elemen
<video> untuk menayangkan video dengan ukuran yang sesuai ke berbagai perangkat, dengan
cara yang sama seperti saat Anda menayangkan gambar dengan ukuran yang berbeda.
- Baru tersedia pada November 2023
- Tersedia secara luas pada Mei 2026
Pelajari MDN lebih lanjut di Elemen Media atau Sumber Gambar, dan di Cara menggunakan video responsif.
Atribut inert
Ketika suatu elemen inert, elemen tersebut tidak dapat berinteraksi. Misalnya, saat membuka elemen jendela dialog, elemen yang ada pada halaman di belakang dialog tidak dapat diklik atau di-tab. Atribut inert memberi Anda cara untuk mengontrol inertness di bagian mana pun dari UI.
Dengan atribut inert yang diterapkan ke elemen, peristiwa klik tidak akan diaktifkan
jika elemen diklik, elemen tidak dapat difokuskan, elemen dan
kontennya disembunyikan dari teknologi pendukung karena dikecualikan dari
hierarki aksesibilitas.
- Baru tersedia pada April 2023
- Tersedia secara luas pada Oktober 2025
Pelajari inert di MDN lebih lanjut, dan juga di Atribut inert.
Fungsi color-mix()
Fungsi color-mix() memungkinkan pencampuran satu warna ke warna lain, dalam ruang
warna yang tersedia, ini mencakup semua model warna baru—LCH, Lab,
OKLCH, dan OKLab—yang baru-baru ini menjadi bagian dari Baseline Baru Tersedia.
- Baru tersedia pada April 2023
- Tersedia secara luas pada Oktober 2025
Pelajari lebih lanjut color-mix() di MDN,
dan di CSS color-mix().
Kami juga memiliki Panduan warna CSS definisi tinggi
yang lengkap yang mencakup semua model warna baru yang tersedia di CSS. Selain itu,
lihat gradient.style, untuk bermain-main dengan warna-warna baru
ini dan membuat gradien yang indah.
:user-valid dan :user-invalid
Class pseudo :valid dan :invalid tersedia secara luas di browser
dan menunjukkan apakah elemen formulir saat ini valid sesuai dengan
aturan batasan yang ditetapkan padanya, atau tidak valid. Oleh karena itu, jika Anda memiliki kolom dengan jenis email dan berisi nama, class pseudo :invalid akan memilihnya dan Anda dapat menambahkan warna atau ikon untuk menunjukkan bahwa kolom tersebut perlu dikoreksi.
Masalah pada class pseudo :valid dan :invalid adalah keduanya
berlaku sebelum pengguna berinteraksi dengan formulir. Oleh karena itu, jika elemen formulir diperlukan dan pengguna belum menyelesaikannya, gaya visual Anda yang tidak valid akan ditampilkan. Biasanya, Anda hanya ingin menampilkan gaya yang tidak valid setelah
pengguna salah memasukkan sesuatu atau melewati suatu kolom dan membiarkannya
kosong.
Untuk meningkatkan pengalaman pengguna dalam situasi ini, gunakan class pseudo :user-valid dan
:user-invalid. Fungsi ini berperilaku hampir sama, tetapi hanya dicocokkan setelah pengguna berinteraksi dengan kolom. Jadi, dalam contoh kolom wajib diisi, pengguna harus mengklik tab atau mengklik kolom, lalu berpindah tanpa menyelesaikannya agar kolom dapat menampilkan status yang tidak valid.
- Baru tersedia pada Oktober 2023
- Tersedia secara luas pada April 2026
Pelajari :user-valid
dan :user-invalid
di MDN lebih lanjut.
Aliran Kompresi
Banyak aplikasi web harus menyediakan download kepada pengguna dalam format terkompresi seperti file zip. Sebelumnya, hal ini mengharuskan aplikasi menyertakan library kompresi, kode yang meningkatkan ukuran aplikasi untuk semua pengguna. Compression Streams API memberi Anda cara bawaan untuk mengompresi aliran data.
- Baru tersedia pada Mei 2023
- Tersedia secara luas pada November 2025
Pelajari lebih lanjut Compression Streams API di MDN dan di Compression Stream kini didukung di semua browser.
Shadow DOM Declarative
Declarative Shadow DOM adalah cara baru untuk membuat shadow tree dari HTML,
yang sebelumnya Anda hanya dapat membuat shadow tree dari JavaScript menggunakan
attachShadow(). Kemampuan melakukan ini dari HTML sangat berguna di lingkungan tempat JavaScript mungkin tidak berjalan, misalnya program email. Hal ini juga penting untuk komponen web yang dirender sisi server.
- Baru tersedia pada Februari 2024
- Tersedia secara luas pada Agustus 2026
Pelajari Declarative Shadow DOM lebih lanjut.
Popover API
Pop-up digunakan untuk berbagai tugas di aplikasi web kami. Misalnya, menu, notifikasi toast kustom, dan pemilih konten. Sekarang ada cara bawaan untuk membuat pop-up ini secara dekoratif dengan Popover API.
- Baru tersedia pada April 2024
- Tersedia secara luas pada Oktober 2026
Pelajari Popover API di MDN lebih lanjut, Popover API hadir di Baseline, dan di studi kasus Popover.
12 fitur ini hanyalah beberapa dari fitur yang telah menjadi bagian dari Baseline Baru Tersedia, dan Anda dapat menemukan lebih banyak di situs ini. Temukan semua fitur yang menjadi bagian dari Baseline 2023 dan koleksi fitur yang terus bertambah yang merupakan bagian dari Baseline 2024.