CSS-i loenduri stiilid: kohandatud loendinumbri süsteemide loomine globaalsetele auditooriumidele

Veebidisaini pidevalt arenevas maastikul on visuaalselt atraktiivse ja semantiliselt korrektse sisu loomine ülimalt oluline. Üks sageli tähelepanuta jäetud, kuid uskumatult võimas veebikujunduse aspekt on loendite nummerdamissüsteemide kohandamise võime. CSS-i loenduri stiilid pakuvad tugevat mehhanismi, et minna kaugemale standardsetest Rooma numbritest ja kümnendarvudest, pakkudes maailma võimalusi loendite nummerdamiseks erinevates keeltes ja kultuurides üle kogu maailma. See juhend süveneb CSS-i loenduri stiilide keerukusse, andes teile võimaluse luua ligipääsetavaid, rahvusvahelisi ja visuaalselt kaasahaaravaid loendeid.

CSS-i loendurite põhitõdede mõistmine

Enne loenduri stiilidesse sukeldumist on oluline mõista CSS-i loendurite põhimõtet. CSS-i loendurid on sisuliselt brauseri hallatavad muutujad, mida suurendatakse (või vähendatakse) konkreetsete reeglite alusel. Neid kasutatakse peamiselt elementide automaatseks nummerdamiseks, nagu loendiüksused, pealkirjad või mis tahes element, kus soovite kuvada järjestust.

CSS-i loenduritega töötamisel on peamised omadused:

• counter-reset: Seda omadust kasutatakse loenduri lähtestamiseks või uuesti algväärtustamiseks. See paikneb tavaliselt vanema elemendi juures ja seab loenduri algväärtuse (vaikimisi on 0).
• counter-increment: Seda omadust kasutatakse loenduri suurendamiseks. Seda rakendatakse tavaliselt elementidele, mida soovite nummerdada. Vaikimisi suurendab see loendurit 1 võrra.
• content: Seda omadust kasutatakse sisu sisestamiseks enne või pärast elementi, sealhulgas loenduri väärtust. Funktsiooni counter() kasutatakse loenduri praeguse väärtuse kättesaamiseks.
• counters(): Seda funktsiooni kasutatakse pesastatud loendurite korral, kui on vaja kuvada ka kõigi vanemtasetega numeratsioon.

Siin on põhinäide loendurite kasutamise illustreerimiseks:

            /* Lähtesta 'item' loendur järjestamata loendil */
ul {
  counter-reset: item;
}

/* Suurenda 'item' loendurit iga loendiüksuse jaoks ja kuva selle väärtus */
li::before {
  counter-increment: item;
  content: counter(item) ". "; /*  nt 1. , 2. , jne. */
}

            

              
                Copy
              
            
          

Selles koodilõigus lähtestab omadus counter-reset loenduri nimega 'item' ul elemendil. Iga li elemendi puhul suurendab omadus counter-increment 'item' loendurit ja omadus content kuvab loenduri väärtuse, millele järgneb punkt ja tühik enne loendiüksuse teksti. See loob standardse kümnendarvulise nummerdamise süsteemi.

CSS-i loenduri stiilide tutvustus

Kuigi põhilised CSS-i loendurid pakuvad nummerdamise alust, pakuvad CSS-i loenduri stiilid paremat lähenemist nummerdamise välimuse kohandamiseks. Need võimaldavad teil määratleda oma nummerdamise süsteemid, muutes teie loendid ligipääsetavamaks ja paremini sobivaks erinevate keelte ja kultuuriliste tavade jaoks. Selle asemel, et iga numbrivormingut käsitsi luua, saate määratleda loenduri stiili, mis teostab teisenduse teie eest.

Nii toimivad CSS-i loenduri stiilid:

1. Määratle loenduri stiil: Kohandatud nummerdamissüsteemi määratlemiseks kasutate reeglit @counter-style.
2. Rakenda loenduri stiil: Rakendate määratletud loenduri stiili, kasutades omadust list-style-type vastaval loendielemendil (nt ul või ol).

