Accentsconagua

Snabbtips Använda CSS-räknare till Style Incremental Elements

Webbdesign
Share

Lär CSS: Den kompletta guiden

Vi har byggt en komplett guide för att hjälpa dig att lära dig CSS, oavsett om du bara har börjat med grunderna eller vill utforska mer avancerad CSS.

I det här snabba tipset kommer vi att täcka de grundläggande grunderna för CSS-räknare; en användbar, men inte så känd CSS-funktion. När vi är färdiga bygger vår demo, tar vi en titt på några verkliga världsexemplar på webbplatser som utnyttjar CSS-räknare.

Målet: Styling en beställd lista

Som ett första steg, låt oss titta på layouten vi bygger:

Ingenting fancy, eller hur? Här är dock utmaningen: vi använder semantisk markering, så att frestelsen inte används onödigt div och spänna element för att bygga dessa motmarkörer.

Låt oss diskutera en ren och flexibel lösning!

CSS-räknare

Allt som krävs för att generera ovan nämnda layout är att definiera en beställd lista. Vid denna tidpunkt kanske du undrar om vi kunde ha använt ett annat element eller till och med en oorderad lista. Det korta svaret är "ja", men kom ihåg att en ordnad lista är det enda elementet som korrekt beskriver strukturen på vår sida. 

Du kommer då sannolikt att fråga om det är möjligt att fullt ut anpassa utseendet på de beställda listnumren, bygga den önskade layouten på så sätt. Att utforma de beställda listnumren skulle vara väldigt knepigt. Med tanke på det finns det ett alternativ för webbläsare, så låt oss Dölj standardlistanummer och utnyttja CSS-räknare istället.

Syntax

CSS-räknare tillåter oss att generera tal baserat på upprepade element och utforma dem i enlighet därmed. Tänk på CSS-räknare som variabler vars värden kan ökas. Låt oss titta på grundsyntaxen:

Skapa en ny räknare

Här skapar vi en ny räknare på en beställd lista och definierar dess räckvidd. Vi använder counter-reset fast egendom.

  1. Det första värdet är räknarens namn
  2. följt av en valfri parameter som definierar räknarens startvärde (standard: 0). Observera att räknaren alltid börjar räkna uppåt, så den första genererad värdet i vårt fall blir 1.
Styling barnelementet

I det här andra diagrammet kan vi se att vi stylerar ::innan pseudo-element av li på vår lista.

  1. Här har vi lagt till diskens värde till innehåll av vår ::innan. Det är värt att nämna att genom att använda CSS-räknare med innehållsegenskapen kan vi sammanfoga (ansluta) de genererade numren med strängar.
  2. Vi hänvisar till vår räknares namn
  3. och definiera räknarens stil som "decimal". De möjliga värdena här är liknande de som används för list-style-type fast egendom.
  4. I counter-inkrement regel vi hänvisar igen till vår räknares namn
  5. använd sedan en valfri parameter för att ange hur mycket räknaren ökas. Standardvärdet här är 1.

Markup

Baserat på vad vi just diskuterat, här är vår markering:

     
  1.  
    Listobjekt
     
    Några text här.
     
    2.  
  2.  
    Listobjekt
     
    Några text här.
     
    3.  <-- more list items here -->

Och den relaterade CSS:

ol motåterställning: sektion;  li list-style-type: none; fontstorlek: 1.5rem; vaddering: 30px; marginal-botten: 15px; bakgrund: # 0e0fee; färg: #fff;  li :: före innehåll: räknare (sektion); mot-inkrement: sektion; display: inline-block; position: absolut; vänster: -75px; topp: 50%; transformera: translateY (-50%); vaddering: 12px; fontstorlek: 2rem; bredd: 25px; höjd: 25px; text-align: center; färg: # 000; gränsen: 50%; gräns: 3px fast # 000;

Detta ger oss resultatet enligt nedan:

begränsningar

Vid denna tidpunkt är det viktigt att notera att pseudoelement inte är 100% tillgängliga. För att testa detta gjorde jag ett snabbtest. Jag installerade NVDA och använde Chrome 50, Firefox 45 och Internet Explorer 11 för att förhandsgranska demoversidan. 

Vad jag fann är att när Internet Explorer användes, meddelade inte skärmläsaren det genererade innehållet. Dessa dagar majoritet av skärmsläsare känner igen genererat innehåll av detta slag, men du borde vara medveten om de möjliga begränsningarna och bestämmer därför vilket innehåll som är tillräckligt säkert för att generera med hjälp av pseudoelement.

CSS Counters in the Wild

Nu när vi vet grunderna i CSS-räknare är vi redo att visa några exempel som visar deras potentiella användningsfall. 

För det första används CSS-diskar i vanliga tidningar. För det mesta hittar du dem i sidfält: 

Wall Street JournalHandelsblatt

CSS-räknare kan också användas inom sektioner som beskriver steg eller ger vägbeskrivningar. Här är bara ett exempel:

SpikeNode  

Exempel på Bloated HTML

I föregående avsnitt såg vi två dagstidningar som utnyttjar CSS-räknare. Låt oss nu se ytterligare två tidningar som använder uppblåst markup (om än med tillgängligt innehåll) istället för CSS-räknare:

Washington Postväktare  

Slutsats

I det här snabba tipset lärde vi oss hur vi kan använda CSS-räknare för att beställa ordnade listobjekt. Låt oss kort sammanfatta vad vi har täckt:

  • CSS-räknare är en bra lösning för varje projekt som kräver dynamisk beställning med anpassade format. Å andra sidan är detta inte en fullt tillgänglig lösning, så var medveten om dess begränsningar och använd den ordentligt.
  • För att ställa in disken måste vi ange två egenskaper (dvs.. counter-reset,counter-inkrement) och en funktion (disken() eller räknare ()).
  • Pseudo-elementen är ansvariga för att visa räknarna. Kom ihåg att det händer via innehåll egendom, som endast är tillgänglig för pseudo-element.

Har du någonsin använt CSS-räknare i dina projekt? Om ja, var noga med att dela med dig av ditt arbete!

Webbdesign
×