Daftar Keinginan CSS Untuk tahun 2025

Tahun 2024 merupakan salah satu tahun terhebat bagi CSS: transisi tampilan lintas dokumen, animasi berbasis gulir, pemosisian jangkar, animasi ke height: autodan banyak lainnya. Tampaknya tidak masuk akal untuk bertanya, tapi apa lagi yang kita inginkan dari CSS? Ya, banyak hal!

Kami menyatukan pikiran dan menghasilkan beberapa ide… ​​termasuk beberapa ide Anda.

Daftar keinginan Geoff

Saya yakin kita sudah memiliki BANYAK barang CSS yang bagus saat ini. Kami memiliki begitu banyak hal indah — dan baru! — hal-hal yang masih banyak saya pikirkan.

Tetapi! Selalu ada ruang untuk satu hal baik lagi, bukan? Atau mungkin ruang untuk empat hal-hal baru. Jika saya boleh meminta fitur CSS baru, inilah yang akan saya pilih.

1. Sebuah kondisi if() penyataan

Itu datang! Atau sudah ada di sini jika Anda menganggap bahwa CSS Working Group (CSSWG) memutuskan untuk menambahkan if() bersyarat dengan spesifikasi Modul Nilai CSS Level 5. Ini adalah langkah maju yang besar, meskipun diperlukan satu atau dua tahun (atau lebih?!) untuk mendapatkan definisi formal dan masuk ke browser.

Pemahaman saya tentang if() adalah bahwa ini merupakan komponen kunci untuk mencapai Kueri Gaya Kontainer, yang pada akhirnya saya inginkan dari ini. Mampu menerapkan gaya secara kondisional berdasarkan gaya elemen lain adalah hal yang sangat penting dari CSS. Kita sudah dapat menata suatu elemen berdasarkan elemen lainnya :has() jadi ini akan memperluas keajaiban itu dengan memasukkan gaya bersyarat juga.

2. Campuran CSS

Ini lebih merupakan fitur yang “bagus untuk dimiliki” karena menurut saya fitur ini tepat berada di Wilayah Praprosesor CSS dan saya yakin akan menyenangkan jika memiliki beberapa alat untuk abstraksi ringan, seperti fungsi penulisan atau mixin dalam CSS. Tapi saya tentu saja tidak akan mengatakan “tidak” untuk memasukkan mixin langsung ke dalam CSS jika seseorang menawarkannya kepada saya. Itu mungkin merupakan hambatan yang merusak praprosesor CSS dan memungkinkan saya untuk menulis CSS biasa 100% sepanjang waktu karena saat ini saya cenderung menggunakan Sass ketika saya membutuhkan mixin atau fungsi.

Saya menulis banyak catatan tentang proposal mixins dan draf awalnya dalam spesifikasi untuk memberi Anda gambaran mengapa saya menginginkan fitur ini.

Ya, tolong! Ini adalah kenyamanan kecil bagi pengembang yang membuat CSS setara dengan menulis komentar dalam bahasa lain. Saya cukup yakin bahwa menulis komentar JavaScript di CSS saya harus ada dalam daftar kesalahan CSS paling bodoh (meskipun saya tidak memasukkannya ke sana).

4. font-size: fit

Aku benci mengerjakan matematika, oke?! Terkadang saya hanya ingin sebuah kata atau judul pendek disesuaikan dengan wadahnya. Kita bisa menggunakan hal-hal seperti clamp() untuk pengaturan huruf yang lancar, tapi sekali lagi, itu matematika yang tidak bisa saya pedulikan. Anda mungkin berpikir ada solusi yang mungkin dengan Kueri Kontainer dan menggunakan unit kueri kontainer untuk font-size tapi itu tidak bekerja lebih baik daripada unit viewport.

Daftar keinginan Ryan

Saya hanyalah seorang pengembang CSS sederhana di kota kecil, dan saya cukup puas dengan semua fitur baru yang hadir di browser selama beberapa tahun terakhir, apa lagi yang bisa saya minta?

5. Penempatan jangkar di lebih banyak browser!

