Accentsconagua

Rask tips Bruke CSS-tellere til stiløkningselementer

Webdesign
Share

Lær CSS: The Complete Guide

Vi har bygget en komplett guide for å hjelpe deg med å lære CSS, enten du er bare i gang med det grunnleggende eller du vil utforske mer avansert CSS.

I dette raske tipset vil vi dekke grunnleggende om CSS-tellere; en nyttig, men likevel ikke så kjent CSS-funksjon. Når vi er ferdige med å bygge vår demo, tar vi en titt på noen virkelige eksempler på nettsteder som utnytter CSS-tellere.

Målet: Styling en bestilt liste

Som et første skritt, la oss se på oppsettet vi skal bygge:

Ikke noe fancy, ikke sant? Her er utfordringen skjønt: Vi bruker semantisk markering, slik at fristelsen ikke bruker unødvendig div og span elementer for å bygge disse motmarkørene.

La oss diskutere en ren og fleksibel løsning!

CSS tellere

Alt som trengs for å generere ovennevnte layout er å definere en bestilt liste. På dette tidspunktet kan du lure på om vi kunne ha brukt et annet element eller til og med en uordnet liste. Det korte svaret er "ja", men husk at en ordnet liste er det eneste elementet som nøyaktig beskriver strukturen på siden vår. 

Deretter vil du sannsynligvis spørre om det er mulig å tilpasse utseendet til de bestilte listene, og bygge den ønskede utformingen på den måten. Styling av de bestilte listene vil være veldig vanskelig. Heldigvis skjønt, det er en alternativ cross-browser tilnærming, så la oss gjemme seg standardlistenummerene og utnytte CSS-tellere i stedet.

syntax

CSS tellere tillater oss å generere tall basert på gjentatte elementer, og stil dem tilsvarende. Tenk på CSS tellere som variabler hvis verdier kan økes. La oss se på grunnleggende syntaks:

Opprett en ny teller

Her oppretter vi en ny teller på en bestilt liste og definerer omfanget. Vi bruker teller for tilbakestilling eiendom.

  1. Den første verdien er tellerens navn
  2. etterfulgt av en valgfri parameter som definerer startverdien til telleren (standard: 0). Merk at telleren alltid vil begynne å telle oppover, så den første generert verdien i vårt tilfelle vil være 1.
Styling barnelementet

I dette andre diagrammet kan vi se at vi styler ::før pseudo-element av li på vår liste.

  1. Her har vi lagt til tellerens verdi til innhold av vår ::før. Det er verdt å nevne at ved å bruke CSS tellere med innholdsegenskapen, kan vi sammenkoble (bli med) de genererte tallene med strenger.
  2. Vi refererer til tellerens navn
  3. og definer tellerens stil som "desimal". De mulige verdiene her ligner de som brukes til list-style-type eiendom.
  4. I teller-inkrement regel vi igjen referere til vår teller navn
  5. bruk deretter en valgfri parameter for å indikere hvor mye telleren økes. Standardverdien her er 1.

Markup

Basert på det vi nettopp har diskutert, er vår oppslag:

     
  1.  
    Listepost
     
    Noen tekst her.
     
    2.  
  2.  
    Listepost
     
    Noen tekst her.
     
    3.  <-- more list items here -->

Og den relaterte CSS:

ol mot tilbakestilling: seksjon;  li liste-stil-type: none; fontstørrelse: 1.5rem; polstring: 30px; margin-bunn: 15px; bakgrunn: # 0e0fee; farge: #fff;  li :: før innhold: teller (seksjon); counter-increment: section; display: inline-block; posisjon: absolutt; igjen: -75px; topp: 50%; transformere: translateY (-50%); polstring: 12px; skriftstørrelse: 2rem; bredde: 25px; høyde: 25px; tekst-align: center; farge: # 000; border-radius: 50%; grense: 3px solid # 000;

Dette gir oss resultatet som vist nedenfor:

begrensninger

På dette punktet er det viktig å merke seg at pseudoelementer ikke er 100% tilgjengelige. For å teste dette gjorde jeg en rask test. Jeg installerte NVDA og brukte Chrome 50, Firefox 45 og Internet Explorer 11 for å forhåndsvise demo siden. 

Det jeg fant var at når Internet Explorer ble brukt, ble ikke skjermleseren kunngjort det genererte innholdet. Disse dager flertall av skjermlesere anerkjenner generert innhold av denne typen, men du bør være oppmerksom på mulige begrensninger, og derfor bestemme hvilket innhold som er trygt nok til å generere ved hjelp av pseudo-elementer.

CSS tellere i det ville

Nå som vi kjenner grunnleggende om CSS tellere, er vi klare til å vise noen eksempler som viser deres potensielle brukstilfeller. 

For det første er CSS-tellere ofte brukt i elektroniske aviser. Mesteparten av tiden finner du dem i sidefeltene: 

Wall Street JournalHandelsblatt

CSS tellere kan også brukes i seksjoner som beskriver trinn, eller gi retninger. Her er bare et slikt eksempel:

SpikeNode  

Eksempler på Bloated HTML

I den forrige delen så vi to elektroniske aviser som utnytter CSS-tellere. Nå, la oss se ytterligere to aviser som bruker oppblåst markering (om enn med tilgjengelig innhold) i stedet for CSS-tellere:

Washington PostGuardian  

Konklusjon

I dette raske tipset lærte vi hvordan vi kan bruke CSS-tellere til å sortere bestilte listeposter. La oss kort oppsummere hva vi har dekket:

  • CSS tellere er en flott løsning for hvert prosjekt som krever dynamisk bestilling med tilpassede stiler. På den annen side er dette ikke en fullstendig tilgjengelig løsning, så vær oppmerksom på begrensningene og bruk den riktig.
  • For å sette opp tellerne må vi spesifisere to egenskaper (dvs.. teller for tilbakestilling,teller-inkrement) og en funksjon (disk() eller tellere ()).
  • Pseudo-elementer er ansvarlige for å vise tellerne. Husk at det skjer via innhold eiendom, som kun er tilgjengelig for pseudo-elementer.

Har du noen gang brukt CSS tellere i prosjektene dine? Hvis ja, vær sikker på å dele med deg ditt arbeid!

Webdesign
×