30. august 2025Eesti

Avastage CSS-i loendurite võimsus, et luua oma veebisisu jaoks keerukaid ja dünaamilisi nummerdussüsteeme. Lihtsatest nimekirjadest kaugemale täiustatud tehnikatega.

CSS-i loendurifunktsioonid: süvaülevaade täiustatud nimekirjade nummerdamissüsteemidest

Veebiarendajatena puutume sageli kokku vajadusega nummerdatud nimekirjade järele. Standardne HTML-i <ol> element täidab seda eesmärki hästi lihtsa, järjestikuse nummerdamise puhul. Aga mis juhtub siis, kui nõuded muutuvad keerukamaks? Mis siis, kui peate nummerdama pesastatud jaotisi nagu 1.1.2, looma kohandatud stiiliga loendureid või isegi nummerdama elemente, mis ei kuulu üldse nimekirja, näiteks pealkirju või jooniseid? Aastaid nõudsid need ülesanded JavaScripti või tülikat serveripoolset loogikat. Täna on meil olemas võimas, omane lahendus: CSS-i loendurid.

CSS-i loendurid on sisuliselt CSS-i poolt hallatavad muutujad, mille väärtusi saab suurendada teie määratletud reeglitega. Need pakuvad puhtalt deklaratiivset viisi keerukate nummerdamis- ja sildistamissüsteemide loomiseks, mis ületavad kaugelt traditsiooniliste järjestatud nimekirjade võimalusi. See süvaülevaade juhatab teid CSS-i loendurite põhiprintsiipidest täiustatud tehnikate ja praktiliste, reaalsete rakendusteni, mis võivad teie veebisisu struktuuri ja selgust tõsta.

Põhitõdede mõistmine: CSS-i loendurite kolm sammast

Kogu CSS-i loendurite süsteem on üles ehitatud kolmele põhiomadusele. Nende omaduste koostöö mõistmine on selle funktsiooni valdamise võti. Mõelge sellele kui lihtsale protsessile: te lähtestate loenduri, ütlete talle, millal seda suurendada, ja seejärel kuvate selle väärtuse.

1. sammas: `counter-reset` – loenduri lähtestamine

Iga loendusprotsessi esimene samm on alguspunkti kehtestamine. Omadust counter-reset kasutatakse loenduri loomiseks ja/või lähtestamiseks. Tavaliselt rakendate seda konteinerelemendile, kust soovite loendamist alustada.

Süntaks:

counter-reset: <loenduri-nimi> [ <täisarv> ];

<loenduri-nimi>: See on nimi, mille annate oma loendurile (nt section-counter, step, my-awesome-counter). See on tõstutundlik.
[ <täisarv> ]: See valikuline väärtus määrab arvu, millele loendur tuleks lähtestada. Kui see on ära jäetud, on vaikimisi väärtus 0. Võite kasutada negatiivseid väärtusi.

Näiteks raamatu jaoks peatükkide loenduri nimega chapter käivitamiseks võite selle rakendada <body> või peamise konteineri <div> elemendile:

            body {
  counter-reset: chapter; /* Lähtestab 'chapter' loenduri, väärtus on 0 */
}

.appendix {
  counter-reset: appendix-counter -1; /* Lähtestab 'appendix-counter', algab -1-st */
}

Oluline mõiste on skoopimine. Kui kasutate counter-reset pesastatud elemendil, loob see selle elemendi skoobis uue, sõltumatu eksemplari sellest loendurist.

2. sammas: `counter-increment` – loenduri väärtuse suurendamine

Kui teie loendur on lähtestatud, vajate viisi selle väärtuse muutmiseks. Omadus counter-increment suurendab (või vähendab) loenduri väärtust, tavaliselt vahetult enne selle kasutamist.

Süntaks:

counter-increment: <loenduri-nimi> [ <täisarv> ];

<loenduri-nimi>: Suurendatava loenduri nimi.
[ <täisarv> ]: Valikuline väärtus, mis määrab, kui palju loendurit suurendada. Vaikimisi väärtus on 1. Võite kasutada väärtust 0, et mitte midagi teha, või negatiivseid väärtusi vähendamiseks.

Tavaliselt rakendate seda elementidele, mida soovite loendada. Näiteks kui nummerdate peatükke, suurendaksite loendurit igal peatüki pealkirja tähistaval <h1> sildil:

            h1.chapter-title {
  counter-increment: chapter; /* Suurendab 'chapter' väärtust 1 võrra */
}

