Tip dan Teknik CSS yang Berguna – Beragampengetahuan

Jika Anda sudah lama berkecimpung dalam permainan pengembangan web, Anda mungkin ingat hari-hari ketika CSS benar-benar membingungkan dan Anda harus menemukan trik dan solusi agar semuanya berfungsi. Untungnya, masa-masa itu telah berlalu, dengan fitur-fitur baru seperti kueri kontainer, lapisan berjenjang, sarang CSS, :has Selector, grid dan subgrid, dan bahkan ruang warna baru membuat CSS lebih kuat dari sebelumnya.

Inovasinya tidak berhenti sampai di situ. Kami mungkin juga memiliki pertanyaan gaya, atau bahkan pertanyaan status, serta pembungkusan teks yang seimbang dan posisi jangkar CSS.

Dengan semua ini Fitur baru CSS yang lucu Dalam artikel ini, kita akan mempelajari dunia CSS dengan beberapa teknik yang berguna, mempelajari kekhususan, tanda baca yang menjuntai, dan variabel CSS yang dapat dimodifikasi sendiri. Kami berharap mereka berguna dalam pekerjaan Anda.

Memulai dengan Cascades dan Kekhususan

Banyak orang khawatir tentang cascading dan kekhususan dalam CSS. Namun, konsep ini tidak sesulit yang dibayangkan. Untuk membantu Anda agar lebih mudah digunakan Dua bagian paling dasar dari CSSAndy Bell menulis primer yang sangat bagus tentang kaskade dan kekhususan.

Panduan ini menjelaskan bagaimana tipe properti CSS tertentu akan diutamakan dibandingkan tipe properti lainnya dan menjelaskannya secara lebih mendalam skor spesifisitas Membantu Anda mengevaluasi kemungkinan penerapan aturan tertentu pada CSS. Andy menggunakan contoh-contoh praktis untuk mengilustrasikan konsep dan menyederhanakan model mental dasar, sehingga mudah untuk diadopsi dan digunakan. Tingkatkan keterampilan CSS Anda.

Uji HTML dengan CSS modern

Sudahkah Anda mempertimbangkan untuk menggunakan CSS daripada JavaScript untuk menguji HTML Anda? Pemilih CSS Saat ini, mereka sangat kuat sehingga memungkinkan untuk menguji sebagian besar jenis pola HTML hanya dengan menggunakan CSS. Sebagai pendukung praktik ini, Heydon Pickering merangkum semua yang perlu Anda ketahui tentang pengujian HTML dengan CSS, apakah Anda ingin menguji aksesibilitas, menemukan pembengkakan HTML, atau memeriksa kegunaan umum.

Seperti yang ditunjukkan Heydon, ada banyak manfaat menggunakan CSS untuk pengujian. Apalagi jika Anda bekerja di browser dan suka menjelajah pengembalian visual Selain informasi inspektur di log baris perintah, pengujian dengan CSS mungkin berhasil untuk Anda. Ini juga bagus dalam situasi di mana Anda tidak memiliki akses langsung ke tumpukan pelanggan: cukup sediakan lembar gaya pengujian dan pelanggan dapat menemukan contoh pola buruk yang Anda identifikasi untuk mereka, tanpa Anda harus membantu mereka melakukannya. cerdik!

Variabel CSS yang dapat dimodifikasi sendiri

Properti khusus tidak diizinkan oleh spesifikasi CSS Properti khusus untuk mereferensikan dirinya sendiri – Meskipun ada banyak kasus penggunaan di mana fungsi tersebut berguna. Untuk menjembatani kesenjangan tersebut, Lea Verou mengusulkan a inherit() Pada tahun 2018, CSSWG menambahkannya ke spesifikasi 2021. Itu belum diedit, tapi Roman Komarov menemukan solusi untuk mulai melibatkan perilakunya.

Pendekatan Roman menggunakan kueri gaya kontainer sebagai cara untuk mengakses status properti kustom sebelumnya. Ini akan berguna bila Anda mau Siklus melalui berbagai nada Tidak ada daftar nilai statis yang cocok border-radius Misalnya daftar menu secara visual atau bersarang. Solusi ini masih bersifat eksperimental (jadi jangan gunakan dalam produksi!), namun kemungkinan kueri gaya akan mendapatkan dukungan browser yang luas sebelum inherit()yang memiliki potensi besar.

Tanda baca yang menjuntai di CSS

hanging-punctuation Ini adalah properti CSS kecil yang sederhana. Ini memperluas tanda baca, mis. kutipan pembuka Melayani blok teks yang bagus dan bersih. Meskipun saat ini hanya didukung di Safari, tidak ada salahnya untuk memasukkannya ke dalam kode Anda, karena properti ini adalah contoh sempurna dari peningkatan progresif: properti ini mempertahankan konten di browser yang tidak mendukungnya, dan menambahkan konten tambahan. Lakukan beberapa perbaikan di peramban.

