Variabile CSS

Utilizarea variabilelor CSS (custom properties).

by Sabin Buraga

HTML

<h1>Variabile (propriet&#259;&#355;i definite de utilizator) CSS</h1>

<p>Actualmente, pot fi folosite variabile &icirc;n cadrul foilor de stiluri CSS.</p>

<p>Pentru detalii, de studiat articolele <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables" title="Detalii">Using CSS custom properties (variables)</a> (MDN) &#351;i <a href="https://css-tricks.com/making-custom-properties-css-variables-dynamic/" title="Detalii">Making Custom Properties (CSS Variables) More Dynamic</a> (CSS Tricks).</p>

<p>A se urm&#259;ri <a href="https://caniuse.com/#feat=css-variables" title="Spre situl 'Can I use...'">suportul oferit de navigatoarele Web</a>.</p>

CSS

body {
  /* definim 2 proprietati proprii (variabile) */
  --marime: 20pt;
  --latime: 70%;
  font-family: monospace;
}
h1 {
  /* functia var() ofera acces la valorile unei variabile;
     se poate furniza o valoare implicita (al doilea parametru) 
     daca variabila n-a fost definita */
  font-size: var(--marime, 16pt);
  width: var(--latime);
}
p {
  /* functia calc() faciliteaza efectuarea de operatii elementare */
  font-size: calc(0.5 * var(--marime));
  width: var(--latime);
}