Saya tidak perlu lagi diyakinkan tentang posisi jangkar CSS, Saya terjual! Setelah menghabiskan sebagian besar bulan November mempelajari cara kerjanya, saya memasuki bulan Desember dengan kesadaran bahwa saya tidak akan melakukannya Sungguh bisa menggunakannya untuk sementara waktu.

Menjelang akhir tahun 2024, hanya browser berbasis Chromium yang memiliki dukungan, dan sayangnya, penggantian dan penyempurnaan progresif tidaklah mudah. Ada polyfill yang tersedia (yang luar biasa), namun itu berarti menambahkan potongan JavaScript lain, kontras dengan apa yang dipecahkan oleh penentuan posisi jangkar.

Tapi aku bersabar, aku sudah menunggu lama :has untuk datang ke browser, yang telah “baru tersedia” di Baseline selama satu tahun sekarang (dapatkah Anda mempercayainya?).

6. Mempromosikan unsur-unsur ke #top-layer tanpa muncul?

Saya suka penentuan posisi jangkar, saya suka popover, dan semuanya sangat serasi!

Hal yang menarik tentang popover adalah tampilannya di #top-layersehingga Anda dapat menghindari penumpukan masalah terkait z-index. Ini mungkin yang paling dibutuhkan, tetapi memiliki cara lain untuk memindahkan elemen ke sana akan menarik. Juga, sekarang aku tahu itu #top-layer ada, saya ingin melakukannya lagi dengan itu — aku ingin tahu ada apa di sana. Apa yang sebenarnya terjadi?

Yah, saya mungkin harus mulai dari spesifikasinya. Ternyata, itu Modul Tata Letak Posisi CSS Level 4 rancangan pembicaraan tentang #top-layerkegunaannya, dan cara mendekati elemen gaya yang terkandung di dalamnya. Menariknya, itu #top-layer dikendalikan oleh agen pengguna dan tampaknya merupakan produk sampingan dari API layar penuh.

Dialog dan popover adalah cara yang tepat untuk saat ini, tetapi secara optimis, fitur-fitur ini sudah ada mungkin berarti mungkin untuk mempromosikan elemen ke #top-layer dalam cara-cara masa depan. Ini mungkin situasi tipe coyote/roadrunner, karena saya tidak yakin apa yang akan saya lakukan dengannya setelah saya mendapatkannya.

7. Menambahkan atribut lapisan ke tag

Secara pribadi, Cascade Layers telah mengubah cara saya menulis CSS. Satu hal yang menurut saya akan menjadi keunggulan adalah jika kita dapat memasukkan a layer atribut pada a menandai. Bayangkan bisa memasukkan reset CSS dalam proyek Anda seperti:

Atau, bergantung pada halaman yang dikunjungi, tambahkan bagian CSS secara dinamis, yang digabungkan ke dalam lapisan bertingkat Anda:

Fitur ini adalah diusulkan di repo CSSWGdan seperti kebanyakan hal dalam hidup: itu rumit.

Browser sangat rewel dengan atribut yang tidak mereka ketahui, ditambah kekhawatiran yang pasti mengenai penanganan fallback. Topik tersebut juga dibawa ke W3C Technical Architecture Group (TAG) untuk didiskusikan juga, jadi masih ada harapan!

Daftar Keinginan Juandi

Harus saya akui, saya tidak ada saat web masih liar dan orang-orang menyerang balik. Faktanya, menurut saya saya masih cukup muda dibandingkan rata-rata web Anda ahli. Meskipun saya tahu cara membuat tata letak menggunakan float (kursus web pertama yang saya ambil adalah cantik ketinggalan jaman), saya tidak perlu bersusah payah lama sebelum menggunakan hal-hal seperti Flexbox atau CSS Grid dan tidak pernah bekerja keras melawan dukungan IE dan browser.

Jadi, keinginan berikut ini mungkin tampak seperti permintaan remeh jika dibandingkan dengan fitur-fitur penting yang dibutuhkan web di masa lalu — atau bahkan di masa sekarang. Terlepas dari itu, inilah tiga permintaan kecil saya yang ingin saya wujudkan pada tahun 2025:

8. Minta anak menghitung dan mengindeks sebagai bilangan bulat

