Stilurile CSS ca depozit de date
Utilizarea variabilelor în CSS nu se limitează doar la configurarea stilurilor. Ele au o destinație mai largă - și anume, stocarea stării. Datorită acestui fapt, putem chiar să definim un fel de bază de date sau depozit de date folosind stiluri CSS și variabile, care poate fi utilizat în anumite scenarii pentru stocarea datelor paginii web.
De exemplu, să definim un fișier de stiluri pe care îl vom numi user.css cu următorul conținut:
.user {
--name: "Tom";
--age: "37";
--email: "tom@gmail.com";
--address: "Strada Ulmilor, nr. 21, ap. 14";
}Aici, pentru clasa user, sunt definite patru variabile care stochează anumite valori. În acest caz, toate valorile sunt șiruri de caractere.
Acum, să definim următoarea pagină HTML, în care se va include fișierul de stiluri definit mai sus:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Exemplu CSS</title>
<link rel="stylesheet" type="text/css" href="user.css"/>
<style>
.user-name:after { content: var(--name); }
.user-age:after { content: var(--age); }
.user-email:after { content: var(--email); }
.user-address:after { content: var(--address); }
</style>
</head>
<body>
<div class="user">
<h2 class="user-name">Utilizator: </h2>
<p class="user-age">Vârsta: </p>
<p class="user-email">Email: </p>
<p class="user-address">Adresă: </p>
</div>
</body>
</html>Pentru afișarea datelor pe pagină, se utilizează elementul <div class="user">, în care sunt definite patru elemente HTML: un titlu h2 și trei paragrafe. Pentru fiecare element este definită o clasă specifică.
Mai sus pe pagină, în elementul <style>, sunt definite stilurile pentru aceste elemente, care utilizează variabilele din fișierul inclus user.css. Toate aceste stiluri sunt similare și stabilesc textul elementului, care este adăugat după conținutul text deja existent. De exemplu:
.user-name:after { content: var(--name); }Pseudo-elementul ::after creează un element pseudo la sfârșitul elementului HTML (în acest caz, la sfârșitul elementului cu clasa user-name). Și acestui pseudo-element îi este setat ca și conținut textul din variabila --name.
Stilurile pentru celelalte elemente sunt identice.
Astfel, ne așteptăm ca valorile stocate în fișierul user.css să fie afișate pe pagina web. Deschidem pagina în browser și vom vedea datele din fișierul CSS inclus:
Stocarea datelor textuale și afișarea lor în blocurile textuale pe pagina web este, desigur, doar un caz particular. Într-un sens mai larg, variabilele CSS permit stocarea unei anumite stări care este aplicată paginii HTML.