3. sammas: `counter()` – väärtuse kuvamine

Loenduri lähtestamine ja suurendamine toimub kulisside taga. Loenduri nähtavaks tegemiseks peate kuvama selle väärtuse. Seda tehakse funktsiooni counter() abil, peaaegu alati ::before või ::after pseudo-elemendi content omaduse sees.

Süntaks:

content: counter(<loenduri-nimi>);

Pannes kõik kokku, loome lihtsa kohandatud nummerdatud nimekirja:

            /* 1. Lähtesta loendur konteineril */
.custom-list {
  counter-reset: my-list-counter;
  list-style-type: none; /* Peida vaikimisi nimekirja markerid */
  padding-left: 0;
}

/* 2. Suurenda loendurit iga elemendi juures */
.custom-list li {
  counter-increment: my-list-counter;
  margin-bottom: 0.5em;
}

/* 3. Kuva loenduri väärtus */
.custom-list li::before {
  content: counter(my-list-counter) ". ";
  font-weight: bold;
  color: #4a90e2;
  margin-right: 0.5em;
}

Selle CSS-iga kuvatakse iga <ul class="custom-list"> nüüd nummerdatud nimekirjana (1., 2., 3., jne) ilma <ol> sildita. See lihtne näide demonstreerib juba sisu (HTML) eraldamist esitlusest (CSS), võimaldades teil muuta järjestamata nimekirja järjestatuks ainult CSS-i abil.

Lihtsate nimekirjade piiridest kaugemale: täiustatud loenduritehnikad

CSS-i loendurite tõeline jõud avaneb, kui liigute edasi lihtsatest järjestustest. Uurime täpsemaid funktsioone ja omadusi, mis võimaldavad keerukaid nummerdussüsteeme.

Pesastatud loendurite loomine liigenduste ja lisade jaoks

Üks kõige köitvamaid kasutusjuhtumeid loendurite jaoks on pesastatud, hierarhilise nummerdamise loomine, nagu leiate juriidilistest dokumentidest, tehnilistest spetsifikatsioonidest või liigendustest (nt 1., 1.1., 1.1.1., 1.2.). See saavutatakse funktsiooniga counters().

Funktsioon counters() on sarnane funktsiooniga counter(), kuid see on mõeldud pesastamiseks. See hangib kõigi sama nimega loendurite väärtused, mis on praeguses skoobis, ja ühendab need määratud stringieraldajaga.

Süntaks:

content: counters(<loenduri-nimi>, '<eraldaja-string>');

Siin on, kuidas luua mitmetasemeline nimekiri:

            .outline {
  counter-reset: section; /* Lähtesta 'section' loendur ülemisel tasemel */
  list-style-type: none;
  padding-left: 1em;
}

.outline li {
  counter-increment: section; /* Suurenda iga nimekirjaelemendi jaoks */
  margin-bottom: 0.5em;
}

/* Lähtesta loendur iga pesastatud nimekirja jaoks */
.outline ul {
  counter-reset: section;
}

.outline li::before {
  /* Kuva pesastatud loendurite väärtused, ühendatud punktiga */
  content: counters(section, ".") " ";
  font-weight: bold;
  margin-right: 0.5em;
}

Selles näites on counter-reset: section; pesastatud ul-il võtmetähtsusega. See loob sellel tasemel uue, pesastatud `section` loenduri eksemplari. Funktsioon `counters()` liigub seejärel mööda DOM-puud üles, kogudes igal tasemel `section` loenduri väärtuse ja ühendades need punktiga. Tulemuseks on klassikaline 1., 1.1., 1.2., 2., 2.1. nummerdusskeem.

Loenduri vormingute kohandamine `list-style-type`-iga

Mis siis, kui vajate Rooma numbreid või tähestikulist järjestust? Nii counter() kui ka counters() funktsioonid võivad aktsepteerida valikulist teist argumenti, mis määrab nummerdamisstiili, laenates väärtusi omaduse `list-style-type` jaoks.

Süntaks:

content: counter(<loenduri-nimi>, <list-style-type>);

Levinud `list-style-type` väärtused on:

