Daftar Keinginan CSS untuk tahun 2025 – Beragampengetahuan

2024 adalah salah satu tahun terhebat bagi CSS: transisi tampilan lintas dokumen, animasi berbasis gulir, penentuan posisi jangkar, animasi height: autodan banyak lainnya. Ini mungkin tampak agak tidak realistis untuk ditanyakan, tapi apa lagi yang kita inginkan dari CSS? Ya, banyak hal!

Kami telah melakukan brainstorming beberapa ide…termasuk beberapa ide Anda.

Daftar keinginan Jeff

Saya pikir kita punya banyak hal CSS yang bagus sekarang. Kami memiliki begitu banyak yang luar biasa – dan yang baru! ——Banyak dari hal-hal ini yang masih sulit saya lepaskan.

Tetapi! Selalu ada ruang untuk satu hal baik lagi, bukan? Atau mungkin masih ada ruang Empat Sesuatu yang baru. Jika saya memerlukan fitur CSS baru, ini adalah pilihan saya.

1. bersyarat if() penyataan

Itu datang! Atau jika menurut Anda Kelompok Kerja CSS (CSSWG) memutuskan untuk menambahkan a if() Bersyarat pada 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 membuatnya menjadi browser.

Pemahaman saya tentang if() Ini adalah komponen kunci dalam mengimplementasikan kueri gaya kontainer, yang pada akhirnya saya inginkan. Bisa dibilang, kemampuan menerapkan gaya secara kondisional berdasarkan gaya elemen lain adalah keuntungan dari CSS. Kita sudah bisa menata 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 termasuk dalam bidang praprosesor CSS, dan saya yakin akan menyenangkan jika memiliki beberapa alat untuk abstraksi ringan, seperti fungsi penulisan atau mixin dalam CSS. Tetapi jika seseorang menawari saya cara untuk menyematkan mixin langsung ke CSS, saya pasti tidak akan mengatakan “tidak”. Ini mungkin tantangan terakhir untuk praprosesor CSS dan memungkinkan saya menulis 100% CSS murni, karena sekarang ketika saya membutuhkan mixin atau fungsi, saya cenderung menggunakan Sass.

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

Ya, tolong! Ini adalah kemudahan kecil bagi pengembang dan menjadikan CSS sebanding dengan menulis komentar dalam bahasa lain. Saya cukup yakin menulis komentar JavaScript di CSS saya harus ada dalam daftar kesalahan CSS paling bodoh (walaupun saya tidak menaruhnya di sana).

4. font-size: fit

Aku hanya benci mengerjakan matematika, oke? Terkadang saya hanya menginginkan satu kata atau judul pendek yang ukurannya tepat untuk wadahnya. Kita bisa menggunakan sesuatu seperti clamp() untuk pengaturan huruf yang lancar, tapi sekali lagi, itu matematika yang tidak saya pedulikan. Anda mungkin berpikir bahwa ada kueri kontainer dan kemungkinan solusi menggunakan sel kueri kontainer font-size Tapi ini tidak lebih baik dari unit viewport.

Daftar keinginan Ryan

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

5. Penempatan jangkar di lebih banyak browser!

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

Menjelang berakhirnya tahun 2024, hanya browser berbasis Chromium yang akan mendukungnya, dan sayangnya, penggantian dan peningkatan progresif tidak akan mudah. Ada polyfill yang tersedia (yang sangat bagus), namun, ini berarti menambahkan bagian JavaScript lain, berbeda dengan masalah yang dipecahkan oleh penentuan posisi jangkar.

Meskipun saya sangat sabar, saya telah menunggu lama sekali :has Masuk ke browser, ini sudah “Baru tersedia” Sudah setahun di Baseline (percayakah Anda?).

6. Unsur promosi #top-layer TIDAK muncul?

Saya suka penentuan posisi jangkar, saya suka popup, semuanya bekerja sama dengan baik!

Hal yang menarik tentang pop-up adalah mereka #top-layerdengan cara ini Anda dapat menghindari penumpukan masalah terkait z-index. Ini mungkin yang dibutuhkan kebanyakan orang, namun akan menyenangkan jika memiliki cara lain untuk memindahkan elemen. Juga, sekarang aku tahu #top-layer ada, saya ingin melakukannya lagi Dengan itu – aku ingin tahu apa isinya. Apa yang telah terjadi?

Yah, saya mungkin harus mulai dengan spesifikasinya. Ternyata Draf Modul Tata Letak Posisi CSS Level 4 membahas #top-layertujuannya, dan cara menangani elemen gaya yang dikandungnya. menariknya, #top-layer Dikendalikan oleh agen pengguna, tampaknya merupakan produk sampingan dari API layar penuh.

Dialog dan popup adalah solusi kekinian, namun secara optimis fitur tersebut sudah ada mungkin berarti elemen dapat dipromosikan #top-layer Di masa depan. Kemungkinan besar ini adalah situasi tipe Coyote/Roadrunner karena saya tidak begitu yakin apa yang akan saya lakukan setelah saya mendapatkannya.

