Disadur dari https://developer.chrome.com/blog/css-wrapped-2024 yang ditulis oleh Bramus, Adam Argyle, Rachel Andrew, Una Kravets dan dipublikasikan pada tanggal 5 Desember 2024 bahwa terdapat 17 Fitur baru di CSS yang terbagi menjadi 3 kategori masing-masing yaitu terdapat pada :
- Komponen
Disini terdapat 5 Komponen baru atau segala sesuatu yang terkait dengan komponen didalam CSS. Pada komponen ditambahkan detail untuk fitur-fitur seperti Overlay UX yang menarik dengan anchor, kekuatan untuk menganimasikan ketinggian secara otomatis, secara mudah mengubah detail menjadi akordeon, mendapatkan akses lebih banyak ke gaya detail, dan mengukur elemen bentuk secara intrisik.
Hal ini terbagi menjadi 5 fitur diantaranya :
# field-sizing
properti baru ini hanya bisa dijalankan pada browser seperti Google Chrome dan Microsoft Edge, sedangkan untuk Mozilla Firefox serta Safari belum bisa berjalan baik. Komponen atau elemen ini untuk mengatur ukuran tanpa perlu menggunakan satuan unit yang spesifik seperti pixel, rem, ataupun em.komponen ini adaptif dan dinamis sesuai dengan isi kontennya. Untuk penulisan propertinya pada CSS adalah : field-sizing : content;. Properti ini akan menyesuaikan ukuran isi dari komponen yang diberikan elemen tersebut.
# Animate To Height : Auto
Properti ini berfungsi supaya developer bisa melakukan animasi ke lebar dan tingginya secara otomatis tanpa harus menghitung lagi ukuran elemennya. Apabila developer menginginkan komponen tersebut menjadi dinamis maka ada penambahan properti yakni interpolate-size : allow-keywords didalam class root (:root). Sayangnya sementara ini, properti ini hanya bisa dijalankan di Google Chrome dan Microsoft Edge.
#Exclusive <details>
Properti ini digunakan untuk menyempurnakan cara menyembunyikan ringkasan detail informasi pada tampilan web. Jika di sebelumnya terdapat permasalahan yakni pada saat properti ini dijalankan tanpa menggunakan JavaScript, properti tersebut tidak secara otomatis menutup dengan sendirinya ringkasan jadi user harus meng-klik secara manual untuk membuka dan menutup ringkasan detail informasi. Jika menginginkan membuka dan menutup secara otomatis maka harus ditambahkan JavaScript. Saat ini CSS telah menyempurnakan fitur <details> nya dengan menambahkan atribut name. Untuk penulisannya sama seperti grouping pada radiobutton contohnya adalah <details name:”namagrup”>. Properti ini bisa dijalankan di Google Chrome, Mozilla FireFox, Safari dan Microsoft Edge.
#Styleable <details>
Pembahasan ini adalah sambungan dari properti sebelumnya yakni <details> dengan menambahkan sudo class atau sudo element details-content. Ini berarti developer dapat memperlakukan <details> selayaknya selector sehingga bisa diatur style-nya sedemikian rupa dengan menambahkan atribut-atribut tertentu. Sayangnya sementara ini, properti ini hanya bisa dijalankan di Google Chrome dan Microsoft Edge.
#Anchor Positioning
Properti ini digunakan untuk mengatur sebuah posisi dari elemen relatif terhadap komponen yang lain. Jika sebelumnya ingin membuat sebuah elemen relatif terhadap komponen yang lain maka developer akan kesusahan menentukan karena penggunaan atribut relatif absolute positioning. Properti ini bisa digunakan sebagai selector dengan menambahkan atribut untuk mengatur style-nya tinggal menentukan komponen apa yang digunakan sebagai anchor dan komponen apa yang akan menempel pada anchor tersebut. Sayangnya sementara ini, properti ini hanya bisa dijalankan di Google Chrome dan Microsoft Edge (Bersambung…)