decimal (1, 2, 3) - Vaikimisi
decimal-leading-zero (01, 02, 03)
lower-roman (i, ii, iii)
upper-roman (I, II, III)
lower-alpha / lower-latin (a, b, c)
upper-alpha / upper-latin (A, B, C)
lower-greek (α, β, γ)
georgian, armenian ja palju muud rahvusvaheliste kirjasüsteemide jaoks.

Stiilime liigenduse erinevate vormingutega iga taseme jaoks:

            .detailed-outline > li::before {
  content: counter(section, upper-roman) ". "; /* Tase 1: I, II, III */
}

.detailed-outline > li > ul > li::before {
  content: counter(section, upper-alpha) ". "; /* Tase 2: A, B, C */
}

.detailed-outline > li > ul > li > ul > li::before {
  content: counter(section, decimal) ". "; /* Tase 3: 1, 2, 3 */
}

Loendurite kombineerimine stringide ja atribuutidega

Omadus content ei piirdu ainult loendurifunktsiooniga. Saate ühendada stringe, teisi CSS-i funktsioone nagu attr() ja mitut loendurit, et luua väga kirjeldavaid silte.

            h2::before {
  content: "Jaotis " counter(section) ": ";
}

.footnote::before {
  counter-increment: footnote;
  content: "[" counter(footnote) "]";
  font-size: 0.8em;
  vertical-align: super;
  margin-right: 0.2em;
}

/* attr() kasutamine andmeatribuudist tõmbamiseks */
blockquote::before {
  counter-increment: quote;
  content: "Tsitaat #" counter(quote) " (Allikas: " attr(cite) ") ";
  display: block;
  font-style: italic;
  color: #666;
}

Suurendamise kontrollimine: sammude määramine ja vähendamine

Omadus counter-increment võib võtta teise argumendi sammu väärtuse kontrollimiseks. See võimaldab teil loendada kahekaupa, viiekaupa või isegi tagurpidi, andes negatiivse arvu.

Kahekaupa loendamine (paarisarvud):

            .even-list {
  counter-reset: even-counter 0;
}
.even-list li {
  counter-increment: even-counter 2;
}
.even-list li::before {
  content: counter(even-counter);
}

Tagasiloenduse loomine:

            .countdown {
  counter-reset: launch 11; /* Alusta lähtestamisega 11-le */
}
.countdown li {
  counter-increment: launch -1; /* Vähenda iga kord 1 võrra */
}
.countdown li::before {
  content: counter(launch);
}

See lihtne tehnika on üllatavalt võimas spetsialiseeritud nimekirjade või kasutajaliidese elementide jaoks, mis nõuavad mittestandardset järjestamist.

Praktilised kasutusjuhud: kus CSS-i loendurid säravad

Teooria on tore, aga vaatame, kuidas need tehnikad lahendavad reaalseid probleeme. CSS-i loendurid ei ole mõeldud ainult nimekirjade jaoks; nad võivad struktureerida terve dokumendi.

1. kasutusjuht: pealkirjade automaatne nummerdamine

Üks klassikalisemaid ja kasulikumaid rakendusi on dokumendi pealkirjade automaatne nummerdamine. See tagab, et teie jaotiste numbrid on alati õiged, isegi kui te jaotisi ümber järjestate, lisate või eemaldate. Käsitsi uuendamine pole vajalik!

            body {
  counter-reset: h1-counter;
}

h1 {
  counter-reset: h2-counter; /* Lähtesta h2 loendur iga kord, kui h1 ilmub */
}

h2 {
  counter-reset: h3-counter; /* Lähtesta h3 loendur iga kord, kui h2 ilmub */
}

h1::before {
  counter-increment: h1-counter;
  content: counter(h1-counter) ". ";
}

h2::before {
  counter-increment: h2-counter;
  content: counter(h1-counter) "." counter(h2-counter) ". ";
}

h3::before {
  counter-increment: h3-counter;
  content: counter(h1-counter) "." counter(h2-counter) "." counter(h3-counter) ". ";
}

See elegantne lahendus loob robustse, isehoolduva dokumendi struktuuri. Maagia peitub alamloenduri lähtestamises vanempealkirjal, mis skoopib nummerdamise igal tasemel korrektselt.

2. kasutusjuht: piltide ja jooniste allkirjad

Jooniste, tabelite ja piltide automaatne nummerdamine pikas artiklis lisab professionaalse lihvi ja muudab nendele tekstis viitamise lihtsaks.

            body {
  counter-reset: figure-counter table-counter;
}