Reegel @counter-style toetab mitmeid kirjeldajaid nummerdamise välimuse määratlemiseks, sealhulgas:

• system: Määrab kasutatava nummerdamissüsteemi tüübi (nt kümnendarvuline, tähestikuline, rooma, tsükliline, fikseeritud, laiendatud).
• symbols: Määratleb nummerdamiseks kasutatavad sümbolid. See on kohandatud nummerdamisskeemide loomisel ülioluline.
• suffix: Lisab numbrile järelliite (nt punkt, sulgev sulg).
• prefix: Lisab numbrile eesliite (nt avav sulg).
• pad: Määrab, kuidas numbreid täita (nt eesliidete nullidega).
• fallback: Määrab varuloenduri stiili, kui praegune stiil ei suuda konkreetset numbrit kuvada.

Kohandatud nummerdamissüsteemide loomine @counter-style abil

Uurime mõningaid praktilisi näiteid kohandatud nummerdamissüsteemide loomisest CSS-i loenduri stiilide abil.

Näide 1: Rooma numbrite kasutamine (olemasoleva süsteemi laiendamine)

Kuigi saate otse kasutada list-style-type: upper-roman; ja list-style-type: lower-roman;, näitame nende laiendamist näitena:

            
@counter-style my-upper-roman {
  system: extends upper-roman; /* Laiendab sisseehitatud 'upper-roman' */
}

ol {
  list-style-type: my-upper-roman;
}

            

              
                Copy
              
            
          

See kood määratleb loenduri stiili nimega 'my-upper-roman', mis laiendab sisseehitatud 'upper-roman' süsteemi. See loob sisuliselt sama väljundi nagu list-style-type: upper-roman; otse kasutamine, kuid demonstreerib olemasoleva süsteemi laiendamise protsessi.

Näide 2: Kohandatud tähestikuline nummerdamine (Jaapani Iroha)

Jaapani Iroha on luuletustes kasutatav tähestikuline järjestus. Nii loote selle jaoks kohandatud loenduri stiili:

            
@counter-style japanese-iroha {
  system: fixed;
  symbols: い ろ は に ほ へ と ち り ぬ る を わ か よ た れ そ つ ね ぉ く も す け え ふ こ い い ぬ し げ ん つ ず て こ の め ふ ゆ た を う き ず で す;
  suffix: " ";
}

ol {
  list-style-type: japanese-iroha;
}

            

              
                Copy
              
            
          

See kood määratleb loenduri stiili nimega 'japanese-iroha'. Kirjeldaja symbols määrab Jaapani hiragana märgid Iroha järjekorras. system: fixed; näitab, et sümbolid on fikseeritud järjekorras, mitte arvutatud. suffix: " "; lisab iga sümboli järele tühiku.

Näide 3: Araabia numbrid kohandatud ees- ja järelliitega

Loome loendi araabia numbrite abil, kuid numbrite ümber on sulud:

            
@counter-style arabic-with-parentheses {
  system: decimal;
  prefix: "(";
  suffix: ") ";
}

ol {
  list-style-type: arabic-with-parentheses;
}

            

              
                Copy
              
            
          

Selles näites määratleme loenduri stiili nimega 'arabic-with-parentheses'. system: decimal; tagab araabia numbrite kasutamise. prefix: "("; lisab numbri ette avava sulu ja suffix: ") "; lisab numbri järele sulgeva sulu ja tühiku.

Pesastatud loendurid koos counters()-ga

Pesastatud loenditega (loendid loendite sees) tegelemisel on funktsioon counters() ülioluline iga loendiüksuse täieliku nummerdamistee kuvamiseks. See on selguse huvides oluline, eriti mitme pesastamistasemega tegelemisel.

