Fitur CSS Baru Yang Dinantikan Pada Tahun 2022

Berikut adalah beberapa pembaruan Cascading Style Sheets yang tidak ingin Anda lewatkan, mulai dari properti scroll-snap yang tidak banyak diketahui hingga palet warna baru yang menakjubkan.

CSS (Cascading Style Sheets) memulai debutnya pada tahun 1996 dan masih merupakan komponen penting yang berkembang dari tumpukan pengembangan web. CSS, seperti bahasa hidup lainnya, selalu menambahkan fitur baru sebagai tanggapan terhadap praktik dunia nyata. Karena evolusi yang cepat, bahkan pengembang yang berdedikasi mungkin kehilangan fitur baru. Lihat beberapa fitur paling berguna yang akan hadir di CSS dalam waktu dekat.

jaringan bawah tanah

CSS telah dikritik karena sejumlah kelemahan mengerikan sejak awal. Beberapa tugas sederhana, seperti memusatkan sesuatu di CSS, memerlukan penyelesaian dan penyelesaian yang terlalu rumit.
Masalah penting lainnya adalah mencapai tata letak kotak yang masuk akal, setidaknya sampai modul Tata Letak Kotak CSS masuk.

Tata letak kisi ditunjukkan oleh tampilan: deklarasi kisi dan mirip dengan Flexbox karena memungkinkan Anda untuk menentukan tata letak persegi sambil juga mengontrol kisi dalam dua dimensi.
Menurut penelitian, sebagian besar pengembang CSS mengetahui Tata Letak Kotak, dan banyak dari kita yang menggunakannya. (Jangan lupa untuk mencobanya jika Anda belum!)

Subgrid adalah fitur baru dan sangat berguna untuk modul Tata Letak Kotak. Fitur subgrid memungkinkan Anda membuat kisi anak yang akan mewarisi tata letak kisi induknya.

Berbeda dengan menyarangkan tampilan kisi di dalam yang lain, kisi anak menentukan dimensi dan celahnya sendiri. Tata letak induk diterapkan ke subkisi saat menggunakan subkisi, tetapi subkisi masih dapat mengesampingkan aspek tata letak jika perlu.

Subgrid saat ini hanya tersedia di Firefox 71 dan lebih tinggi, tetapi direncanakan untuk Safari WebKit, Google Chrome, dan Microsoft Edge. Subgrid akan menjadi fitur tata letak yang sangat berguna di masa mendatang.

Aksen warna

Terlepas dari popularitasnya, beberapa elemen tampilan terkenal sulit untuk ditata. Kotak centang dan tombol radio, misalnya, sering diganti dengan widget khusus yang meniru perilakunya saat menyembunyikan implementasi browser. Anda dapat menargetkan elemen ini dengan opsi warna aksen CSS baru.

Misalnya, seperti yang ditunjukkan dalam Daftar 1, Anda dapat menerapkan warna magenta ke semua tombol radio di halaman Anda (lihat juga contoh langsung ini).

Daftar 1: Kontrol Warna CSS untuk Tombol Radio

 <style> input[type="radio"] { accent-color: magenta; } </style> <form action="/foo.bar" > <p> Select your favorite outdoor adventure type </p> <input type="radio" name="type" value="mountain" > <label for="mountain" > Mountain </label><br> <input type="radio" name="type" value="ocean" > <label for="ocean" > Ocean </label><br> <input type="radio" name="type" value="desert" > <label for="desert" > Desert </label> </form>

Gulir jepret

CSS menawarkan seperangkat properti yang berguna untuk mengontrol scroll snap-action di browser web. Banyak dari fitur ini sudah tersedia di versi browser terbaru, sementara yang lain masih diluncurkan.

Perlu dicatat bahwa lebih dari sepertiga pengguna CSS masih belum mengetahui tentang scroll snap.

Perintah properti scroll-snap-* menyediakan beberapa opsi untuk menyempurnakan cara kerja posisi gulir pada wadah. Pengembang mendapat manfaat dari peningkatan presisi, sementara pengguna akhir mendapat manfaat dari pengalaman pengguna yang lebih lancar dan terkontrol.

Daftar 2 menunjukkan contoh sederhana tentang cara mengontrol snap gulir pada div (lihat juga contoh langsung ini).

Listing 2 adalah contoh snap scroll sederhana.

 <style> .scroll-container, .scroll-area { max-width: 850px; height: 300px; font-size: 60px; } .scroll-container { overflow: auto ; scroll-snap-type: y mandatory; height: 500px; } .scroll-area { scroll-snap-align: start; } .scroll-container, .scroll-area { margin: 0 auto ; } .scroll-area { display: flex; align-items: center; justify-content: center; color: white; } .scroll-area:nth-of-type(1) { background: IndianRed ; } .scroll-area:nth-of-type(2) { background: Moccasin ; } .scroll-area:nth-of-type(3) { background: thistle; } .scroll-area:nth-of-type(4) { background: seagreen; } </style> <div class="scroll-container" > <div class="scroll-area" > 1 </div> <div class="scroll-area" > 2 </div> <div class="scroll-area" > 3 </div> <div class="scroll-area" > 4 </div> </div>

