Share
Știați că, cu ajutorul CSS, puteți crea un contor? Acest lucru poate fi util în special pentru situațiile în care contorul este strict necesar în scopuri de prezentare. Îți arăt cum să folosești contra-increment în acest sfat rapid util.
Este foarte simplu. Nici măcar nu vorbim despre CSS3 aici; contra-increment proprietatea a fost în jur de ceva timp acum. Numai că mulți dintre noi nu sunt familiarizați cu ea sau nu au găsit o utilizare pentru aceasta.
Începem prin aplicarea contra-increment proprietate. Să ne imaginăm că avem un set de cutii și fiecare casetă ar trebui să afișeze un număr care corespunde ordinului în care se produce caseta este secvența.
.caseta contra-increment: cutii;
contra-incrementproprietatea poate accepta una sau două proprietăți. Primul este unidpe care îl veți folosi ulterior pentru a vă referi la acest contor specific. De asemenea, puteți trece un al doilea parametru care se referă la increment. De exemplu, în loc de 1, 2, 3, 4, ai putea trece la 5, 10, 15, 20 aplicand:contra-increment: cutii 5.
Acest cod va memora acum un număr unic pentru fiecare element care are a clasă de cutie. Dar, desigur, vrem să obținem acest număr pe pagină. Sperăm că, într-un anumit moment al viitorului, vom putea să folosim conţinut proprietate în selectorii standard, dar nu încă. În schimb, vom folosi pseudo elemente pentru a aplica conținutul.
.caseta: după content: counter (boxes);
Acest lucru va aplica un număr unic - din nou, bazat pe ordinea elementului în secvență - la .cutie element. Ar trebui să resetăm această comandă 1 la un moment dat, am putea să o facem counter-reset: cutii proprietate.
Acum, ați putea să vă gândiți: "De ce aș folosi vreodată acest lucru?" Există o mulțime de situații în care ar putea fi la îndemână. De exemplu, luați în considerare o secțiune de comentarii a unui blog. Dacă doriți să oferiți
un număr pentru fiecare comentariu din set - posibil puțin transparent - ați putea folosi această tehnică. Numărul nu este vital pentru marcaj și este utilizat doar pentru prezentare. În aceste cazuri, CSS
contoarele vor face trucul frumos!
Accentsconagua