Memahami kaunter CSS dan kes penggunaannya

Terdapat ciri -ciri CSS tertentu yang mungkin kita tidak gunakan dengan kerap. Saya fikir kaunter CSS jatuh ke dalam kategori itu untuk kebanyakan kita, dan lebih mungkin kerana dua sebab:

mereka nampaknya tidak mempunyai banyak kes penggunaan.
kod untuk menulisnya agak kompleks.

baru -baru ini melihat kes penggunaan praktikal untuk kaunter, jadi saya fikir saya akan memberikan kursus kemalangan ringkas mengenai bagaimana kaunter ditulis dan berkongsi kes penggunaan di sini.

Takeaways Key

Kaunter CSS menyediakan penomboran dinamik dalam CSS, yang membolehkan penomboran item bukan berturut-turut, yang boleh disusun semula tanpa perlu menyesuaikan penomboran secara manual. Ini dicapai melalui penggunaan elemen pseudo dan CSS khusus.
Walaupun kerumitan awal, kaunter CSS tidak sukar untuk mengekalkan apabila konsep unsur-unsur pseudo CSS difahami. Walaupun kandungan yang dihasilkan mungkin mempunyai kebimbangan aksesibiliti, kebanyakan penyemak imbas menyokongnya dan diiktiraf oleh pembaca skrin.
Kes penggunaan praktikal untuk kaunter CSS dilihat dalam spesifikasi tahap 4 pemilih W3C, di mana ia digunakan untuk nombor "isu" dan "contoh" yang diselingi dalam kandungan. Ini membolehkan penambahan mudah, penyingkiran, atau menyusun semula item sambil mengemas kini penomboran secara automatik.

kursus kemalangan di kaunter CSS

kaunter CSS membolehkan anda untuk nombor item dalam CSS menggunakan penomboran dinamik, sama seperti bagaimana senarai yang diperintahkan berfungsi. Tetapi kaunter CSS agak berbeza. Ciri ini menggunakan elemen pseudo yang digabungkan dengan beberapa CSS khusus balas untuk menambah/mempersiapkan "kiraan" dinamik kepada satu set elemen yang ditentukan.

Berikut adalah contoh kod, sama seperti yang saya akan gunakan dalam demo pada akhir artikel ini:

<span><span>.container</span> {
</span>  <span>counter-reset: issues 0;
</span><span>}
</span>
<span><span>.issue:before</span> {
</span>  <span>counter-increment: issues 1;
</span>  <span>content: "Issue " counter(issues, decimal);
</span>  <span>display: block;
</span><span>}</span>

Blok pengisytiharan pertama mentakrifkan skop kiraan. Apa ini bermakna kaunter saya akan bertambah hanya dalam unsur -unsur yang mempunyai kelas .container. Saya telah memilih pengecam tersuai yang dipanggil "isu", yang diperlukan untuk menghubungkan bekas ke unsur -unsur yang dikira.

Blok Deklarasi Kedua menggunakan: Sebelum Pseudo-Element (saya boleh menggunakan alternatif: selepas, tetapi itu jarang berlaku di kaunter) dan harta kandungan untuk menyediakan kandungan yang ditakrifkan.

Sebagai sebahagian daripada nilai harta kandungan, saya menggunakan fungsi kaunter () bersama -sama dengan rentetan, sama dengan sesuatu yang mungkin dilakukan dalam JavaScript atau bahasa pengaturcaraan lain yang lebih tipikal. Fungsi kaunter () mengambil dua argumen: pengenal kaunter ditakrifkan lebih awal (dalam kes ini, "isu") dan gaya kaunter, yang boleh menjadi nilai yang digunakan untuk harta jenis gaya dalam senarai yang diperintahkan. Lalai adalah "perpuluhan", yang saya gunakan dalam contoh ini.

Jika anda masih keliru bagaimana kaunter berfungsi, mungkin infographic mini ini akan membantu:

Dan jika itu tidak mencukupi, berikut adalah beberapa sumber tambahan dengan maklumat lanjut, termasuk artikel saya sendiri di mana saya pada asalnya menerbitkan infographic yang sama:

• CSS Counters: Counter-Increment and Friends (Web yang mengagumkan)
• bagaimana untuk mendapat manfaat daripada kandungan dan kaunter yang dihasilkan oleh CSS (majalah Smashing)
• gaya kaunter CSS Tahap 3 (W3C Spec)

