Σετ μετρητών - CSS-Κόλπα

Πίνακας περιεχομένων:

Anonim

Η counter-setιδιότητα CSS, αληθινή στο όνομά της, ορίζει την τιμή εκκίνησης για έναν μετρητή CSS. Ξέρετε πώς ξεκινούν οι ταξινομημένες λίστες από το 1 και μετά αυξάνονται από εκεί; Η counter-setιδιότητα μας επιτρέπει να ορίσουμε αυτήν την αρχική τιμή σε κάτι άλλο, ας πούμε, -1. Ή 2. Ή 200! Εκτός ότι εφαρμόζεται σε μετρητές CSS αντί για παραγγελίες λιστών.

Ας υποθέσουμε λοιπόν ότι έχουμε έναν προσαρμοσμένο μετρητή για μια λίστα κεφαλαίων βιβλίων, όπου ο αριθμός κεφαλαίου προστίθεται στο όνομα κεφαλαίου.

Θα ξεκινήσαμε καθορίζοντας έναν μετρητή με το counter-resetακίνητο. Θα το καλέσουμε chapterκαι θα το ορίσουμε σε μια κατηγορία γονικού κοντέινερ για τα κεφάλαιά μας που ονομάζονται δημιουργικά .chapters.

.chapters ( counter-reset: chapter; )

Στη συνέχεια, θα αναθέσουμε τον chapterμετρητή σε ένα στοιχείο χρησιμοποιώντας την counter-incrementιδιότητα. Δεδομένου ότι πρόκειται για κεφάλαια βιβλίων, θα τα εφαρμόσουμε

στοιχεία, υποθέτοντας ότι ο τίτλος του βιβλίου θα ήταν ο

. Παρατηρήστε ότι στην πραγματικότητα το αντιστοιχίζουμε στο :beforeψευδο-στοιχείο αφού μας επιτρέπει να προετοιμάσουμε τον μετρητή μας στο πραγματικό

στοιχείο. 
h2:before ( counter-increment: chapter; )

Ωραίο, το τελευταίο πράγμα που θα χρειαζόμασταν είναι να πούμε στον μετρητή τι πρέπει να εμφανίζει. Αυτό γίνεται στην contentιδιότητα μέσω της counter()συνάρτησης. Θα ρίξουμε λίγο χρώμα στον πάγκο, καθώς το απαιτεί ο σχεδιασμός.

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

Έι, είμαστε καλοί!

Αλλά περίμενε! Δεν σκάβω πραγματικά το γεγονός ότι ξεκινάμε από το Κεφάλαιο 1. Εννοώ, το "Προώθηση" δεν είναι πραγματικά ένα κεφάλαιο. Αν μη τι άλλο, είναι σαν το Κεφάλαιο 0.

Εκεί counter-setμπαίνει! Ας θέσουμε τα πράγματα να ξεκινήσουν στο μηδέν:

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

Ορίστε! Αυτό είναι καλύτερο. Ακριβώς ορίζοντας την τιμή ιδιοκτησίας στο όνομα του μετρητή, έχουμε ορίσει τη λίστα των κεφαλαίων για να ξεκινήσει στο Κεφάλαιο 0. Θα μπορούσαμε να ξεκινήσουμε εξίσου εύκολα με κάτι άλλο, όπως το κεφάλαιο 100.

Και αν ένα πρόγραμμα περιήγησης δεν υποστηρίζει counter-set; Τίποτα, πραγματικά. Είναι απλά θα αγνοηθεί και η λίστα θα ξεκινήσει στις προεπιλογή της, 1.

Σύνταξη

( ? )+ | none

Αυτός είναι βασικά ένας φανταχτερός τρόπος για να πούμε ότι η ιδιοκτησία παίρνει το όνομα ενός προσαρμοσμένου μετρητή ( ) και της αρχικής τιμής ( ). Ή θα οριστεί noneκαι η αρίθμηση θα ξεκινήσει στο προεπιλεγμένο σημείο εκκίνησης, 1.

  • Αρχική τιμή: none
  • Ισχύει για: όλα τα στοιχεία (συμπεριλαμβανομένων μη οπτικών)
  • Κληρονομική: όχι
  • Τύπος κινούμενης εικόνας: ανά τύπο υπολογισμένης τιμής

Αξίες

/* 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;

Σημειώστε ότι counter-setθα δημιουργηθεί ένας νέος μετρητής εάν το όνομα μετρητή που δηλώνεται σε αυτόν δεν έχει ήδη καθοριστεί κάπου αλλού.

Υποστήριξη προγράμματος περιήγησης

ΙΕ Ακρη Firefox Χρώμιο Σαφάρι ΛΥΡΙΚΗ ΣΚΗΝΗ
Οχι Οχι 68+ Οχι Οχι Οχι
Android Chrome Android Firefox Πρόγραμμα περιήγησης Android iOS Safari Opera Mini
Οχι 79+ Οχι Οχι Οχι
Πηγή: caniuse

Περαιτέρω ανάγνωση

  • CSS Lists Module Level 3 Specification (Προσχέδιο εργασίας)
  • Εμφάνιση τρέχοντος βήματος με μετρητές CSS
  • Καταμέτρηση με CSS μετρητές και πλέγμα
  • Τρόπος αντιστροφής προσαρμοσμένων μετρητών CSS