Apa yang hilang dari HTML dan CSS?

Tim Chrome hadir dalam jumlah besar di konferensi CSS Day tahun ini. Kami menjalankan Helpdesk CSS, menjawab pertanyaan dari peserta, tetapi juga memiliki papan tulis tempat kami menanyakan kepada orang-orang apa yang menurut mereka masih kurang dari CSS. Dalam postingan ini, saya akan membagikan hasil dari pertanyaan tersebut, dan juga meminta Anda untuk memberi tahu kami apa yang menurut Anda kurang dari HTML dan CSS dengan mengisi survei singkat ini. Apakah Anda setuju dengan pendapat peserta CSS Day?

Papan tulis yang ditempeli catatan tempel.
Papan ide di CSS Day.

Sepuluh permintaan teratas

Peserta diminta untuk menuliskan ide di sticky note dan menambahkannya ke papan. Orang lain juga dapat memberikan suara pada ide dengan menambahkan stiker. Sepuluh fitur teratas adalah sebagai berikut.

Dukungan untuk gaya input

Fitur ini adalah fitur yang paling banyak diminta dengan 21 suara. Anda benar-benar menginginkan cara untuk menata gaya elemen UI umum ini secara konsisten.

Ini adalah area yang kami sadari betul di Chrome, sebagai poin masalah utama bagi developer, dan kami sedang berupaya membuat solusi yang lebih baik bagi developer. Misalnya, elemen pemilihan yang dapat disesuaikan bertujuan untuk menyediakan cara untuk memilih ikut serta dalam perilaku gaya baru. Kemudian, Anda dapat melakukan berbagai hal seperti menambahkan gambar atau bahkan gaya yang lebih rumit pada opsi. Keuntungan dari pendekatan ini adalah bahwa pendekatan ini akan kembali ke menu pilihan biasa, sehingga memungkinkan ini menjadi peningkatan progresif.

Disembunyikan secara visual

Dengan 19 suara di CSS Day, ini adalah permintaan terpopuler kedua. Permintaan adalah cara untuk menambahkan konten yang hanya digunakan oleh pembaca layar. Hal ini mungkin berupa elemen HTML, yang kontennya tidak ditampilkan dan hanya dibacakan oleh pembaca layar.

Biasanya, orang-orang mencapai hal ini saat ini dengan membuat kelas .visually-hidden untuk menyembunyikan konten, tetapi tetap membuatnya dapat diakses oleh pembaca layar.

Meskipun ini adalah permintaan populer, ada orang yang tidak berpikir bahwa fitur ini harus diterapkan. Untuk mengetahui detailnya, baca Konten yang tersembunyi secara visual adalah solusi sementara yang perlu diatasi, bukan diabadikan dan diskusi ini di Masalah CSS WG 560.

position: sticky di dalam overflow:hidden

Permintaan ini menerima 16 suara. Saat ini, position: sticky hanya berfungsi jika semua induknya adalah overflow: visible.

Ada masalah terbuka sejak tahun 2017 yang meminta hal ini, dan meskipun kasus penggunaan awal untuk mengaktifkan penggunaan overflow: hidden untuk menghapus float mungkin kurang diperlukan saat ini, ada banyak skenario lain yang dijelaskan dalam rangkaian pesan tersebut.

Menganimasikan ke height: auto

Dengan 12 suara, banyak peserta ingin membuat animasi ke height: auto. Dengan senang hati kami mengumumkan bahwa fitur ini akan hadir di platform web dengan properti interpolate-size dan fungsi calc-size() CSS. Fitur ini akan tersedia mulai Chrome 129. Nantikan postingan mendatang yang berisi informasi selengkapnya tentang hal ini.

Jenis input tambahan

HTML5 menghadirkan berbagai jenis untuk elemen <input>—misalnya type="email" untuk alamat email atau type="range" untuk penggeser rentang. Di CSS Day, kami mendapatkan 10 suara untuk jenis ini, misalnya, rentang ganda, atau autocomplete dengan daftar data kustom.

Angka acak sebenarnya di CSS

Permintaan lain dengan 10 suara adalah untuk angka acak sebenarnya di CSS. Hal ini telah diminta dan diatasi pada masa lalu untuk animation-duration acak.

Class gaya mixin

CSS telah menambahkan sejumlah fitur yang sebelumnya terlihat di praprosesor CSS—variabel dengan properti kustom, dan kini CSS Nesting. Namun, mixin yang dapat digunakan kembali belum menjadi bagian dari bahasa, tetapi tujuh peserta CSS Day ingin melihatnya.

Ada resolusi Kelompok Kerja CSS untuk mulai mengerjakan spesifikasi fitur ini, dan Anda dapat menambahkan pemikiran dan kasus penggunaan Anda ke diskusi dalam masalah tersebut.

Gaya global di shadow DOM

Masalah lain yang memiliki rangkaian diskusi kasus penggunaan yang besar adalah permintaan untuk mengizinkan gaya CSS global diterapkan di dalam DOM bayangan. Enam orang meminta hal ini di CSS Day. Kemampuan ini akan memungkinkan gaya reset global juga diterapkan di komponen web, dan file CSS tunggal berfungsi di semua komponen situs. Lihat ringkasan kasus penggunaan ini, dan beri tahu kami jika Anda juga ingin memiliki fitur ini.

Membagi satuan campuran

Ada proposal untuk Interop 2024 yang meminta kemampuan untuk membagi dengan satuan campuran—misalnya calc(100vw / 1px). Namun, banyak developer, termasuk enam orang di CSS Day, ingin melihat fitur ini diterapkan.

nth-letter

CSS memiliki sejumlah elemen semu yang bertindak seolah-olah Anda telah membungkus rentang di sekitar beberapa bagian konten. Misalnya, elemen semu ::first-letter menargetkan huruf pertama dari baris pertama penampung blok yang diterapkan.

::nth-letter tidak ada dalam daftar tersebut, dan Anda telah meminta ::nth-letter selama sekitar dua puluh tahun, jadi kami tahu bahwa ini adalah permintaan lama dari developer web. Di CSS Day, enam orang memilih fitur ini, sehingga menjadikannya fitur terakhir dari sepuluh fitur yang paling diinginkan.

Apakah Anda setuju dengan sepuluh besar CSS Day?

Kami ingin mendengar pendapat audiens yang lebih luas tentang masalah ini. Apakah salah satu dari masalah ini termasuk dalam sepuluh masalah teratas Anda? Jika tidak, apakah ada hal lain yang ingin Anda lihat di CSS dan HTML? Beri tahu kami dengan mengisi formulir singkat ini dan kami akan merangkum responsnya dalam postingan lain.