Pautan terakhir adalah draf editor Spec Counter, yang memperkenalkan beberapa ciri-ciri kaunter yang baru yang mungkin tidak mempunyai banyak, jika ada, sokongan pelayar dan yang mungkin berisiko dalam versi masa depan spec. Ciri-ciri yang saya gunakan dalam artikel ini, bagaimanapun, adalah penyemak imbas, kembali ke IE8.

Menentukan nilai kaunter CSS

Pada pandangan yang cetek, dua masalah utama timbul ketika berfikir pertama tentang melaksanakan kaunter CSS:

1. senarai yang diperintahkan sudah melakukan ini, jadi mengapa saya memerlukan ciri yang begitu kompleks hanya untuk item nombor?
2. Kandungan yang dihasilkan tidak boleh diakses dan ini mencampurkan kandungan dengan persembahan.

Yang pertama dari kedua -dua masalah itu sebenarnya bukan masalah sama sekali. Sekiranya anda mahu item berturut -turut bernombor maka ia sesuai untuk menggunakan senarai yang diperintahkan (iaitu dengan bersarang

unsur). Tetapi kaunter CSS bukanlah untuk menimpa item berturut -turut; Mereka adalah untuk menuding item yang tidak berturut-turut, di mana sahaja mereka berada di DOM, kemudian dapat memerintahkan mereka tanpa perlu menukar nombor yang disediakan untuk setiap.

Selain itu, walaupun kaunter boleh menjadi sedikit kompleks melihat pandangan pertama, apabila anda memahami konsep unsur-unsur pseudo CSS, mereka benar-benar tidak sukar untuk mengubah dan mengekalkan.

Masalah lain, yang berkaitan dengan kebolehcapaian, nampaknya tidak menjadi masalah besar seperti yang berlaku pada masa lalu. Satu artikel oleh Léonie Watson menyimpulkan:

"[g] kandungan bertenaga adalah aksesibiliti yang disokong dalam kebanyakan penyemak imbas, dan diiktiraf oleh pembaca skrin dengan sewajarnya."

Walau bagaimanapun, sokongan tidak 100%, jadi saya akan mengatakan bahawa jika anda akan menggunakan unsur-unsur pseudo untuk menjana kandungan, "kandungan" harus mempunyai nilai hiasan dan tidak penting untuk pemahaman atau fungsi laman web yang dimasukkan ke dalam. Dengan pendekatan yang seimbang dalam fikiran, ia harus baik untuk menggunakan kaunter dalam kes -kes tertentu seperti yang diterangkan di bawah.

kes penggunaan mudah

Baru -baru ini saya melihat spesifikasi Level 4 pemilih W3C dan menyatakan bahawa mereka mempunyai "isu" dan "contoh" yang diselingi dalam kandungan. Saya telah melihat ini sebelum ini tetapi hanya kemudian saya memutuskan untuk menyiasatnya sedikit. Unsur-unsur ini bernombor, jadi saya tertanya-tanya bagaimana mereka dapat menambahkan dan mengeluarkannya tanpa perlu membayar semula keseluruhan set setiap kali. Saya fikir ia mungkin skrip, atau yang dijana di belakang atau sesuatu seperti itu.

nope. Mereka menggunakan kaunter CSS, seperti yang ditunjukkan dalam tangkapan skrin di bawah:

Di halaman mereka, mereka mempunyai masalah bernombor (kotak merah) dan contoh bernombor (kotak kuning). Menggunakan pengecam tersuai untuk setiap set yang dikira, mereka boleh dengan mudah menambah, mengeluarkan, atau memesan semula item dan CSS secara automatik akan menambah nombor yang betul ke item.

Di samping itu, halaman spec ini juga termasuk indeks isu pada akhir halaman, yang menggunakan pengenal kaunter yang sama sebagai isu, tetapi dalam skop baru sehingga ia memulakan kiraan segar. Senarai isu pendua membuat sedikit lebih banyak kerja untuk mengekalkan isu -isu tetapi, sekali lagi, perintah itu pada umumnya mudah untuk dikekalkan selagi ia sepadan dengan apa yang telah diubah dalam badan kandungan.

demo drag-and-drop

Saya telah mencipta semula contoh W3C supaya anda boleh bermain-main dengan cara kaunter berfungsi, tetapi juga untuk melihat betapa mudahnya untuk membuat senarai dinamik dengan cara ini dari item yang tidak bersebelahan dengan hanya HTML dan CSS.

Lihat pen 20Fe8F19AE48C210DA6C5DF78C0CF6F8 oleh SITEPOINT (@SitePoint) pada CODEPEN.

