2024 telah menjadi salah satu tahun terhebat bagi CSS: transisi tampilan lintas dokumen, animasi berbasis gulir, penentuan posisi jangkar, dan animasi. height: autoDan masih banyak lagi. Sepertinya pertanyaan yang tidak masuk akal, tapi apa lagi yang kita inginkan dari CSS? Ya, banyak hal!
Kami menyatukan pikiran dan menghasilkan beberapa ide… termasuk sebagian besar ide Anda.
-Advertisement-.
Daftar keinginan Jeff
Saya berpikir bahwa kita sebenarnya memiliki banyak hal keren di CSS saat ini. Kami punya banyak barang keren dan baru! – Hal-hal yang masih aku pikirkan.
Tetapi! Selalu ada ruang untuk hal baik lainnya, bukan? Atau mungkin ruang untuk <>empat Hal-hal baru. Jika saya boleh meminta fitur CSS baru, inilah yang akan saya pilih.
1. Bersyarat if() penyataan
Itu datang! Atau sudah ada di sini jika Anda melihat Kelompok Kerja CSS (CSSWG) memutuskan untuk menambahkan fileif()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 resmi dan masuk ke browser.
Pemahaman saya adalah tentang if() Ini adalah komponen penting untuk mewujudkan kueri gaya kontainer, yang pada akhirnya adalah apa yang saya inginkan dari ini. Kemampuan untuk menerapkan gaya secara kondisional berdasarkan gaya elemen lain adalah keunggulan CSS. Kita sebenarnya bisa mendesain suatu item berdasarkan item lain di dalamnya :has() Jadi ini akan memperluas keajaiban ini ke pola kondisional juga.
2. Campuran CSS
Ini adalah fitur yang “bagus untuk dimiliki” karena menurut saya fitur ini tepat di bidang praprosesor CSS dan menurut saya menyenangkan memiliki beberapa alat untuk abstraksi ringan, seperti fungsi mengetik atau memadukan dalam CSS. Tapi saya pasti tidak akan mengatakan “tidak” pada campuran kue langsung di CSS jika seseorang menawarkannya kepada saya. Ini mungkin merupakan hambatan yang merusak praprosesor CSS dan memungkinkan saya untuk menulis CSS biasa 100% sepanjang waktu karena sekarang saya cenderung menggunakan Sass ketika saya membutuhkan campuran atau fungsi.
Saya telah menulis banyak catatan tentang proposal mixin dan draf awalnya di spesifikasi untuk memberi Anda gambaran mengapa saya menginginkan fitur ini.
3. // inline comments
Ya, tolong! Ini adalah kemudahan kecil bagi pengembang yang menempatkan CSS setara dengan menulis komentar dalam bahasa lain. Saya cukup yakin menulis komentar JavaScript di CSS saya harus ada dalam daftar kesalahan CSS paling bodoh (meskipun saya tidak menaruhnya di sana).
4. font-size: fit
Aku hanya benci mengerjakan matematika, oke?! Terkadang saya hanya ingin sebuah kata atau judul pendek sebesar wadahnya. Kita bisa menggunakan hal-hal seperti clamp() Untuk pengaturan huruf yang fleksibel, tapi sekali lagi, itulah perhitungan matematika yang tidak bisa saya pedulikan. Anda mungkin berpikir bahwa ada solusi yang mungkin menggunakan kueri kontainer dan menggunakan modul kueri kontainer untuk font-size Tapi ini tidak bekerja lebih baik daripada modul 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. Temukan situs di lebih banyak browser!
Saya tidak perlu lagi diyakinkan tentang penempatan jangkar CSS; <>Saya terjual! Setelah menghabiskan sebagian besar bulan November untuk belajar cara bekerja, saya memasuki bulan Desember dengan kesadaran bahwa saya tidak akan berhasil <>sungguh-sungguh Bisa menggunakannya untuk sementara waktu.
Memasuki tahun 2024, hanya browser berbasis Chromium yang didukung, dan sayangnya penggantian dan peningkatan progresif tidaklah mudah. Ada polyfill yang tersedia (yang sangat bagus), namun ini berarti menambahkan bagian JavaScript lain, berbeda dengan yang digantikan oleh posisi jangkar.
Tapi aku bersabar, aku sudah menunggu lama :has Untuk mengakses browser, yaitu “<>Baru tersedia“Pada baseline selama satu tahun sekarang (dapatkah Anda mempercayainya?).
6. Tingkatkan item menjadi #top-layer <>tanpa Popover?
Saya suka jangkarnya, saya suka pop-upnya, dan semuanya serasi!
Hal yang menarik tentang popup adalah tampilannya #top-layersehingga Anda dapat menghindari menumpuknya masalah terkait z-index. Ini mungkin yang dibutuhkan kebanyakan orang, tetapi memiliki cara lain untuk memindahkan suatu barang ke sana akan menarik. Dan juga sekarang aku mengetahuinya #top-layer Ada, saya ingin melakukannya <>lagi Dengan dia – aku ingin tahu apa yang ada di luar sana. <>Apa yang sebenarnya terjadi?
Yah, mungkin sebaiknya saya mulai dengan spesifikasinya. Ternyata, draf modul Tata Letak Posisi Level 4 CSS adalah tentang #top-layerApa kegunaannya dan bagaimana cara menangani elemen desain yang terkandung di dalamnya. Menariknya #top-layer Ini dikendalikan oleh agen pengguna dan tampaknya merupakan produk sampingan dari API layar penuh.
Kotak dialog dan pop-up adalah solusi yang tepat saat ini, namun optimis bahwa fitur-fitur ini ada <>mungkin Berarti dimungkinkan untuk meningkatkan item menjadi #top-layer Di masa depan. Ini bisa jadi merupakan situasi tipe coyote/road racer, karena saya tidak yakin apa yang akan saya lakukan setelah saya mendapatkannya.
7. Tambahkan atribut lapisan ke <link> 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 kata sifat pada a <link> tanda. Bayangkan bisa memasukkan reset CSS dalam proyek Anda seperti ini:
<link rel="stylesheet" href="https://cdn.com/some/reset.css" layer="reset">Atau, bergantung pada halaman yang dikunjungi, tambahkan potongan CSS secara dinamis, yang digabungkan ke dalam lapisan berikutnya:
<!--
Global styles with layers defined, such as:
@layer reset, typography, components, utilities;
-->
<link rel="stylesheet" href="/styles/main.css">
<!-- Add only to pages using card components -->
<link rel="stylesheet" href="/components/card.css" layer="components">Fitur ini disarankan di repositori CSSWG, dan seperti kebanyakan hal dalam hidup: <>Ini rumit.
Browser sangat sensitif terhadap atribut yang tidak mereka kenali, serta kekhawatiran khusus mengenai penanganan fallback. Topiknya juga telah dipindahkan ke W3C Technical Architecture Group (TAG) untuk didiskusikan juga, jadi masih ada harapan!
Daftar keinginan Gawande
Harus saya akui, saya tidak ada ketika internet sedang populer dan orang-orang menyerang konter. Faktanya, menurut saya saya cukup kecil dibandingkan dengan rata-rata internet Anda <>ahli. Sementara saya tahu cara membuat layout menggunakan float (Kursus web pertama yang saya ambil adalah <>Cantik Kedaluwarsa), saya tidak perlu bersusah payah lama sebelum menggunakan hal-hal seperti Flexbox atau CSS Grid dan saya tidak pernah mendorong dukungan IE dan browser.
Oleh karena itu, keinginan berikut mungkin tampak seperti permintaan sepele dibandingkan dengan fitur-fitur penting yang dibutuhkan web di masa lalu – atau bahkan beberapa di antaranya saat ini. Terlepas dari itu, berikut tiga permintaan sepele yang ingin saya wujudkan di tahun 2025:
8. Hitung anak-anak dan indekskan mereka sebagai bilangan bulat
Ini adalah salah satu hal yang saya bersumpah seharusnya bisa dilakukan hanya dengan menggunakan CSS. Situasinya begini: Saya mendapati diri saya ingin mengetahui indeks suatu item di 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 dengan menyandikan 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; }Apa pun yang terjadi, saya selalu pergi dengan perasaan bahwa akan lebih mudah untuk menunjukkan nomor itu; Browser sudah memiliki informasi ini, tinggal menampilkannya kepada penulis. Itu akan membuat kode lebih cantik dan bersih untuk animasi yang menakjubkan, atau sekadar mengubah gaya berdasarkan jumlah total.
Untungnya, sudah ada usulan dalam draft kerja sibling-count() Dan sibling-index() Pekerjaan. Meskipun kata-katanya mungkin berubah, saya berharap dapat mendengarnya lebih banyak pada tahun 2025.
ul > li {
background-color: hsl(sibling-count() 50% 50%);
}
ul > li {
transition-delay: calc(sibling-index() * 500ms);
}9. Cara untuk mencapai keseimbangan flex-wrap
Saya mencuri ini dari Adam Argyle, tapi saya berharap ada cara yang lebih baik untuk menyeimbangkannya flex-wrap Tata Letak. Ketika barang-barang dibungkus satu per satu saat wadahnya menyusut, barang-barang tersebut akan dibiarkan begitu saja dengan ruang kosong (yang tidak saya benci) atau tumbuh untuk mengisinya (yang menyakiti jiwa saya):
Saya menginginkan cara yang lebih lokal untuk menyeimbangkan elemen pembungkus:
Ini benar-benar menjengkelkan.
10. Cara yang lebih mudah untuk membaca/mencari diskusi CSSWG
Saya penggemar berat CSSWG dan semua yang mereka lakukan, jadi saya menghabiskan banyak waktu membaca draf karya mereka, terbitan GitHub, atau catatan tentang pertemuan mereka. Namun, meskipun saya suka berpindah dari satu tautan ke tautan lain di GitHub, mungkin sulit untuk menemukan semua masalah yang relevan dengan diskusi tertentu.
Saya yakin hal ini menimbulkan hambatan untuk mengekspresikan pendapat Anda tentang beberapa topik. Jika Anda ingin terlibat dalam suatu isu, Anda perlu memiliki gambaran besar dari keseluruhan diskusi (apa yang dibicarakan, 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), tapi saya tidak tahu bahwa ada bagian dari diskusi tersebut.
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 beberapa pilihan yang diambil dari kerumunan:
- Putar secara langsung
background-imagesDia mencintaibackground-rotate: 180deg - CSS
random()dengan parameter untukrange,spreadDantype - Pemosisian jangkar CSS yang memungkinkan penargetan posisi kursor mouse, kursor, atau titik sentuh
- Pemilih string untuk menanyakan kata tertentu dalam blok teks dan menerapkan gaya setiap kali kata tersebut muncul
- warga negara
.visually-hiddenmusim. position: stickybersama:stuckPALSU
Selamat menikmati tahun 2025…
Perjalanan Trik CSS belum berjalan mulus dalam beberapa tahun terakhir, jadi harapan terbesar kami di tahun 2025 adalah terus menulis dan memicu diskusi di seluruh web. Selamat tahun 2025!
Daftar Keinginan CSS untuk tahun 2025 awalnya diterbitkan di CSS-Tricks, yang merupakan bagian dari keluarga DigitalOcean. Anda harus mendapatkan buletin.
-Advertisement-.
