CSSmuuttujien

CSS-muuttujat, eli CSS custom properties, ovat CSS:n ominaisuuksia, joihin voidaan tallentaa toistuvia arvoja ja käyttää niitä useissa paikoissa. Niiden avulla voidaan jakaa teemoja tai sääntöjä eikä saman arvon kirjoittaminen moneen paikkaan ole tarpeen. Määrittely tapahtuu, kun hyvitetään muuttujaa, esimerkiksi :root tai jonkin elementin kohdalla.

Syntaksi on seuraava: muuttuja määritellään valitsimessa nimellä --nimi ja sille annetaan arvo, esimerkiksi :root { --primary-color: #4a90e2; --padding: 16px; }. Muuttujaa käytetään arvoissa funktiolla var(--nimi). Esimerkki: .btn { background: var(--primary-color); padding: var(--padding); }. Muistuta mahdollisista varmuuskohdista, käyttämällä var(--nimi, varfallback) -muotoa, jolloin fallback-arvo palautuu, jos muuttujaa ei ole määritelty.

Sijainti ja periytyminen: CSS-muuttujat ovat periytyviä, kuten muutkin tyylit, ja ne voivat olla käytettävissä kaikissa lapsielementeissä, joissa niitä ei ole ylikirjoitettu. Suurin osa teemoista määritellään :rootiin, jolloin ne ovat laajasti saatavilla koko dokumentissa, mutta muuttujia voi ylittää mistä tahansa elementistä käsin.

Käyttötavat ja laskenta: muuttujia voidaan käyttää missä tahansa kelvollisessa CSS-arvotyypissä, mukaan lukien calc() -laskelmat. Niillä voi olla arvoja kuten väriä, kokoa, etäisyyksiä ja mittayksiköitä, ja ne voivat viitata toisiin muuttujien arvoihin.

JavaScript-tuki: muuttujien arvoja voi päivittää dynaamisesti DOMin kautta, esimerkiksi document.documentElement.style.setProperty('--primary-color', '#e74c3c'); tämä mahdollistaa nopean teeman tai tilan muuttamisen ilman uudelleen kirjoittamista CSS-tiedostoihin.

Rajoitukset ja yhteensopivuus: CSS-muuttujat ovat laajasti tuettuja kaikkialla modernissa selaimessa. Vanhemmat selainversiot eivät välttämättä tue niitä yhtä täydellisesti, erityisesti IE-selaimet. Ne eivät kuitenkaan muuta CSS:n syntaksia, vaan ovat lisäominaisuus, joka helpottaa ylläpitoa ja teeman hallintaa.