Dalam demo, saya menggunakan ciri Sortable JQueryui untuk membolehkan anda menyeret dan memerintahkan semula mana-mana perenggan di halaman, termasuk kotak "isu" dan "contoh". Perhatikan bagaimana nombor berubah bergantung pada di mana item diseret (walaupun tingkah laku nombor nampaknya agak unik semasa dalam proses menyeret). Saya juga memasukkan "senarai isu" pendua di bahagian bawah, seperti pada halaman W3C.

Kesimpulan

Ini sepatutnya menjadikannya lebih jelas apa yang boleh digunakan oleh kaunter CSS. Fikirkan mana-mana dokumen yang sering diedit, mungkin juga sesuatu yang dihasilkan oleh pengguna di mana item boleh disusun semula atau dipesan semula. Dan, seperti yang disebutkan, jenis kaunter ini kemungkinan besar berguna apabila penomboran tidak penting untuk pemahaman kandungan dan apabila barang-barang tidak bersebelahan dalam sumber.

Jika anda telah melihat kaunter CSS yang digunakan dalam beberapa cara yang berguna, beritahu kami dalam komen.

Soalan Lazim (Soalan Lazim) Mengenai Kaunter CSS

Apakah jenis kaunter CSS yang berlainan? Jenis 'kaunter' digunakan untuk kaunter peringkat satu, seperti tajuk penomboran dalam dokumen. Jenis 'kaunter', sebaliknya, digunakan untuk kaunter pelbagai peringkat, seperti penomboran sub-bahagian dalam bahagian. Kedua -dua jenis ini digunakan dengan harta 'kandungan' dalam CSS untuk memaparkan nilai kaunter.

Bagaimana saya menetapkan semula kaunter CSS? Harta ini menetapkan kaunter kepada mana -mana nombor tertentu. Sebagai contoh, 'restra-reset: seksyen;' akan menetapkan semula kaunter 'seksyen' kepada sifar. Anda juga boleh menetapkan kaunter ke nombor yang berbeza, seperti 'restra-reset: seksyen 5;', yang akan menetapkan semula kaunter 'seksyen' kepada lima.

Ya, kaunter CSS boleh digunakan dengan senarai. Ini amat berguna apabila anda ingin menyesuaikan penomboran item senarai. Anda boleh menggunakan sifat 'restra-reset' dan 'counter-increment' untuk mengawal penomboran, dan harta 'kandungan' untuk memaparkan nilai kaunter.

Nombor yang dihasilkan oleh kaunter CSS boleh digayakan sama seperti teks lain dalam CSS. Anda boleh menggunakan sifat seperti 'warna', 'saiz font', 'font-weight', dan lain-lain, untuk gaya nombor. Gaya akan digunakan untuk nombor apabila ia dihasilkan oleh harta 'kandungan'. . Ini boleh dilakukan dengan menggunakan harta 'kaunter-reset' pada elemen 'jadual', harta 'counter-increment' pada elemen 'tr', dan harta 'kandungan' pada 'sebelum' atau 'selepas' pseudo -Lemen dalam elemen 'tr'.

Bagaimana saya membuat kaunter pelbagai peringkat dengan kaunter CSS? CSS. Fungsi ini mengambil dua argumen: nama kaunter dan rentetan yang akan digunakan sebagai pemisah antara tahap. Sebagai contoh, 'Kandungan: Kaunter (Seksyen, ".");' Ya, kaunter CSS sering digunakan dengan unsur-unsur 'sebelum' dan 'selepas' pseudo. Harta 'kandungan', yang digunakan untuk memaparkan nilai kaunter, hanya boleh digunakan dengan unsur-unsur pseudo ini. bertambah menggunakan harta 'kaunter-kenalan'. Harta ini meningkatkan nilai kaunter oleh satu setiap kali ia dipanggil. Contohnya, 'Kaunter Kaunter: Seksyen;' Akan Meningkatkan Kaunter 'Seksyen'. . Ini boleh dilakukan dengan menetapkan harta 'restra-reset' atau 'counter-increment' kepada nombor negatif. Sebagai contoh, 'restra -reset: seksyen -1;' akan menetapkan kaunter 'seksyen' kepada satu negatif.

Bolehkah saya menggunakan kaunter CSS dengan sifat CSS yang lain? Sebagai contoh, anda boleh menggunakan fungsi 'kaunter' atau 'kaunter' dengan harta 'kandungan' untuk memaparkan nilai kaunter. Anda juga boleh menggunakan sifat 'restra-reset' dan 'counter-increment' dengan mana-mana elemen untuk mengawal nilai kaunter.

Atas ialah kandungan terperinci Memahami kaunter CSS dan kes penggunaannya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!