Counter-set - Trik CSS

Daftar Isi:

Anonim

The counter-setproperti CSS, benar dengan namanya, menetapkan mulai nilai counter CSS. Anda tahu bagaimana daftar berurutan mulai dari 1 dan kemudian naik dari sana? The counter-setproperti memungkinkan kita untuk set yang mulai nilai untuk sesuatu yang lain, mengatakan, -1. Atau 2. Atau 200! Kecuali itu diterapkan ke penghitung CSS, bukan daftar yang diurutkan.

Jadi, katakanlah kita memiliki penghitung khusus untuk daftar bab buku, di mana nomor bab diawali dengan nama bab.

Kami akan mulai dengan menentukan penghitung dengan counter-resetproperti. Kami akan menyebutnya chapterdan mendefinisikannya pada kelas kontainer induk untuk bab kami yang disebut, secara kreatif .chapters,.

.chapters ( counter-reset: chapter; )

Selanjutnya, kami akan menetapkan chapterpenghitung ke elemen menggunakan counter-incrementproperti. Karena ini adalah bab buku, kami akan menerapkannya

elemen, dengan asumsi judul buku akan menjadi

. Perhatikan bahwa kita sebenarnya menugaskannya ke :beforepseudo-element karena ini memungkinkan kita untuk menambahkan penghitung kita ke yang sebenarnya

elemen. 
h2:before ( counter-increment: chapter; )

Keren, hal terakhir yang kita perlukan adalah memberi tahu konter apa yang harus ditampilkan. Itu dilakukan pada contentproperti melalui counter()fungsi. Kami juga akan memberi sedikit warna di meja karena desain membutuhkannya.

h2:before ( color: red; content: "Chapter " counter(chapter) ": "; counter-increment: chapter; )

Hei, kami terlihat bagus!

Tapi tunggu! Saya tidak benar-benar menggali fakta bahwa kita memulai Bab 1. Maksud saya, "Maju" sebenarnya bukan sebuah bab. Jika ada, itu seperti Bab 0.

Di situlah counter-setmasuk! Mari kita mulai dari nol:

h2:first-of-type::before ( counter-set: chapter; )

Ini dia! Itu lebih baik. Hanya dengan menyetel nilai properti ke nama penghitung, kita telah menyetel daftar bab untuk dimulai dari Bab 0. Kita bisa dengan mudah mengaturnya mulai dari sesuatu yang lain, seperti bab 100.

Dan jika browser tidak mendukung counter-set? Tidak ada, sungguh. Ini hanya akan diabaikan dan daftar akan mulai dari default 1,.

Sintaksis

( ? )+ | none

Ini pada dasarnya adalah cara yang bagus untuk mengatakan bahwa properti mengambil nama penghitung khusus ( ) dan nilai awal ( ). Atau setel ke nonedan penomoran akan dimulai dari titik awal default 1,.

  • Nilai awal: none
  • Berlaku untuk: semua elemen (termasuk yang non-visual)
  • Diwariskan: tidak
  • Jenis animasi: menurut jenis nilai yang dihitung

Nilai

/* Set "awesome-counter" to 0 */ counter-set: awesome-counter; /* Set "awesome-counter" to -10 */ counter-set: awesome-counter -10; /* Set "awesome1" to 0, and "awesome2" to 2 */ counter-set: awesome1 awesome2 2; /* Wipe out any other settings that may have been declared elsewhere */ counter-set: none; /* Global values */ counter-set: inherit; counter-set: initial; counter-set: unset;

Perhatikan bahwa counter-setakan membuat penghitung baru jika nama penghitung yang dideklarasikan di atasnya belum ditentukan di tempat lain.

Dukungan browser

YAITU Tepi Firefox Chrome Safari Opera
Tidak Tidak 68+ Tidak Tidak Tidak
Android Chrome Android Firefox Browser Android iOS Safari Opera Mini
Tidak 79+ Tidak Tidak Tidak
Sumber: caniuse

Bacaan lebih lanjut

  • Spesifikasi CSS List Module Level 3 (Draf Kerja)
  • Menampilkan Langkah Saat Ini dengan Penghitung CSS
  • Menghitung Dengan Penghitung CSS dan Grid
  • Cara Membalikkan Penghitung Kustom CSS