Siin on näide:

            
ul {
  counter-reset: section;
  list-style-type: none; /* Peida vaikimisi täpid */
}

li::before {
  counter-increment: section;
  content: counters(section, ".") ". ";
}

ul ul {
  counter-reset: subsection;
}

ul ul li::before {
  counter-increment: subsection;
  content: counters(section, ".") "." counter(subsection) " ";
}

            

              
                Copy
              
            
          

See kood loob pesastatud loendi nummerdamissüsteemiga nagu: 1. , 1.1 , 1.2 , 2. , 2.1 , 2.2 jne. Funktsioon counters(section, ".") kuvab jaotise numbrid punktidega eraldatuna. Pesastatud loendiüksused kasutavad sarnast lähenemist, lisades alamjaotise numbri. Lõpus olev tühik on lisatud loetavuse huvides.

Ligipääsetavuse ja rahvusvahelistumise kaalutlused

CSS-i loenduri stiilide rakendamisel on oluline seada prioriteediks ligipääsetavus ja rahvusvahelistumine. Siin on mõned peamised kaalutlused:

• Semantiline HTML: Kasutage alati sobivaid HTML-i loendielemente (<ol> järjestatud loendite jaoks, <ul> järjestamata loendite jaoks). CSS-i loenduri stiilid peaksid täiustama, mitte asendama, semantilist HTML-i.
• Ekraanilugeja ühilduvus: Veenduge, et teie kohandatud nummerdamissüsteemid oleksid ekraanilugejatele ligipääsetavad. Ekraanilugejad peaksid suutma loendinumbrimist õigesti tõlgendada ja teatada. Testige oma loendeid ekraanilugejatega, et veenduda nende funktsionaalsuses.
• Keele tugi: Arvestage sihtrühma keelte ja kultuuriliste nummerdamiskonventsioonidega. Kasutage erinevate keelte jaoks sobivaid loenduri stiile. Näiteks Jaapani Iroha nummerdamine on kultuurispetsiifiline, kuid võib olla väärtuslik Jaapani publikuga saitidele. Sama kehtib erinevate piirkondlike numbrite kohta.
• Varusüsteemid: Pakkuge võimalusel varu nummerdamissüsteeme. See tagab, et loend jääb loetavaks isegi siis, kui brauser ei toeta täielikult teie kohandatud loenduri stiili või kui kasutaja süsteemil on teatud piirangud. Kasutage oma @counter-style reeglites kirjeldajat fallback.
• Unicode'i märgid: Kasutage sümbolite jaoks vajaduse korral Unicode'i märke, kuna need on üldiselt laialdasemalt toetatud. Veenduge, et kasutatav font sisaldaks vajalikke märke õigeks renderdamiseks.
• Teksti suund: Olge teadlik paremalt vasakule (RTL) keeltest, mis võivad vajada nummerdamise paigutuse kohandamist. CSS-i loogilised omadused (nt margin-inline-start asemel margin-left) võivad selles aidata.

Parimad tavad CSS-i loenduri stiilide kasutamisel

CSS-i loenduri stiilide efektiivsuse maksimeerimiseks pidage silmas järgmisi parimaid tavasid:

• Hoidke see lihtsana: Vältige liiga keerulisi või ebatavalisi nummerdamissüsteeme, välja arvatud juhul, kui need on sisu jaoks hädavajalikud. Lihtsamad ja tuttavamad nummerdamisskeemid on kasutajatel sageli lihtsamini mõistetavad.
• Säilitage järjepidevus: Kasutage oma veebisaidil või rakenduses järjepidevat nummerdamissüsteemi. See aitab kasutajatel sisu struktuuri kiiresti mõista.
• Testige erinevates brauserites: Testige oma loenduri stiile erinevates brauserites ja seadmetes, et tagada järjepidev renderdamine. Kuigi CSS-i loenduri stiilid on hästi toetatud, võivad renderdamises esineda väikseid erinevusi.
• Kasutage tähendusrikkaid sümboleid: Kui kasutate sümboleid, valige sümbolid, mis on sisu jaoks asjakohased ja kergesti tõlgendatavad.
• Eelistage loetavust: Veenduge, et nummerdamine oleks loendiüksuse sisust selgelt eristatav. Kasutage piisavalt tühikut ja kontrasti.
• Optimeerige jõudlust: Keerulised loenduri stiilid võivad mõnikord jõudlust mõjutada. Hoidke oma CSS lühike ja tõhus.
• Arvestage semantilise tähendusega: Valige loenduri stiilid, mis tugevdavad teie sisu loogilist struktuuri. Näiteks Rooma numbrite kasutamine põhiosade ja araabia numbrite kasutamine alajaotuste jaoks võib arusaamist parandada.