figure figcaption::before {
  counter-increment: figure-counter;
  content: "Joonis " counter(figure-counter) ": ";
  font-weight: bold;
}

table caption::before {
  counter-increment: table-counter;
  content: "Tabel " counter(table-counter) ": ";
  font-weight: bold;
}

Nüüd on iga <figcaption> ja <caption> lehel automaatselt eesliitega varustatud õige, järjestikuse numbriga.

3. kasutusjuht: täiustatud samm-sammulised juhendid ja õpetused

Õpetuste, retseptide või juhendite puhul on selge sammude nummerdamine kriitilise tähtsusega. CSS-i loendurid võimaldavad teil luua visuaalselt rikkaid, mitmeosalisi samme.

            .tutorial {
    counter-reset: main-step;
    font-family: sans-serif;
}

.step {
    counter-increment: main-step;
    counter-reset: sub-step;
    border: 1px solid #ccc;
    padding: 1em;
    margin: 1em 0;
    position: relative;
}

.step > h3::before {
    content: "Samm " counter(main-step, decimal-leading-zero);
    background-color: #333;
    color: white;
    padding: 0.2em 0.5em;
    border-radius: 4px;
    margin-right: 1em;
}

.sub-step {
    counter-increment: sub-step;
    margin-left: 2em;
    margin-top: 0.5em;
}

.sub-step::before {
    content: counter(main-step, decimal) "." counter(sub-step, lower-alpha);
    font-weight: bold;
    margin-right: 0.5em;
}

See loob selge visuaalse hierarhia, kus peamised sammud saavad silmapaistva stiiliga numbri (nt "Samm 01") ja alamsammud saavad pesastatud sildid (nt "1.a", "1.b").

4. kasutusjuht: valitud elementide loendamine

See on dünaamilisem ja interaktiivsem kasutusjuht. Saate kasutada loendureid kasutaja valitud elementide, näiteks märgistatud märkeruutude, jooksvaks kokkuvõtteks ilma igasuguse JavaScriptita.

            .checklist-container {
  counter-reset: checked-items 0;
}

/* Suurenda loendurit ainult siis, kui märkeruut on märgistatud */
.checklist-container input[type="checkbox"]:checked {
  counter-increment: checked-items;
}

/* Kuva kogusumma eraldi elemendis */
.total-count::after {
  content: counter(checked-items);
  font-weight: bold;
}

/* HTML näeks välja selline: */
/*

  Valitud elemente kokku: 
   Valik 1
   Valik 2
   Valik 3

*/

Kui kasutaja märgistab ja eemaldab märgistusi ruutudelt, uuendatakse .total-count::after kuvatavat numbrit automaatselt. See demonstreerib, kuidas loendurid saavad reageerida elementide olekutele, avades võimalusi lihtsaks, ainult CSS-põhiseks kasutajaliidese tagasisideks.

Juurdepääsetavus ja SEO kaalutlused

Kuigi CSS-i loendurid on visuaalseks esitluseks uskumatult võimsad, on oluline arvestada nende mõju juurdepääsetavusele ja SEO-le. Omaduse content poolt genereeritud sisu elab hallis alas.

Ajalooliselt ei lugenud ekraanilugejad sisu ::before ja ::after pseudo-elementidest. Kuigi tänapäevased ekraanilugejad on paranenud, võib tugi siiski olla ebajärjekindel. Visuaalselt nummerdatud nimekirja võidakse abitehnoloogia kasutajale teatada kui lihtsat, nummerdamata nimekirja, mistõttu kaotavad nad olulise struktuurse konteksti.

ARIA lahendus

Kui kasutate CSS-i loendureid standardse <ol> funktsionaalsuse asendamiseks, eemaldate semantika, mida HTML-element pakub. Peaksite selle semantilise tähenduse tagasi lisama, kasutades Accessible Rich Internet Applications (ARIA) rolle.

<div>-idega ehitatud kohandatud nummerdatud nimekirja puhul võiksite teha nii:

            <div role="list">
  <div role="listitem">Esimene element</div>
  <div role="listitem">Teine element</div>
</div>