7. Tambahkan properti lapisan <link> Label

Secara pribadi, Cascade Layers telah mengubah cara saya menulis CSS. Satu hal yang menurut saya lebih unggul adalah jika kita dapat memasukkan a layer properti aktif <link> Label. Bayangkan bisa memasukkan reset CSS dalam proyek Anda, seperti:

<link rel="stylesheet" href=" layer="reset">

Atau, tambahkan bagian CSS secara dinamis dan gabungkan ke dalam lapisan berjenjang berdasarkan halaman yang dikunjungi:

<!-- 
Global styles with layers defined, such as:
 @layer reset, typography, components, utilities;
-->
<link rel="stylesheet" href=" 

<!-- Add only to pages using card components  -->
<link rel="stylesheet" href=" layer="components">

Fitur ini diusulkan pada repositori CSSWG, seperti kebanyakan hal dalam hidup: itu rumit.

Browser sangat pilih-pilih tentang properti yang tidak mereka ketahui, dan memiliki kekhawatiran yang jelas dalam menangani fallback. Topik tersebut juga telah dibawa ke W3C Technical Architecture Group (TAG) untuk didiskusikan, jadi masih ada harapan!

daftar keinginan Jundi

Harus saya akui, saya tidak ada di sana ketika internet menjadi gila dan orang-orang mulai melawan. Faktanya, menurut saya saya cukup muda dibandingkan dengan rata-rata jaringan Anda pakar. Meskipun saya tahu cara menggunakannya float (Kursus online pertama yang saya pilih adalah cantik usang), saya menderita tidak lama sebelum menggunakan hal-hal seperti Flexbox atau CSS Grid, dan tidak pernah harus gigit lidah terhadap dukungan IE dan browser.

Jadi, aspirasi berikut mungkin tampak sepele dibandingkan dengan fitur-fitur penting yang dibutuhkan web di masa lalu (dan bahkan beberapa fitur yang dimilikinya sekarang). Berikut tiga permintaan kecil yang ingin saya wujudkan pada tahun 2025:

8. Dapatkan jumlah subitem dan indeks bilangan bulat

Ini adalah salah satu hal yang Anda yakin dapat dicapai hanya dengan CSS. Begini situasinya: Saya bertanya-tanya tentang indeks antara saudara kandungnya atau jumlah total elemen turunannya. Saya tidak bisa menggunakan counter() berfungsi karena terkadang saya membutuhkan bilangan bulat, bukan string. Pendekatan saat ini adalah dengan melakukan hardcode pada indeks pada HTML:

<ul>
  <li style="--index: 0">Milk</li>
  <li style="--index: 1">Eggs</li>
  <li style="--index: 2">Cheese</li>
</ul>

Alternatifnya, tulis setiap indeks dalam CSS:

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

Terlepas dari itu, saya selalu merasa bahwa akan lebih mudah untuk mengutip nomor ini; browser sudah memiliki informasinya dan hanya memaparkannya kepada penulisnya. Ini akan menghasilkan kode yang lebih cantik dan bersih untuk animasi yang memukau, atau sekadar mengubah gaya berdasarkan total.

Untungnya, sudah ada usulan 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. Pendekatan yang seimbang flex-wrap

Saya mencuri ini dari Adam Argyle, tapi saya berharap ada cara yang lebih baik untuk menyeimbangkannya flex-wrap tata letak. Ketika elemen dibungkus satu per satu saat wadahnya menyusut, mereka akan meninggalkan ruang kosong (yang saya tidak suka) atau tumbuh untuk mengisinya (yang menyakiti jiwa saya):

Saya berharap ada cara yang lebih asli untuk menyeimbangkan elemen yang dibungkus:

Ini sungguh menjengkelkan.

10. Cara yang lebih mudah untuk membaca/mempelajari 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 senang berpindah dari satu tautan ke tautan lain di GitHub, mungkin sulit untuk menemukan semua masalah yang terkait dengan diskusi tertentu.

Saya pikir ini meningkatkan standar bagi Anda untuk memiliki pendapat tentang topik tertentu. Jika Anda ingin berpartisipasi dalam suatu isu, Anda harus memiliki gambaran umum tentang semua diskusi (apa yang dibahas, mengapa sesuatu tidak berhasil, apa lagi yang perlu dipertimbangkan, dll.), namun sering kali hal tersebut tersebar di berbagai isu atau pertemuan. . Meskipun pertanyaannya mungkin panjang, itu bukan masalahnya (saya senang membacanya) tetapi saya tidak mengetahui bahwa bagian dari diskusi itu memang ada.

Jadi meskipun ini bukan keinginan langsung untuk CSS, saya ingin memiliki cara yang lebih mudah untuk memahami diskusi sepenuhnya sebelum memulai.

Apa yang ada di daftar keinginanmu?

Kami bertanya! Anda menjawab! Berikut beberapa pilihan dari orang banyak:

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

Semoga Anda mendapatkan yang terbaik di tahun 2025…

beragampengetahuan 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!