Posisi gulir y di Daftar 3 secara otomatis berpindah ke elemen anak di mana pun Anda melepaskan gerakan gulir. Ini karena properti scroll-snap-type wadah gulir disetel ke y dan elemen turunan memiliki deklarasi scroll-snap-align: start.

Perilaku ini juga bisa diubah. Anda dapat, misalnya, menyetel properti scroll-snap-type ke kedekatan y. Itu berfungsi seperti yang diharapkan, hanya menjentikkan ketika gulir dekat dengan elemen.

Selain itu, properti overscroll-behavior terkait mengontrol bagaimana container nested-scroll berperilaku.

Properti CSS Logis

Anda mungkin pernah mengalami gangguan karena harus menulis properti border-left dan border-right atau border-top, border-bottom kata demi kata jika Anda pernah ingin mengatur batas wadah di kiri dan kanan, atau bawah dan atas. Masalahnya adalah tidak ada cara untuk menggunakan properti pintasan tanpa memengaruhi batas yang tidak ingin Anda ubah. Ini juga berlaku untuk elemen seperti padding dan margin.

Modul CSS Logical Properties memungkinkan Anda untuk merujuk ke hal-hal secara abstrak dengan menggunakan kata kunci sebaris dan blok. Saat merujuk ke kiri dan kanan, gunakan inline; ketika merujuk ke atas dan bawah, gunakan blok. Misalnya, untuk menambahkan batas ke sisi kiri dan kanan div, gunakan kode di Listing 3. (lihat juga contoh langsung di sini).

Listing 3: Padding kiri dan kanan dengan logika sebaris

 div { border- inline : 10px dashed seagreen; }

Ini adalah pintasan yang berguna untuk batas, tetapi kata kunci logis sebaris dan blok juga dapat ditemukan di berbagai properti lainnya.

Mayoritas pengembang menggunakan pintasan ini untuk menangani masalah arah teks dan mode penulisan. Dalam kasus ini, properti seperti padding-inline-end memungkinkan Anda menargetkan padding tambahan terlepas dari arah teks.

Pada dasarnya, abstraksi ke inline dan block memungkinkan penciptaan gaya umum yang dapat diterapkan ke berbagai situasi. Informasi lebih lanjut dapat ditemukan di, Properti dan Nilai Logis CSS.

Pencarian kontainer

Kueri penampung belum sepenuhnya stabil di CSS, tetapi akan segera. Mereka akan memiliki dampak yang signifikan pada cara kita berpikir tentang desain responsif. Ide dasarnya adalah Anda akan dapat mengatur breakpoint berdasarkan ukuran wadah induk, bukan hanya viewport dan media.

Tidak ada definisi yang jelas tentang sintaks, tetapi mungkin akan menyerupai Listing 4.

@container Daftar 4.

 @container (max-width: 650px){ … }

Pertimbangkan betapa hebatnya menyempurnakan tata letak berdasarkan ukuran berbagai wadah yang muncul di seluruh lapisan UI yang bersarang. Ini adalah perubahan yang cukup signifikan yang hampir pasti akan memicu gelombang inovasi antarmuka.

Tiga skema warna baru

Praktisi CSS telah menggunakan RGB, HEX, dan memberi nama warna untuk mempercantik dan memeriahkan tampilan perangkat sejak dahulu kala. Deklarasi warna gaya HSL diperkenalkan baru-baru ini. Spesifikasi CSS kini memperkenalkan deskriptor warna baru, yaitu hwb, lab, dan lch.

HWB adalah singkatan dari hue, whiteness, dan blackness. Ini adalah sentuhan bagus yang menonjol karena keterbacaannya oleh manusia—Anda memilih warna lalu menambahkan putih dan hitam. Ini kompatibel dengan versi terbaru Chrome, Firefox, dan Safari. (Referensi fitur Microsoft Edge anehnya sunyi memekakkan telinga tentang hal ini.) Untuk mempelajari lebih lanjut tentang HWB, lihat hwb() – notasi warna untuk manusia? Ini, seperti RGB dan HWL, memiliki saluran alfa untuk transparansi.

LCH, yang merupakan singkatan dari lightness, chroma, dan hue, terkenal karena memperluas palet warna yang tersedia. Apa, mengapa, dan bagaimana warna LCH digunakan dalam CSS? Ini adalah ikhtisar bagus yang mencakup diskusi yang membuka mata tentang teori warna dalam CSS. Hanya Safari yang saat ini mendukung LCH.

Ruang warna baru yang paling teoritis adalah LAB, yang diturunkan dari teori warna CIE LAB. Deskripsi warna lab mengklaim mencakup seluruh spektrum warna yang dapat dilihat manusia, yang merupakan klaim berani. Itu, seperti LCH, saat ini hanya didukung oleh Safari. Informasi lebih lanjut tentang LAB untuk CSS dapat ditemukan di dokumentasi Mozilla CSS.