Dipublikasikan: 17 Juli 2026
Selamat datang sekali lagi di ringkasan bulanan Baseline. Pada Juni 2026, field-sizing
menjadi Tersedia untuk Baseline, sehingga kontrol formulir dapat otomatis menyesuaikan
dengan kontennya. Sementara itu, berbagai fitur CSS, HTML, dan Web API telah mencapai status Tersedia Luas di Baseline, bersama dengan info penting dari komunitas developer.
Peringatan Baseline di Status Platform Web
Memantau kapan fitur web menjadi dapat beroperasi kini lebih mudah dengan Peringatan Dasar di dasbor Status Platform Web. Dengan login menggunakan GitHub, Anda dapat berlangganan notifikasi untuk fitur saat fitur tersebut menjadi Tersedia di Baseline, Tersedia secara luas, atau menerima penerapan browser baru. Langganan dapat dikonfigurasi untuk mengirimkan info terbaru melalui email atau feed RSS kustom dengan jadwal bulanan, mingguan, atau langsung. Anda dapat mencakup pemberitahuan ke penelusuran tersimpan—seperti semua fitur HTML—membuat newsletter kustom, membuat daftar fitur yang dapat dibagikan, atau mengonfigurasi webhook Slack untuk memberi tahu tim engineering Anda.
Pelajari lebih lanjut di Memperkenalkan Pemberitahuan Baseline.
Fitur Baseline yang baru tersedia
Fitur di bagian ini didukung mulai Juni 2026 di set browser inti dan kini tersedia di Dasar Pengukuran yang Baru Tersedia.
field-sizing
Properti CSS field-sizing memberikan kontrol atas perilaku ukuran elemen formulir—seperti <textarea>, <input>, dan <select>—yang secara tradisional memiliki dimensi tetap default. Dengan kontrol formulir field-sizing: content, ukuran kontrol formulir akan otomatis disesuaikan agar sesuai dengan kontennya, sehingga mengurangi kebutuhan akan skrip pengubahan ukuran otomatis JavaScript kustom.
Pelajari lebih lanjut di halaman referensi MDN untuk field-sizing.
Fitur Baseline yang tersedia secara luas
Fitur berikut menjadi Tersedia Luas di Baseline, yang berarti fitur tersebut kini kompatibel dan dapat digunakan secara luas dalam project Anda.
:has() pseudo-class
Pemilih induk CSS :has() memungkinkan Anda menata gaya elemen berdasarkan
turunan atau saudara kandungnya berikutnya. Pseudo-class fungsional ini memungkinkan pola tata letak bersyarat langsung di CSS tanpa memerlukan JavaScript untuk memeriksa struktur DOM.
Baca selengkapnya di halaman MDN untuk pseudo-class :has.
HTMLIFrameElement.loading
Properti loading pada elemen <iframe> memungkinkan pemuatan lambat untuk frame
yang disematkan. Dengan menentukan loading="lazy", browser menunda pemuatan iframe di luar layar
hingga di-scroll mendekati area pandang, sehingga menghemat bandwidth jaringan dan overhead
pemuatan halaman awal.
Lihat detailnya di referensi MDN untuk HTMLIFrameElement.loading.
CanvasRenderingContext2D.reset()
Metode reset() pada konteks kanvas 2D menghapus status konteks gambar—mereset properti seperti transformasi, jalur kliping, gaya garis, dan gaya pengisian kembali ke nilai defaultnya. Hal ini memungkinkan konteks kanvas
digunakan kembali dengan bersih tanpa pembersihan properti manual.
Cari tahu selengkapnya di dokumentasi MDN untuk CanvasRenderingContext2D.reset.
Unit panjang cap
Unit relatif font cap sesuai dengan tinggi huruf kapital nominal font elemen. Dengan begitu, Anda dapat menyelaraskan dan mengukur elemen relatif terhadap tinggi
huruf kapital, sehingga memungkinkan tata letak tipografi yang presisi.
Pelajari lebih lanjut di referensi MDN untuk unit panjang.
Properti counter-set
Properti CSS counter-set menetapkan penghitung CSS ke nilai yang ditentukan, melengkapi counter-reset dan counter-increment. Fitur ini memberikan kontrol saat
memanipulasi daftar bernomor, kerangka dokumen, atau urutan penghitung kustom.
Baca detailnya di halaman MDN untuk counter-set.
createImageBitmap()
Metode statis createImageBitmap() membuat gambar bitmap asinkron dari berbagai sumber gambar, termasuk <img>, <canvas>, Blob, atau ImageData. Karena mendekode gambar di luar thread utama, performa UI tidak akan terblokir saat menangani grafis kanvas yang kompleks.
Periksa detail penerapan di dokumentasi MDN untuk createImageBitmap.
Jenis data <easing-function>
Jenis data CSS <easing-function> menjelaskan kurva laju perubahan matematika untuk transisi dan animasi. Selain kata kunci standar seperti ease-in
atau cubic-bezier(), library ini mendukung fungsi seperti linear() untuk membuat efek
pegas atau pantulan kustom.
Pelajari cara menggunakannya di referensi MDN untuk easing-function.
Pemilih bersarang &
Pemilih bersarang & secara eksplisit menyambungkan pemilih aturan turunan ke pemilih
induknya saat menggunakan penyusunan CSS bawaan. Hal ini memastikan kejelasan dan aturan spesifisitas yang benar saat menentukan status hover, fokus, atau class semu bertingkat.
Baca detailnya di panduan MDN untuk selector bersarang.
Pemuatan awal responsif dengan rel="preload"
Atribut media pada elemen <link rel="preload"> memungkinkan pemuatan awal responsif aset utama. Dengan menggabungkan rel="preload" dengan kueri media,
browser hanya mendownload aset yang cocok dengan lebar area pandang atau karakteristik tampilan pengguna
di awal siklus proses pemuatan.
Cari tahu cara menggunakannya di dokumentasi MDN untuk rel="preload".
HTMLMediaElement.preservesPitch
Properti preservesPitch pada elemen <audio> dan <video> mengontrol
apakah browser menyesuaikan nada audio saat mengubah playbackRate.
Menyetelnya ke false memungkinkan perubahan nada saat mempercepat atau memperlambat pemutaran media.
Lihat detailnya di halaman MDN untuk HTMLMediaElement.preservesPitch.
:dir() pseudo-class
Pseudo-class CSS :dir() mencocokkan elemen berdasarkan arah teks
(seperti ltr atau rtl), yang cocok dengan arah yang diwarisi dari atribut HTML seperti
dir atau konteks teks yang dikomputasi.
Pelajari lebih lanjut di halaman MDN untuk pseudo-class :dir.
Fungsi matematika pow()
Fungsi CSS pow() menghitung nilai pangkat eksponensial langsung dalam deklarasi CSS, dengan menaikkan angka dasar ke eksponen (misalnya, pow(2, 3)). Hal ini menyederhanakan penskalaan responsif dan hubungan petak matematika.
Baca detail tentang referensi MDN untuk fungsi pow.
Properti mask CSS
Properti singkat CSS mask menyembunyikan bagian elemen menggunakan gambar atau
gradien sebagai lapisan kliping. Properti ini menggabungkan sub-properti seperti mask-image,
mask-position, dan mask-repeat untuk membuat efek masking visual yang kompleks.
Pelajari lebih lanjut di halaman MDN untuk properti mask.
@media (scripting)
Fitur media scripting menguji apakah pembuatan skrip sisi klien (seperti
JavaScript) diaktifkan dan tersedia dalam konteks browser. Hal ini memungkinkan gaya peningkatan progresif menargetkan lingkungan dengan atau tanpa JavaScript aktif.
Pelajari lebih lanjut di referensi MDN untuk fitur media scripting.
URL.canParse()
Metode statis URL.canParse() memeriksa apakah string tertentu adalah URL yang valid dan dapat diuraikan (dengan URL dasar opsional) tanpa memunculkan pengecualian, sehingga menyederhanakan validasi URL runtime sebelum membuat instance objek URL.
Periksa detail penerapan di dokumentasi MDN untuk URL.canParse.
Storage Access API
Storage Access API menyediakan mekanisme untuk konten lintas situs yang disematkan dalam pihak ketiga <iframe>s untuk meminta akses ke cookie dan penyimpanan tanpa partisi, sehingga memungkinkan autentikasi dan interaksi stateful di seluruh batas domain.
Baca detailnya di halaman MDN untuk Storage Access API.
Selesai
Beri tahu kami jika ada hal terkait Dasar yang terlewat, dan kami akan memastikan hal tersebut dicantumkan dalam edisi mendatang. Jika ada pertanyaan atau ingin memberikan masukan tentang Baseline, Anda dapat melaporkan masalah di issue tracker kami.