Share
Visste du att med CSS kan du skapa en räknare? Detta kan vara särskilt användbart för fall där räkningen är rent behövs för presentationsändamål. Jag ska visa dig hur du använder counter-inkrement i denna användbara snabba tips.
Det är verkligen ganska enkelt. Vi pratar inte ens CSS3 här; de counter-inkrement egendom har funnits ett tag nu. Det är bara att många av oss inte är bekanta med det, eller har inte funnit något för det.
Vi börjar med att tillämpa counter-inkrement fast egendom. Låt oss föreställa oss att vi har en uppsättning lådor, och varje ruta ska visa ett nummer som motsvarar den ordning som lådan inträffar är dess sekvens.
.box counter-increment: boxes;
De
counter-inkrementegendom kan acceptera en eller två egenskaper. Den första är enidsom du senare kommer använda för att referera till denna specifika räknare. Du kan också skicka en andra parameter som refererar till ökningen. Till exempel istället för 1, 2, 3, 4, du kan byta till 5, 10, 15, 20 genom att ansöka:mot-inkrement: lådor 5.
Denna kod lagrar nu ett unikt nummer för varje element som har en klass av låda. Men vi vill naturligtvis få detta nummer på sidan. Förhoppningsvis kommer vi, vid någon tidpunkt i framtiden, kunna använda innehåll egendom inom standardväljare, men inte riktigt än. Istället använder vi pseudoelement för att tillämpa innehållet.
.lådan: efter innehåll: räknare (lådor);
Detta gäller ett unikt nummer - igen baserat på elementets ordning i sekvensen - till .låda element. Ska vi behöva återställa denna order tillbaka till 1 Vid något tillfälle kunde vi utnyttja motåterställning: lådor fast egendom.
Nu kanske du fortfarande tänker: "Varför skulle jag någonsin använda detta?" Det finns många situationer när det kan vara praktiskt. Tänk till exempel en kommentaravsnitt i en blogg. Om du ville ge
ett nummer för varje kommentar i uppsättningen - möjligen lite transparent - du kan använda den här tekniken. Numret är inte nödvändigt för markeringen, och används endast för presentation. I dessa fall CSS
räknare gör tricket snyggt!
Accentsconagua