Ini adalah salah satu hal yang Anda yakini seharusnya sudah bisa dilakukan hanya dengan CSS. Situasinya adalah sebagai berikut: Saya ingin mengetahui indeks suatu elemen antara saudara kandungnya atau jumlah total anak. Saya tidak bisa menggunakan counter() berfungsi karena terkadang saya membutuhkan bilangan bulat, bukan string. Pendekatan saat ini adalah melakukan hardcoding pada indeks pada HTML:

Or alternatively, write each index in CSS:

li:nth-child(1) { --index: 0; }
li:nth-child(2) { --index: 1; }
li:nth-child(3) { --index: 2; }

Apa pun yang terjadi, saya selalu merasa bahwa akan lebih mudah untuk merujuk nomor ini; browser sudah memiliki info ini, tinggal memaparkannya kepada penulis. Ini akan membuat kode lebih cantik dan bersih untuk animasi yang menakjubkan, atau sekadar mengubah gaya berdasarkan jumlah total.

Untung saja sudah ada usulannya di Draft Kerja sibling-count() Dan sibling-index() fungsi. Meskipun sintaksisnya mungkin berubah, saya berharap dapat mendengar lebih banyak tentangnya pada tahun 2025.

ul > li {
  background-color: hsl(sibling-count() 50% 50%);
}

ul > li {
  transition-delay: calc(sibling-index() * 500ms);
}

9. Sebuah cara untuk menyeimbangkan flex-wrap

Aku mencuri yang ini Adam Argyletapi saya berharap cara yang lebih baik untuk menyeimbangkan flex-wrap tata letak. Ketika elemen-elemen terbungkus satu per satu saat wadahnya menyusut, mereka akan dibiarkan begitu saja dengan ruang kosong (yang tidak saya sukai) atau tumbuh untuk mengisinya (yang menyakiti jiwa saya):

Saya menginginkan cara yang lebih asli untuk menyeimbangkan elemen pembungkus:

Ini benar-benar menjengkelkan.

10. Cara yang lebih mudah untuk membaca/meneliti diskusi CSSWG

Saya penggemar berat CSSWG dan semua yang mereka lakukan, jadi saya menghabiskan banyak waktu membaca draf kerja mereka, terbitan GitHub, atau catatan tentang pertemuan mereka. Namun, meskipun saya suka berpindah dari satu tautan ke tautan lainnya di GitHub, mungkin sulit untuk menemukan semua masalah terkait untuk diskusi tertentu.

Saya rasa hal ini menimbulkan hambatan untuk memberikan pendapat Anda tentang beberapa topik. Jika Anda ingin berpartisipasi dalam suatu isu, Anda harus memiliki gambaran besar dari seluruh diskusi (apa yang telah dikatakan, mengapa beberapa hal tidak berhasil, hal lain yang perlu dipertimbangkan, dll) namun biasanya gambaran tersebut tersebar di beberapa isu atau pertemuan. Meskipun masalahnya bisa panjang, bukan itu masalahnya (saya suka membacanya), melainkan tidak mengetahui adanya bagian dari diskusi di suatu tempat.

Jadi, meskipun ini bukan keinginan CSS secara langsung, saya berharap ada cara yang lebih mudah untuk mendapatkan gambaran lengkap dari diskusi ini sebelum terjun ke dalamnya.

Apa yang ada di daftar keinginanmu?

Kami bertanya! Anda menjawab! Berikut adalah beberapa pilihan pilihan dari kerumunan:

• Putar langsung background-imagesmenyukai background-rotate: 180deg
• CSS random()dengan param untuk range, spreadDan type
• Mode posisi jangkar CSS yang memungkinkan penargetan posisi kursor mouse, penunjuk, atau titik sentuh
• Pemilih string untuk menanyakan kata tertentu dalam blok teks dan menerapkan gaya setiap kali kata tersebut muncul
• Seorang penduduk asli .visually-hidden kelas.
• position: sticky dengan a :stuck semu

Semoga tahun 2025 Anda menyenangkan…

Lintasan CSS-Tricks belum berjalan mulus dalam beberapa tahun terakhir, jadi harapan terbesar kami di tahun 2025 adalah terus menulis dan memicu diskusi tentang web. Selamat tahun 2025!