Bar Chart: CSS-variabel
Forrige øvelse
Næste øvelse
Opgavebeskrivelse
Gem værdien fra attr() i en CSS-variabel (fx --percent), og brug variablen til både background og height.
Nulstil øvelsen
<div class="bars-container">
<article class="bars">
<div class="bar" data-percent="100"></div>
<div class="bar" data-percent="70"></div>
<div class="bar" data-percent="60"></div>
<div class="bar" data-percent="50"></div>
<div class="bar" data-percent="40"></div>
<div class="bar" data-percent="30"></div>
<div class="bar" data-percent="20"></div>
<div class="bar" data-percent="10"></div>
</article>
</div>
Vis custom property
Custom property
.bar {
--percent: attr(data-percent %, 0%);
background: color-mix(in hsl, #3980DD var(--percent), #DAE9FC);
height: var(--percent);
}