Parim praktika on siiski sageli kasutada võimalikult semantilist HTML-i. Kui teie sisu on nimekiri, kasutage <ol>. Saate endiselt kasutada CSS-i loendureid selle markerite stiilimiseks, peites vaikimisi markeri (list-style: none) ja rakendades oma kohandatud loendurit ::before-ga. Nii saate parima mõlemast maailmast: robustse stiilimise ja sisseehitatud semantika.

Mitte-nimekirja elementide, nagu nummerdatud pealkirjade puhul, on juurdepääsetavuse lugu parem. Genereeritud number on puhtalt esitluslik; semantiline struktuur edastatakse <h1>, <h2> siltide endi kaudu, mida ekraanilugejad korrektselt teatavad.

SEO mõjud

Sarnaselt juurdepääsetavusele võivad otsingumootorite robotid CSS-i genereeritud sisu sõeluda ja indekseerida või mitte. Üldine konsensus on, et te ei tohiks kunagi paigutada kriitilist, unikaalset sisu `content` omaduse sisse. Loendurite genereeritud numbrid ei ole tavaliselt unikaalne, kriitiline sisu – need on struktuursed metaandmed. Sellisena peetakse nende kasutamist pealkirjade või jooniste nummerdamiseks üldiselt SEO jaoks ohutuks, kuna peamine sisu on HTML-is endas.

Brauseri tugi

Üks parimaid asju CSS-i loendurite juures on nende suurepärane brauseritugi. Neid on toetatud kõigis suuremates brauserites juba üle kümne aasta. Caniuse.com andmetel toetavad `counter-increment` ja `counter-reset` üle 99% brauseritest kogu maailmas. See hõlmab kõiki kaasaegseid Chrome'i, Firefoxi, Safari ja Edge'i versioone ning ulatub isegi tagasi Internet Explorer 8-ni.

See tähendab, et saate CSS-i loendureid täna enesekindlalt kasutada, ilma et peaksite vajama keerukaid varulahendusi või muretsema ühilduvusprobleemide pärast enamiku oma kasutajate jaoks kogu maailmas.

Kokkuvõte

CSS-i loendurid muudavad nummerdamise jäigast, HTML-iga seotud funktsioonist paindlikuks ja dünaamiliseks disainitööriistaks. Valdades põhikolmikut counter-reset, counter-increment ja counter()/counters() funktsioone, saate liikuda kaugemale lihtsatest nimekirjadest ja ehitada keerukaid, isehoolduvaid nummerdussüsteeme mis tahes elemendi jaoks oma lehel.

Alates peatükkide ja jooniste automaatsest nummerdamisest tehnilises dokumentatsioonis kuni interaktiivsete kontroll-lehtede ja kaunilt stiilitud õpetuste loomiseni pakuvad CSS-i loendurid võimsa, jõudsa ja puhtalt CSS-põhise lahenduse. Kuigi on oluline pidada meeles juurdepääsetavust ja kasutada semantilist HTML-i oma alusena, on CSS-i loendurid kaasaegse esiotsa arendaja tööriistakastis hädavajalik vahend puhtama koodi ja intelligentsema, struktureerituma sisu loomiseks.

CSS-i loendurifunktsioonid: süvaülevaade täiustatud nimekirjade nummerdamissüsteemidest

Põhitõdede mõistmine: CSS-i loendurite kolm sammast

1. sammas: counter-reset – loenduri lähtestamine

2. sammas: counter-increment – loenduri väärtuse suurendamine

3. sammas: counter() – väärtuse kuvamine

Lihtsate nimekirjade piiridest kaugemale: täiustatud loenduritehnikad

Pesastatud loendurite loomine liigenduste ja lisade jaoks

Loenduri vormingute kohandamine `list-style-type`-iga

Loendurite kombineerimine stringide ja atribuutidega

Suurendamise kontrollimine: sammude määramine ja vähendamine

Praktilised kasutusjuhud: kus CSS-i loendurid säravad

1. kasutusjuht: pealkirjade automaatne nummerdamine

2. kasutusjuht: piltide ja jooniste allkirjad

3. kasutusjuht: täiustatud samm-sammulised juhendid ja õpetused

4. kasutusjuht: valitud elementide loendamine

Juurdepääsetavus ja SEO kaalutlused

ARIA lahendus

SEO mõjud

Brauseri tugi

Kokkuvõte

1. sammas: `counter-reset` – loenduri lähtestamine

2. sammas: `counter-increment` – loenduri väärtuse suurendamine

3. sammas: `counter()` – väärtuse kuvamine