Jeremy Keith memperhatikan efek samping yang tidak terduga hanging-punctuation, meskipun. Saat Anda menerapkannya secara global, ini juga akan diterapkan ke kolom formulir. Jadi, jika teks dalam bidang formulir dimulai dengan tanda kutip atau tanda baca lainnya, teks tersebut akan didorong keluar bidang dan disembunyikan. Jeremy membagikan perbaikan: tambahkan input, textarea { hanging-punctuation: none; } untuk mencegah tanda kutip menghilang. Sedikit trik dapat menyelamatkan Anda dari banyak masalah.

pemasangan aspect-ratio pertanyaan

ini aspect-ratio Properti bersinar di lingkungan cair. Itu bisa menangani apa pun dengan bentuk persegi yang dimasukkan <div> Cocok dengan dimensi 16:9 <video>, tanpa Anda harus memikirkan dimensi pastinya. Seringkali, ini bekerja dengan sempurna. Namun, ada beberapa sesuatu yang mungkin rusak aspect-ratio. Chris Coyier melihat lebih dekat tiga alasan Anda aspect-ratio Mungkin tidak berfungsi seperti yang diharapkan.

Seperti yang dijelaskan Chris, salah satu spoiler potensial sedang menyiapkan dua dimensi – ini mungkin tampak jelas, namun bisa membingungkan jika salah satu dimensi disetel dari tempat yang tidak Anda duga. Konten yang meregangkan dan memaksakan ketinggian juga dapat menimbulkan konsekuensi yang tidak diinginkan. Ikhtisar yang bagus tentang apa yang harus diwaspadai saat itu aspect-ratio istirahat.

Tata letak pasangan bata menggunakan CSS

CSS Grid membawa tata letak web ke tingkat berikutnya. Namun, sekuat apa pun CSS, tidak semua tata letak yang bisa dibayangkan bisa dilakukan. Tata letak pasangan bata adalah salah satu hal yang tidak dapat dilakukan hanya dengan CSS. Untuk mengubahnya, Kelompok Kerja CSS adalah meminta bantuanmu.

Saat ini ada Dua metode Kelompok Kerja CSS sedang mendiskusikan bagaimana CSS harus menangani tata letak batu – dan mereka mencari wawasan dari pengembang dan desainer dunia nyata untuk menemukan solusi terbaik.

Pendekatan pertama adalah memperluas grid CSS untuk memasukkan pasangan bata, dan pendekatan kedua adalah memperkenalkan tata letak pasangan bata sebagai display: masonry Tipe tampilan. Jen Simmons merangkum apa yang perlu Anda ketahui tentang perdebatan yang sedang berlangsung dan bagaimana menyuarakan pemikiran Anda tentang arah yang harus diambil CSS.

Sebelum mengambil kesimpulan, pastikan untuk membaca postingan Rachel Andrew tentang masalah ini. Dia menjelaskan mengapa tim Chrome memperhatikan penerapan tata letak batu sebagai bagian dari spesifikasi kisi CSS, dan menjelaskan apa yang akan dilakukan oleh proposal alternatif.

Tingkatkan keterampilan CSS Anda

Jika Anda ingin mempelajari lebih lanjut tentang CSS, kami siap membantu Anda – ada beberapa acara persahabatan dan SmashingConf yang diadakan tahun ini:

Kami sangat senang menyambut Anda di salah satu pengalaman istimewa kami – baik secara online atau secara langsung!

hancurkan buletin mingguan

Dengan buletin mingguan kami, kami bertujuan untuk menghadirkan Anda Informasi menarik yang berguna dan praktis Dan bagikan beberapa hal berguna yang dilakukan orang-orang di industri jaringan. memiliki Jadi Ada banyak orang berbakat yang mengerjakan proyek-proyek hebat, dan kami akan sangat berterima kasih jika Anda dapat membantu menyebarkan berita dan memberi mereka penghargaan yang layak mereka dapatkan!

Selain itu, dengan berlangganan, tidak ada email pihak ketiga atau iklan tersembunyi, dan dukungan Anda sangat membantu kami membayar tagihan. ❤️

Tertarik untuk mensponsori? Silakan memeriksa opsi mitra kami dan jangan ragu untuk menghubungi tim – mereka pasti akan menghubungi Anda sesegera mungkin.

Hasilkan $200 seminggu
Dikutip dari artikel di Smashing Magazine — Untuk Desainer dan Pengembang Web