- Counter-increment īpašība ļauj izstrādātājiem dinamiski palielināt vai samazināt CSS mainīgā, ko sauc par counter, vērtību.
- Efektīvai numerācijai ir nepieciešama counter-reset kombinācija, lai inicializētu count, un counter() funkcija, lai atveidotu vērtību.
- Paplašinātā lietošana ietver ligzdotus skaitītājus, izmantojot funkciju counters() un pielāgotu formatējumu ar romiešu cipariem vai alfabētiskiem sarakstiem.
Vai esat kādreiz aplūkojis garu dokumentu un vēlējies, lai varētu automātiski numurēt virsrakstus, manuāli neierakstot \"1, 2, 3\" katru reizi, kad pievienojat jaunu sadaļu? Jums ir paveicies, jo CSS ir iebūvēts veids, kā ar to tikt galā. Iedomājieties CSS skaitītājus kā iekšējus mainīgos , kas seko līdzi skaitļiem, kamēr pārlūkprogramma atveido jūsu lapu, ļaujot jums izveidot sarakstus un secības, kas atjauninās pašas no sevis.
Lai gan varētu šķist, ka šim nolūkam ir nepieciešams JavaScript, šie rīki ir iebūvēti pārlūkprogrammā un ir neticami viegli. Izmantojot pretpieaugumu kopā ar citiem atribūtiem , jūs varat pārveidot vienkāršus HTML elementus strukturētā, numurētā secībā, padarot saturu daudz vieglāk pārskatāmu lietotājiem, vienlaikus saglabājot iezīmējumu tīru un semantisku.
Galvenā mehānika: kā tā darbojas
Lai šie skaitītāji darbotos, nevar izmantot tikai vienu īpašību; ir nepieciešama neliela CSS noteikumu komanda, kas darbojas kopā. Pirmkārt, ir counter-reset , kas darbojas kā sākuma rinda. Tā inicializē skaitītāju ar konkrētu nosaukumu un, pēc izvēles, sākuma numuru. Ja nenorādāt numuru, tā noklusējuma vērtība ir 0. Piemēram, ja vēlaties, lai pirmais elements būtu 1, pirms elementu parādīšanās tas būtu atiestatāms uz 0.
Tad seko šova zvaigzne: counter-increment . Šī īpašība norāda pārlūkprogrammai pievienot vērtību jūsu nosauktajam skaitītājam katru reizi, kad tas sastopas ar noteiktu selektoru. Pēc noklusējuma tas pieskaita 1, bet jūs varat norādīt jebkuru veselu skaitli . Ja izmantojat negatīvu skaitli, piemēram, -1, skaitītājs faktiski skaitīs atpakaļ, kas ir ērts triks atpakaļskaitīšanas vai apgrieztu sarakstu izveidei. Ja jums ir jāaptur skaitītāja pieaugums noteiktā apgabalā, varat to vienkārši iestatīt uz none.
Skaitļu parādīšana ekrānā
Viena lieta, kas mulsina iesācējus, ir tā, ka skaitītāji ir neredzami pēc noklusējuma. Tie ir tikai skaitļi, kas peld pārlūkprogrammas atmiņā. Lai tos faktiski redzētu, jums jāizmanto satura īpašums, parasti iekšpusē ::before or ::after pseidoelements. Šeit notiek skaitītāja() funkcija stājas spēkā, kas izgūst jūsu mainīgā pašreizējo vērtību un izdrukā to kā tekstu.
- Pamata ieviešana: Jūs atlasāt elementu, kuru vēlaties numurēt, un pielietojat
counter-increment, un pēc tam izmantojietcontent: counter(name);pseidoelementā. - Pielāgotas virknes: Jūs neesat ierobežots tikai ar skaitu. Jūs varat salikt tekstu, Piemēram,
content: \"Step \" counter(my-counter) \": \";lai radītu profesionālāku izskatu. - Izvades stilizēšana: Jūs varat mainīt skaitļa izskatu, nododot funkcijai otru argumentu. Piemēram, augšromiešu sniegs jums romiešu ciparus, kamēr zemākā alfa sniedz burtu sarakstu.
Uzlabotas metodes un reālās pasaules lietošanas gadījumi
Ja jums ir darīšana ar ligzdotas struktūras, piemēram, satura rādītājā, kurā ir 1., 1.1. un 1.1.1. sadaļa, ar vienu skaitītāju nepietiek. Šeit skaitītāju() funkcija (daudzskaitlī) ir glābiņš. Atšķirībā no vienskaitļa versijas, counters() var izsekot vairākiem ligzdotiem līmeņiem un savienojiet tos ar auklu, piemēram, punktu, lai izveidotu hierarhisku numerācijas sistēmu.
Ļoti praktisks pielietojums ir pievienošana rindu numuri koda blokiemIzmantojot sintakses iezīmētājus, kas neatbalsta numerāciju uzreiz, varat mērķēt koda rindas ar CSS. Atiestatot skaitītāju uz <pre> tagu un palielinot to ik pēc .line klasē jūs izveidojat viengabalaina numerācijas kolonna neskarot jūsu JavaScript loģiku.
Vēl viens gudrs triks ir brāļu un māsu skaitīšana kas tehniski nav ligzdoti. Ja jums ir virkne <h2> un <h3> tagus, jūs varat izveidot <h2> atiestatīt <h3> skaitītājs. Tas rada loģiska secība kur apakšvirsraksti atsākas no 1 katru reizi, kad parādās jauns galvenais virsraksts, pat ja tie visi ir līdzvērtīgi DOM.
Vārds par pieejamību
Lai gan ir vilinoši izmantot CSS skaitītājus, lai jebkura div elementu grupa izskatītos kā saraksts, jums jābūt uzmanīgiem. Semantiskais HTML ir karalisJa saturs loģiski ir saraksts, izmantojiet <ol> un <li>CSS izmantošana saraksta atdarināšanai ir lieliska vizuālā dekorācija vai pievienojot numerāciju virsrakstiem, taču tam nevajadzētu aizstāt pamatstruktūru, uz kuru ekrāna lasītāji paļaujas, lai efektīvi pārvietotos lapā.
Izmantojot counter-reset, counter-increment un counter() funkcijas jaudu , jūs varat atteikties no statiskās numerācijas un pieņemt dinamisku sistēmu, kas visu matemātiku apstrādā jūsu vietā. Neatkarīgi no tā, vai veidojat sarežģītu tehnisko rokasgrāmatu ar ligzdotām sadaļām vai vienkārši pievienojat nedaudz slīpējuma emuāra koda fragmentiem, šie rīki nodrošina stabilu un efektīvu veidu, kā apstrādāt secību tieši jūsu stila lapās.
