Skjult i dybden av CSS-spesifikasjonen finner du CSS-tellere. Som navnet antyder, lar de deg telle en ting på siden din med CSS som øker verdien hver gang den vises på dokumentet.
Dette er hovedsakelig nyttig hvis du har en opplæringswebside - enten det handler om matlaging eller nettutvikling - de har alle trinn for å følge, og du vil sannsynligvis måtte skrive trinnnummeret før det faktiske innholdet. CSS tellere kan hjelpe ved å gjøre det automatisk, du kan til og med bruke den til å telle bildene på filen din og legge til tall for tallene før bildetekster.
I dette eksemplet vil jeg demonstrere hvordan dette skal oppnås ved å lage en enkel oppskrift på pannekaker og lage CSS-søk etter begynnelsen av hvert avsnitt og legge til tallet for trinnet før det.
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.
Målet i denne HTML er at hvert avsnitt er et annet trinn, og med CSS kan vi legge til dem dynamisk ved å skrive så lite som 3 linjer med kode.
CSS tellere bruker eiendoms counter-increment. Det har eksistert en stund, det ble faktisk implementert i CSS 2.1. For å bruke det må vi først nullstille tellerens standardverdi til 0 før alt vi vil telle viser opp på siden, så det er en god ide å definere dette i kroppsstiler, slik som:
body {counter-reset: steps;}Denne linjen setter bare telleren tilbake til 0, og den nevner den også, slik at vi senere kan ringe den og også tillate oss å ha mer enn en teller på siden.
Det neste trinnet er å bruke pseudoelementet : før du målretter mot alle avsnittene og legger til trinnnummeret før hele teksten begynner. For å gjøre det må vi bruke kontrastinnkasting, og deretter angi innholdet. Vi kan bare bruke nummeret, eller vi kan legge til eller prepend noen tekst, i dette tilfellet vil vi prepend "Step" før tellerens verdi, slik som:
p:before {counter-increment: steps;content: "Step " counter(steps) ": ";}Vi bør også gjøre dette innholdet skille seg ut litt, og for å gjøre det, gir vi det en større skriftstørrelse enn avsnittene, og gjør den fet:
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;}Hvis du vil se denne ideen i handling, kan du se pennen jeg opprettet.
En konstant bekymring når du arbeider med CSS, er nettleserstøtten, men siden dette er en CSS 2.1-implementering, er nettleserens støtte stor: den støttes av alle de store nettleserne, skrivebord og mobil. Den eneste viktige nettleseren som ikke støtter den, er IE7, og ifølge min statsteller er IE7 brukt av bare 0,61% av folkene, så jeg tror vi kan si at IE7 skal avreise snart. Hvorvidt du trenger å støtte IE7, er avhengig av statistikken til ditt eget nettsted.
CSS tellere er ikke noe du vil bruke i hvert prosjekt, men det er noe du bør holde i bakhodet fordi det en dag kan komme til nytte.
Har du brukt CSS tellere i et prosjekt? Hvilke bruksområder kan du se for dem? Gi oss beskjed i kommentarene.
Utvalgt bilde / miniatyrbilde, teller bilde via Shutterstock.