Proprietatea conținutului
Utilizând CSS în pagină, puteți adăuga elemente care nu există în aspectul paginii. Acest lucru se face folosind: înainte și după pseudoelemente. dar proprietatea conținutului joacă un rol la fel de important în acest sens.
Acesta determină conținutul pseudo-elementelor. Și chiar mai mult, pseudoelementele nu vor fi afișate dacă nu au proprietatea conținutului. Destul de această linie:
Snowmen în exemplul adăugat cu conținutul pentru pseudo - ei înșiși snowmen de caractere Unicode:
Valorile posibile ale proprietăților sunt:
normale. nici unul - conținutul pseudo-elementului nu este afișat. Este util dacă doriți să ascundeți un pseudo-element specificat anterior.
Cu toate acestea, aici există o problemă a cererilor inutile către server.
- sprite, pictogramele din care sunt inserate de fundal în link-ul însuși sau în pseudo-element. Al doilea este de preferat, deoarece atunci pseudo-elementul va limita sfera de aplicare a sprite-ului, astfel icoanele din sprite pot fi localizate nu numai pe verticală, ci și pe rânduri.
Numărul de solicitări adresate serverului este redus la unul, dar imaginea este stocată în cache de utilizator; - codarea imaginilor individuale în baza-64 și lipirea prin conținut: url ();
- codifică întregul sprite în baza-64 și îl folosește ca fundal al pseudo-elementului.
În ultimele două versiuni nu vor mai exista cereri către server, dar imaginile nu sunt stocate în cache și, în plus, imaginea codată poate cântări mai mult decât imaginea originală. Metoda are sens doar pentru imaginile mici.
Puteți codifica imaginea în baza64 folosind servicii online, de exemplu, websemantics.co.uk/online_tools/image_to_data_uri_convertor/. Codul rezultat este inserat în url () cu informații despre formatul conținutului, de exemplu date: image / png; base64.
Acesta este modul în care va arăta codul pentru pictograma Instagram:
În mod similar, puteți introduce SVG.
Acest lucru este foarte convenabil, dar până acum nu funcționează în toate browserele. De exemplu, Chrome va înțelege și îl va afișa, dar Firefox nu o face.
counter-reset specifică numele contorului. contra-incrementare crește valoarea contorului specificat. conþinut: contor (numãr de numãr) afiºeazã valoarea contorului ca fiind conținutul pseudo-elementului.
attr (
deschide-ofertă. cotă-închidere - valorile pentru afișarea cotelor de deschidere și închidere. Simbolurile care trebuie folosite sunt determinate de proprietatea citatelor. Dacă nu este setat, se vor utiliza valorile implicite care depind de browser.
nu-deschis-ofertă. nu-close-citat - valoare dezactivează afișarea citate, dar rămâne la nivelul de imbricare.
În caietul de sarcini există încă multe lucruri interesante, cum ar fi un pseudo-element care reprezintă un înveliș pentru întregul element sau mai multe pseudo-elemente, dar în prezent acesta nu este implementat nicăieri.