Täpsemad tehnikad ja kasutusjuhtumid

Lisaks põhitõdedele pakuvad CSS-i loenduri stiilid mitmeid täiustatud tehnikaid ja on rakendatavad erinevates stsenaariumides.

Näide 4: Nummerdamise loomine üksuse atribuutide põhjal

Atribuute ei saa otse ja lihtsalt content omadusse tõmmata. Kuid väikese loovuse (ja potentsiaalselt JavaScripti kasutamisega, kui vajate väga dünaamilist käitumist) abil saate kasutada CSS-i loenduri stiili ja olemasolevat HTML-struktuurit, et nummerdada loendeid, mis viitavad üksuse atribuutidele. Näiteks saate seda kasutada jooniste nummerdamiseks, millel on pealdised, mis viitavad nende nimele DOM-is kindlas järjekorras:

            
/* Vajab täiendavat seadistamist. See näide on ainult CSS-i jaoks, mitte elementide seostamise kohta */
@counter-style figure-counter {
  system: decimal;
  suffix: ". ";
}

figure {
  counter-reset: figure-number;
}

figure::before {
  counter-increment: figure-number;
  content: counter(figure-number, figure-counter);
  /* Täiendav loenduri stiil */
}

figure figcaption::before {
  content: "Joonis " attr(data-name) ": ";  /* See eeldab atribuudi nimega data-name figcaption elemendil */
}

            

              
                Copy
              
            
          

Selle stsenaariumi korral kasutavad joonise numbrid kümnendloendurit, kuid nimed võetakse atribuudist data-name. See aitab seostada jooniseid nende pealdistega.

Näide 5: Nummerdatud väljakutsed/esiletõstmised

Saate kasutada CSS-i loendureid sisu sees olevate väljakutsekastide või esiletõstetud jaotiste nummerdamiseks, juhtides lugeja tähelepanu võtmeteabele. See lisab visuaalset huvi ja parandab loetavust.

            
.callout {
  counter-reset: callout-number;
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}

.callout::before {
  counter-increment: callout-number;
  content: "Väljakutse " counter(callout-number) ": ";
  font-weight: bold;
}

            

              
                Copy
              
            
          

See loob nummerdatud väljakutse sektsiooni rasvases kirjas pealkirjaga. Näide demonstreerib, kuidas lisada "Väljakutse" eesliidet, samuti kuidas nummerdamissüsteemi vormindada.

Näide 6: Kohandatud nummerdamine koodiloendite jaoks

Paljud veebisaidid ja dokumentatsioonisaidid kasutavad koodiloendites nummerdatud ridu. CSS-i loendureid saab kasutada selle loomiseks ja kujundamiseks, isegi dünaamiliselt nende haldamiseks koodi muutmisel.

            
pre {
  counter-reset: linenumber;
  padding-left: 2em; /* Ruumi numbritele */
  position: relative;
}

code::before {
  counter-increment: linenumber;
  content: counter(linenumber);
  position: absolute;
  left: 0;
  top: 0;
  width: 2em;
  text-align: right;
  color: #999;  /* Helehall joonenumbrite jaoks */
}

            

              
                Copy
              
            
          

