Κρυμμένο στα βάθη της προδιαγραφής CSS θα βρείτε μετρητές CSS. Όπως υποδηλώνει το όνομα, σας επιτρέπει να υπολογίζετε ένα πράγμα στη σελίδα σας με CSS αυξάνοντας την τιμή κάθε φορά που εμφανίζεται στο έγγραφο.
Αυτό είναι κατά κύριο λόγο χρήσιμο αν έχετε έναν ιστότοπο εκμάθησης - είτε πρόκειται για το μαγείρεμα είτε για την ανάπτυξη ιστού - όλοι έχουν βήματα για να ακολουθήσουν και πιθανότατα θα πρέπει να γράψετε τον αριθμό βήματος πριν από το πραγματικό περιεχόμενο. Οι μετρητές CSS μπορούν να σας βοηθήσουν κάνοντας αυτό αυτόματα, μπορείτε ακόμη και να το χρησιμοποιήσετε για να μετρήσετε τις εικόνες στο αρχείο σας και να προσθέσετε αριθμούς αριθμών πριν από τους υπότιτλους.
Σε αυτό το παράδειγμα θα δείξω πώς να το επιτύχουμε δημιουργώντας μια απλή συνταγή για τις τηγανίτες και κάνοντας το CSS να ψάχνει για την αρχή κάθε παραγράφου και προσθέτοντας τον αριθμό του βήματος πριν από αυτό.
Place the flour in a large bowl, make a well in the centre and pour in the milk and eggs. Give the liquid mixture a quick whisk before incorporating the flour. Continue to whisk until you have a smooth batter.
Now add 1 tbsp vegetable oil and whisk thoroughly.
Take a crêpe pan, or large frying pan, dip some kitchen roll in the oil and carefully wipe the inside of the pan. Heat the pan over a medium heat for one minute.
Add just under a ladleful of batter to the pan and immediately start swirling it around the pan to produce a nice even layer.
Cook the pancake for approximately 30-40 seconds. Use a palette knife to lift the pancake carefully to look at the underside to check it is golden-brown before turning over. Cook the other side for approx 30-40 seconds and transfer to a serving plate.
Ο στόχος σε αυτό το HTML είναι ότι κάθε παράγραφος είναι ένα διαφορετικό βήμα και με το CSS μπορούμε να προσθέσουμε αυτά δυναμικά γράφοντας μόλις 3 γραμμές κώδικα.
Οι μετρητές CSS χρησιμοποιούν την αντίθετη προσαύξηση της ιδιότητας . Έχει περάσει για λίγο ενώ στην πραγματικότητα εφαρμόστηκε στο CSS 2.1, για να το χρησιμοποιήσουμε, πρέπει πρώτα να επαναφέρουμε την προεπιλεγμένη τιμή του μετρητή σε 0 πριν από οτιδήποτε θέλουμε να μετρήσουμε εμφανίζεται στη σελίδα, γι 'αυτό είναι καλή ιδέα να το ορίσετε στο στυλ σώματος, όπως έτσι:
body {counter-reset: steps;}Αυτή η γραμμή απλώς θέτει τον μετρητή πίσω στο 0 και το ονομάζει επίσης, επιτρέποντάς του να τον καλέσουμε αργότερα και επίσης να μας επιτρέψει να έχουμε περισσότερους από έναν μετρητές στη σελίδα.
Το επόμενο βήμα είναι να χρησιμοποιήσετε το στοιχείο ψευδο : για να στοχεύσετε όλες τις παραγράφους και να προσθέσετε τον αριθμό βήματος πριν ξεκινήσει όλο το κείμενο. Για να γίνει αυτό, πρέπει να χρησιμοποιήσουμε αντίθετη προσαύξηση και στη συνέχεια να καθορίσουμε το περιεχόμενο. Μπορούμε απλώς να χρησιμοποιήσουμε τον αριθμό ή μπορούμε να προσθέσουμε ή να προσθέσουμε κάποιο κείμενο, σε αυτή την περίπτωση θα προσυπογράψουμε το "Βήμα" πριν την αξία του μετρητή, όπως έτσι:
p:before {counter-increment: steps;content: "Step " counter(steps) ": ";}Θα πρέπει επίσης να καταστήσουμε αυτό το περιεχόμενο ξεχωριστά και για να το κάνουμε αυτό θα του δώσουμε ένα μεγαλύτερο μέγεθος γραμματοσειράς από τις παραγράφους και θα το κάνουμε τολμηρό:
p {color: #242424;font-family: arial, sans-serif;font-size: 16px;line-height: 20px;}p:before {counter-increment: steps;content: "Step " counter(steps) ": ";font-weight: bold;font-size: 18px;}Εάν θέλετε να δείτε αυτή την ιδέα σε δράση, μπορείτε να δείτε το στυλό που δημιούργησα.
Μια σταθερή ανησυχία όταν εργάζεστε με το CSS είναι η υποστήριξη του προγράμματος περιήγησης, αλλά καθώς πρόκειται για εφαρμογή CSS 2.1, η υποστήριξη του προγράμματος περιήγησης είναι μεγάλη: υποστηρίζεται από όλα τα μεγάλα προγράμματα περιήγησης, επιτραπέζιους υπολογιστές και κινητά, ο μόνος σημαντικός browser που δεν υποστηρίζει είναι το IE7, και σύμφωνα με το stat μου counter IE7 χρησιμοποιείται μόνο από το 0.61% των ανθρώπων, έτσι νομίζω ότι μπορούμε να πούμε ότι IE7 θα αναχωρήσει σύντομα. Εάν θέλετε ή όχι να υποστηρίξετε το IE7, εξαρτάται από τα στατιστικά στοιχεία του ιστότοπού σας.
Οι μετρητές CSS δεν είναι κάτι που θα χρησιμοποιήσετε σε κάθε έργο αλλά είναι κάτι που πρέπει να κρατήσετε στο πίσω μέρος του μυαλού σας γιατί κάποια μέρα μπορεί να έρθει σε πρακτικό.
Χρησιμοποιήσατε μετρητές CSS σε ένα έργο; Τι χρήσεις μπορείτε να δείτε για αυτούς; Ενημερώστε μας στα σχόλια.
Προτεινόμενη εικόνα / μικρογραφία, μέτρηση εικόνας μέσω Shutterstock.