- Counter-increment omadus võimaldab arendajatel dünaamiliselt suurendada või vähendada CSS-i muutuja, mida nimetatakse loenduriks, väärtust.
- Efektiivne nummerdamine nõuab loenduri lähtestamist loenduri initsialiseerimiseks ja loenduri() funktsiooni kasutamist väärtuse renderdamiseks.
- Edasijõudnutele mõeldud kasutus hõlmab pesastatud loendureid funktsiooni counters() abil ja kohandatud vormindamist rooma numbrite või tähestikuliste loenditega.
Kas olete kunagi vaadanud pikka dokumenti ja soovinud, et saaksite pealkirjad automaatselt nummerdada ilma iga uue jaotise lisamisel käsitsi sisestamata „1, 2, 3”? Teil on vedanud, sest CSS-il on sellega toimetulekuks sisseehitatud viis. Mõelge CSS-i loenduritest kui sisemistest muutujatest , mis jälgivad numbreid brauseri lehe renderdamisel, võimaldades teil luua loendeid ja järjestusi, mis värskendavad end lennult.
Kuigi see võib tunduda millegi sellisena, mille jaoks vajate JavaScripti, on need tööriistad brauseri natiivsed ja uskumatult kerged. Kasutades vastukasvu koos teiste omadustega , saate muuta tavalised HTML-elemendid struktureeritud nummerdatud järjestuseks, muutes oma sisu kasutajate jaoks palju lihtsamini navigeeritavaks, hoides samal ajal teie märgistuse puhta ja semantilise.
Põhimehaanika: kuidas see toimib
Nende loendurite tööle saamiseks ei saa kasutada ainult ühte omadust; vaja on väikest CSS-reeglite meeskonda, mis koos töötaksid. Esiteks on olemas counter-reset , mis toimib algusreana. See initsialiseerib loenduri kindla nime ja valikuliselt algusnumbriga. Kui te numbrit ei sisesta, on vaikeväärtus 0. Näiteks kui soovite, et teie esimene element oleks 1, lähtestaksite selle enne elementide ilmumist väärtusele 0.
Seejärel tuleb etenduse staar: counter-increment . See omadus käsib brauseril lisada teie nimetatud loendurile väärtuse iga kord, kui see kohtub konkreetse valijaga. Vaikimisi liidetakse 1, kuid võite määrata mis tahes täisarvu . Kui kasutate negatiivset arvu, näiteks -1, loendab loendur tegelikult tagasi, mis on nutikas nipp loendurite või vastupidiste loendite loomiseks. Kui teil on vaja peatada loenduri suurenemine kindlas piirkonnas, saate selle lihtsalt väärtuseks määrata none.
Numbrite ekraanile toomine
Üks asi, mis algajatele närvidele käib, on see, et loendurid on nähtamatud vaikimisi. Need on lihtsalt brauseri mälus hõljuvad numbrid. Nende nägemiseks peate kasutama sisu omadus, tavaliselt sees ::before or ::after pseudoelement. Siin toimub loenduri() funktsioon tuleb mängu , mis hangib teie muutuja praeguse väärtuse ja prindib selle tekstina.
- Põhiline rakendamine: Sa sihtid elementi, mida soovid nummerdada, ja rakendad seda.
counter-incrementja seejärel kasutadacontent: counter(name);pseudoelemendis. - Kohandatud stringid: Sa ei ole piiratud ainult numbriga. Sa saad liittekstNagu
content: \"Step \" counter(my-counter) \": \";professionaalsema ilme loomiseks. - Väljundi kujundamine: Saate numbri välimust muuta, edastades funktsioonile teise argumendi. Näiteks ülem-rooma annab sulle rooma numbrid, samal ajal kui madalam alfa annab tähtedega nimekirja.
Täiustatud tehnikad ja reaalse maailma kasutusjuhud
Kui teil on tegemist pesastatud struktuurid, näiteks sisukorra puhul, kus on jaotised 1, 1.1 ja 1.1.1, ei piisa ühest loendurist. Siin on koht, kus loenduri() funktsioon (mitmus) on elupäästja. Erinevalt ainsuse vormist counters() saab jälgida mitut pesastatud taset ja ühenda need nööriga, näiteks punkt, et luua hierarhiline numeratsioonisüsteem.
Väga praktiline rakendus on lisamine reanumbrid koodiplokkideks. Kui kasutate süntaksi esiletõstjaid, mis ei toeta kohe nummerdamist, saate koodiridu CSS-iga sihtida. Lähtestage loendur <pre> silt ja suurendades seda iga .line klassis lood sa sujuv veeru numeratsioon ilma teie JavaScripti loogikat puutumata.
Veel üks nutikas nipp on õdede-vendade lugemine mis pole tehniliselt pesastatud. Kui teil on rida <h2> ja <h3> sildid, saate teha <h2> lähtestage <h3> loendur. See loob loogiline järjestus kus alapealkirjad algavad iga kord uue põhipealkirja ilmumisel uuesti 1-st, isegi kui nad kõik on DOM-is õed-vennad.
Sõna ligipääsetavuse kohta
Kuigi CSS-loendurite kasutamine mis tahes div-ide rühma loendi moodi väljanägemiseks on ahvatlev, peaksite olema ettevaatlik. Semantiline HTML on kuningasKui sisu on loogiliselt loend, kasutage <ol> ja <li>CSS-i kasutamine loendi matkimiseks sobib suurepäraselt visuaalne kaunistamine või pealkirjadele nummerdamise lisamine, kuid see ei tohiks asendada alusstruktuuri, millele ekraanilugejad lehel tõhusaks navigeerimiseks toetuvad.
Kasutades ära counter-reset'i, counter-increment'i ja counter() funktsiooni võimsust , saate loobuda staatilisest nummerdamisest ja võtta omaks dünaamilise süsteemi, mis teeb kogu matemaatika teie eest ära. Olenemata sellest, kas koostate keerukat tehnilist käsiraamatut pesastatud osadega või lisate lihtsalt ajaveebi koodijuppidele veidi lihvi, pakuvad need tööriistad töökindlat ja toimivat viisi järjestamise haldamiseks otse teie stiililehtedel.