See kood loob reanumbrid <pre> elemendi (mis ümbritseb koodi) vasakule küljele. counter-reset: linenumber; lähtestab loenduri. <code> ploki sees counter-increment: linenumber; suurendab loendurit iga rea jaoks ja content: counter(linenumber); kuvab reanumbri. Näide lisab põhilise kujunduse, et paigutada loendur koodist vasakule.

Levinud probleemide tõrkeotsing

Kuigi CSS-i loenduri stiilid pakuvad märkimisväärset paindlikkust, võite kokku puutuda mõne levinud probleemiga. Siin on, kuidas neid lahendada:

• Brauseri ühilduvus: Kuigi laialdaselt toetatud, veenduge, et funktsioonid töötavad teie sihtbrauserites ootuspäraselt. Kasutage brauseri arendustööriistu loodud sisu kontrollimiseks ja veendumaks, et teie CSS on õigesti tõlgendatud. Kontrollige ressursse nagu caniuse.com, et näha brauseri tuge.
• Vale loenduri väärtus: Kontrollige oma counter-reset ja counter-increment reegleid. Veenduge, et lähtestate ja suurendate loendurit õigetel elementidel. Samuti veenduge, et funktsioonid counter() või counters() on õigesti kasutatud omaduses content.
• Nummerdamine ei ilmu: Kui nummerdamine ei kuvata, veenduge, et olete loenduri stiili rakendanud õigele elemendile, kasutades omadust list-style-type. Kontrollige CSS-i, et veenduda, et see sihib elemente õigesti.
• Ootamatu väljund: Kontrollige oma CSS-i tüpode või loogikavigade suhtes oma @counter-style määratlustes. Veenduge, et symbols, prefix, suffix ja muud kirjeldajad on õigesti määratud.
• Spetsiifilisuse konfliktid: Olge teadlik CSS-i spetsiifilisusest. Veenduge, et teie loenduri stiili reeglitel on kõrgem spetsiifilisus kui teistel vastuolulistel stiilidel. Kasutage arendustööriistu, et tuvastada kõik CSS-reeglid, mis võivad teie stiile üle kirjutada.
• Fondi probleemid: Kui kasutate kohandatud sümboleid, veenduge, et kasutatavad fondid neid sümboleid toetavad. Kui need seda ei tee, võite näha tühje kohti või brauseri vaikimisi varumärke.

Järeldus: Võtke omaks CSS-i loenduri stiilide võimsus

CSS-i loenduri stiilid pakuvad võimsat ja paindlikku viisi loendite nummerdamise kohandamiseks, pakkudes võimalusi visuaalselt kaasahaarava ja semantiliselt korrektse sisu loomiseks, mis on suunatud globaalsele publikule. Mõistes põhimõisteid, harjutades erinevate näidetega ning pidades silmas ligipääsetavust ja rahvusvahelistumist, saate CSS-i loenduri stiile ära kasutada oma veebidisainiprojektide täiustamiseks.

Alates põhilistest kümnend- ja tähestikulisest nummerdamisest kuni keeruliste, kohandatud süsteemideni annavad CSS-i loenduri stiilid teile võimaluse väljendada oma loovust ja luua kasutajakogemuse, mis kõnetab laia valikut kasutajaid kogu maailmas. Nende tehnikate valdamine parandab oluliselt teie võimet luua hästi struktureeritud ja ligipääsetavat sisu, luues kõigile kaasahaaravama ja kaasavama veebi.

Võtke omaks CSS-i loenduri stiilide mitmekülgsus, katsetage erinevate nummerdamissüsteemidega ja uurige pidevalt viise, kuidas parandada oma sisu esitlust ja loetavust. Nii luades saate luua veebikogemusi, mis on mitte ainult visuaalselt atraktiivsed, vaid ka ligipääsetavad, arusaadavad ja nauditavad kasutajatele kogu maailmas.