Ringkasan bulanan Baseline edisi Juni 2026 mencatat field-sizing sebagai Baseline Newly available yang memungkinkan kontrol formulir menyesuaikan otomatis dengan kontennya, sementara beragam fitur CSS, HTML, dan Web API mencapai status Baseline Widely available beserta pembaruan penting dari komunitas pengembang.
Pemantauan Interoperabilitas melalui Baseline Alerts
Penerbit menyambut kembali pembaca dalam ringkasan bulanan ini dan menyatakan bahwa pelacakan kapan fitur web menjadi interoperabel kini lebih mudah melalui Baseline Alerts pada dasbor Web Platform Status dengan masuk memakai GitHub untuk berlangganan notifikasi saat fitur menjadi Baseline Newly available, Baseline Widely available, atau menerima implementasi peramban baru. Langganan dapat dikonfigurasi untuk mengirim pembaruan email atau umpan RSS kustom dengan jadwal bulanan, mingguan, atau langsung. Peringatan dapat dicakup pada pencarian tersimpan seperti semua fitur HTML, membuat buletin kustom, menghasilkan daftar fitur yang dapat dibagikan, atau mengonfigurasi webhook Slack untuk memberi tahu tim rekayasa, dengan penjelasan lebih lanjut tersedia dalam Introducing Baseline Alerts.
Fitur CSS Baru: Properti field-sizing
Fitur dalam bagian ini didukung per Juni 2026 dalam kumpulan peramban inti dan kini berstatus Baseline Newly available. Properti CSS field-sizing mengatur perilaku pengubahan ukuran elemen formulir seperti <textarea>, <input>, dan <select> yang secara tradisional memiliki dimensi tetap bawaan, di mana field-sizing: content membuat kontrol formulir otomatis membesar atau menyusut mengikuti kontennya sehingga mengurangi kebutuhan skrip JavaScript pengubahan ukuran otomatis kustom, dengan detail lanjutan tersedia di halaman referensi MDN untuk field-sizing.
Fitur-fitur berikut menjadi Baseline Widely available, yang berarti kini kompatibel secara luas dan dapat dipakai dalam proyek Anda.
Daftar Fitur Berstatus Baseline Widely Available
Selektor induk CSS :has() memungkinkan penataan elemen berdasarkan turunan atau saudara berikutnya sebagai functional pseudo-class yang menghadirkan pola tata letak kondisional langsung di CSS tanpa JavaScript untuk memeriksa struktur DOM, dengan bacaan lanjutan di halaman MDN untuk pseudo-class :has. Properti loading pada elemen <iframe> mengaktifkan pemuatan malas bingkai tersemat di mana penentuan loading="lazy" membuat peramban menunda pemuatan iframe di luar layar hingga digulir mendekati viewport sehingga menghemat bandwidth jaringan dan overhead pemuatan halaman awal, dengan rincian pada referensi MDN untuk HTMLIFrameElement.loading. Metode reset() pada konteks canvas 2D menghapus status konteks gambar dengan mengembalikan properti seperti transformasi, clipping path, gaya garis, dan gaya isian ke nilai bawaan sehingga konteks canvas dapat dipakai ulang secara bersih tanpa pembersihan properti manual, dengan informasi lanjutan pada dokumentasi MDN untuk CanvasRenderingContext2D.reset.
Unit relatif-font cap berkaitan dengan tinggi cap nominal dari font elemen untuk menyelaraskan dan mengukur elemen relatif terhadap tinggi huruf kapital sehingga mendukung tata tipografi presisi, dengan penjelasan di referensi MDN untuk length units. Properti CSS counter-set menetapkan penghitung CSS ke nilai tertentu sebagai pelengkap counter-reset dan counter-increment untuk kendali saat memanipulasi daftar bernomor, kerangka dokumen, atau rangkaian penghitung kustom, dengan rincian di halaman MDN untuk counter-set. Metode statis createImageBitmap() membuat gambar bitmap asinkron dari beragam sumber gambar mencakup <img>, <canvas>, Blob, atau ImageData dan karena mendekode gambar di luar main thread maka tidak memblokir kinerja UI saat menangani grafik canvas kompleks, dengan detail implementasi pada dokumentasi MDN untuk createImageBitmap.
Tipe data CSS <easing-function> mendeskripsikan kurva laju perubahan matematis untuk transisi dan animasi yang melampaui kata kunci standar seperti ease-in atau cubic-bezier() dengan mendukung fungsi seperti linear() untuk menyusun efek pegas atau pantulan kustom, dengan panduan penggunaan pada referensi MDN untuk easing-function. Selektor nesting & secara eksplisit menjangkarkan selektor aturan anak ke selektor induknya saat memakai CSS nesting bawaan untuk memastikan kejelasan dan aturan spesifisitas yang benar ketika mendefinisikan status hover, focus, atau pseudo-class bersarang, dengan rincian pada panduan MDN untuk nesting selector. Atribut media pada elemen <link rel="preload"> memungkinkan pramuat responsif aset kunci di mana kombinasi rel="preload" dengan kueri media membuat peramban mengunduh lebih awal hanya aset yang cocok dengan lebar viewport atau karakteristik tampilan pengguna dalam siklus pemuatan, dengan cara penggunaan pada dokumentasi MDN untuk rel="preload".
Properti preservesPitch pada elemen <audio> dan <video> mengendalikan apakah peramban menyesuaikan tinggi nada audio saat playbackRate diubah di mana penetapan false memungkinkan pergeseran nada ketika mempercepat atau memperlambat pemutaran media, dengan rincian pada halaman MDN untuk HTMLMediaElement.preservesPitch. Pseudo-class CSS :dir() mencocokkan elemen berdasarkan arah teks seperti ltr atau rtl dengan mencocokkan arah yang diwarisi dari atribut HTML seperti dir atau konteks teks terkomputasi, dengan penjelasan lanjutan di halaman MDN untuk pseudo-class :dir. Fungsi CSS pow() menghitung nilai pangkat eksponensial langsung dalam deklarasi CSS dengan memangkatkan angka dasar ke eksponen misalnya pow(2, 3) sehingga menyederhanakan penskalaan responsif dan relasi kisi matematis, dengan rincian pada referensi MDN untuk fungsi pow.
Properti singkatan CSS mask menyembunyikan bagian elemen memakai gambar atau gradien sebagai lapisan kliping dengan menggabungkan sub-properti seperti mask-image, mask-position, dan mask-repeat untuk menciptakan efek masking visual kompleks, dengan informasi lanjutan di halaman MDN untuk properti mask. Fitur media scripting menguji apakah scripting sisi klien seperti JavaScript diaktifkan dan tersedia dalam konteks peramban sehingga memungkinkan gaya progressive enhancement menyasar lingkungan dengan atau tanpa JavaScript aktif, dengan penjelasan di referensi MDN untuk fitur media scripting. Metode statis URL.canParse() memeriksa apakah string tertentu merupakan URL valid yang dapat diurai dengan base URL opsional tanpa melempar pengecualian sehingga menyederhanakan validasi URL runtime sebelum membuat objek URL, dengan detail implementasi pada dokumentasi MDN untuk URL.canParse. Storage Access API menyediakan mekanisme bagi konten lintas situs yang disematkan dalam <iframe> pihak ketiga untuk meminta akses cookie dan penyimpanan tanpa partisi sehingga mendukung autentikasi dan interaksi stateful lintas batas domain, dengan rincian di halaman MDN untuk Storage Access API.
Partisipasi Komunitas dan Umpan Balik Pengembang
Penerbit mengajak pembaca memberi tahu apabila ada hal terkait Baseline yang terlewat agar dapat dicatat dalam edisi mendatang sebagaimana dinyatakan sumber, serta bagi yang memiliki pertanyaan atau ingin memberikan umpan balik tentang Baseline dapat mengajukan issue dalam issue tracker milik penerbit.
Terjemahan dan adaptasi dibantu AI oleh Zennovan News. Karya asli: June 2026 Baseline monthly digest, Jeremy Wagner. Digunakan menurut CC BY 4.0.