Accentsconagua

Sfat rapid folosirea contoarelor CSS pentru elementele elementare incrementale

Web design
Share

Aflați CSS: Ghidul complet

Am creat un ghid complet care să vă ajute să învățați CSS, indiferent dacă începeți doar cu elementele de bază sau doriți să explorați CSS mai avansat.

În acest sfat rapid, vom acoperi principalele elemente ale contoarelor CSS; o caracteristică CSS utilă, dar nu foarte cunoscută. Când terminăm construirea demo-ului nostru, vom examina câteva exemple din lumea reală a site-urilor care profită de contoarele CSS.

Scopul: modelarea unei liste ordonate

Ca un prim pas, să ne uităm la aspectul pe care îl vom construi:

Nimic fantezist, nu? Iată provocarea: vom folosi marcajul semantic, evitând tentatia de a folosi inutil div și deschidere elemente pentru a construi acești marcatori.

Să discutăm despre o soluție curată și flexibilă!

Contoare CSS

Tot ce este nevoie pentru a genera aspectul menționat mai sus este de a defini o listă ordonată. În acest moment, s-ar putea să vă întrebați dacă am fi putut folosi un alt element sau chiar o listă neordonată. Răspunsul scurt este "da", dar rețineți că o listă ordonată este singurul element care descrie cu exactitate structura paginii noastre. 

Apoi, probabil, veți întreba dacă este posibil să personalizați pe deplin aspectul numerelor de listă ordonate, construind astfel aspectul dorit. Modelarea numerelor de ordine listate ar fi cu adevărat dificilă. Din fericire, însă, există o abordare alternativă încrucișată în browser, așa că hai să mergem ascunde numerele implicite ale listei și să profite de contoarele CSS.

Sintaxă

Contoarele CSS ne permit să generăm numere pe baza elementelor repetate și să le stilizăm în consecință. Gândiți-vă la contoarele CSS ca variabile ale căror valori pot fi incrementate. Să ne uităm la sintaxa de bază:

Creați un nou contor

Aici vom crea un nou contor pe o listă ordonată și vom defini domeniul său de aplicare. Noi folosim counter-reset proprietate.

  1. Prima valoare este numele contorului
  2. urmat de un parametru opțional care definește valoarea de pornire a contorului (implicit: 0). Rețineți că contorul va începe întotdeauna să numere în sus, deci primul generate valoare în cazul nostru va fi 1.
Modelarea elementului copil

În cea de-a doua diagramă putem vedea că stilizăm ::inainte de pseudo-element al Li pe lista noastră.

  1. Aici am adăugat valoarea contorului la conţinut a noastră ::inainte de. Merită menționat faptul că, prin utilizarea contoarelor CSS cu proprietatea conținutului, putem concatena (adera) numerele generate cu șiruri de caractere.
  2. Ne referim la numele contorului nostru
  3. și defini stilul contorului ca fiind "zecimal". Valorile posibile aici sunt similare cu cele utilizate pentru list-style-type proprietate.
  4. În contra-increment ne referim din nou la numele contorului nostru
  5. apoi folosiți un parametru opțional pentru a indica numărul de incrementări ale contorului. Valoarea implicită aici este 1.

Marcaj

Pe baza a ceea ce am discutat, aici este marcajul nostru:

     
  1.  
    Listează articolul
     
    Un text aici.
     
    2.  
  2.  
    Listează articolul
     
    Un text aici.
     
    3.  <-- more list items here -->

Și CSS asociat:

ol contra-reset: secțiune;  li list-style-type: none; font-size: 1.5rem; padding: 30px; margin-bottom: 15px; fundal: # 0e0fee; culoare: #fff;  li :: înainte de content: counter (section); contra-incrementare: secțiune; afișare: inline-block; poziția: absolută; stânga: -75px; top: 50%; transformare: traducere (-50%); padding: 12px; font-size: 2rem; lățime: 25px; înălțime: 25px; text-align: centru; culoare: # 000; raza de graniță: 50%; frontieră: 3px solid # 000;

Acest lucru ne dă rezultatul după cum se arată mai jos:

limitări

În acest moment, este important să rețineți că pseudoelementele nu sunt 100% accesibile. Pentru a testa acest lucru am făcut un test rapid. Am instalat NVDA și am folosit Chrome 50, Firefox 45 și Internet Explorer 11 pentru a previzualiza pagina demo. 

Am constatat că, atunci când a fost folosit Internet Explorer, cititorul de ecran nu a anunțat conținutul generat. În zilele noastre majoritate din cititorii de ecran recunosc conținutul generat de acest tip, totuși ar trebui să fii conștient de posibilele limitări și deci să hotărâți ce conținut este suficient de sigur pentru a genera folosind pseudo-elementele.

Contoare CSS în sălbăticie

Acum, când cunoaștem elementele de bază ale contoarelor CSS, suntem pregătiți să prezentăm câteva exemple care demonstrează cazurile potențiale de utilizare a acestora. 

În primul rând, contoarele CSS sunt frecvent utilizate în ziarele online. De cele mai multe ori, le veți găsi în barele laterale: 

Wall Street JournalHandelsblatt

Contoarele CSS pot fi, de asemenea, utilizate în secțiuni care descriu pașii sau oferă instrucțiuni. Iată doar un astfel de exemplu:

SpikeNode  

Exemple de cod HTML îmbogățit

În secțiunea anterioară, am văzut două ziare online care profită de contoarele CSS. Acum, să vedem încă două ziare care utilizează marcări umflate (deși cu conținut accesibil) în loc de contoare CSS:

Washington Postpaznic  

Concluzie

În acest sfat rapid, am învățat cum putem folosi contoarele CSS pentru elementele de listă ordonate. Să rezumăm pe scurt ceea ce am acoperit:

  • Contoarele CSS reprezintă o soluție excelentă pentru fiecare proiect care necesită ordonarea dinamică cu stiluri personalizate. Pe de altă parte, aceasta nu este o soluție pe deplin accesibilă, astfel încât să fie conștienți de limitările sale și să le folosească în mod corespunzător.
  • Pentru a configura contoarele, trebuie să specificăm două proprietăți (adică. counter-reset,contra-increment) și o funcție (tejghea() sau contoare ()).
  • Elementele pseudo-elemente sunt responsabile de afișarea contoarelor. Amintiți-vă că se întâmplă prin conţinut proprietate, care este disponibilă numai pseudo-elementelor.

Ați folosit vreodată contoare CSS în proiectele dvs.? Dacă da, asigurați-vă că ne-ați împărtășit munca!

Web design
×