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 (ntsection-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äärtus0. 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 on1. Võite kasutada väärtust0, 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) - Vaikimisidecimal-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,armenianja 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:
*/
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.