CSS Változók és Teljesítmény

A CSS változók működése és a Sötét Mód (Dark Mode) váltás vizuális bemutatása

Ahogy a weboldalad növekszik, a CSS fájlod is egyre hatalmasabb lesz. Ha egy 3000 soros CSS fájlban 50 különböző helyen használtad a céged fő kék színét (#2563eb), és a főnököd kitalálja, hogy mától zöld a logó, órákig fogsz keresgélni és cserélgetni. Erre a problémára nyújtanak elegáns megoldást a CSS Változók (Custom Properties).

Mik azok a CSS Változók?

A változók lehetővé teszik, hogy egy értéket (például egy színt, egy betűméretet vagy egy margó távolságot) elments egy név alá, és később bárhol a kódban csak erre a névre hivatkozz. Ha megváltoztatod az értéket a változóban, az az egész weboldalon azonnal frissül.

A :root szelektor és a var() függvény

A változókat általában a :root pszeudo-osztályban definiáljuk. A :root a HTML dokumentum legfelső szintjét jelenti (gyakorlatilag a <html> taget), így az itt megadott változók globálisak lesznek, azaz bárhol elérhetők.

A változók neve mindig két kötőjellel (--) kezdődik.

/* 1. Változók definiálása a gyökérben */
:root {
    --fo-szin: #0f766e;
    --szoveg-szin: #1e293b;
    --hatter-szin: #ffffff;
    --alap-padding: 20px;
}

/* 2. Változók használata a var() függvénnyel */
body {
    background-color: var(--hatter-szin);
    color: var(--szoveg-szin);
}

.gomb {
    background-color: var(--fo-szin);
    padding: var(--alap-padding);
}

A Sötét Mód (Dark Mode) titka

A CSS változók igazi szuperképessége a dinamikus témaváltás. Ha a felhasználó operációs rendszere sötét módra van állítva, egyetlen Media Query segítségével felülírhatjuk a változóinkat, és az egész weboldal azonnal sötétbe borul, anélkül, hogy újra kéne írnunk a gombok vagy a bekezdések CSS-ét.

/* Ha a felhasználó rendszere Sötét Módra van állítva */
@media (prefers-color-scheme: dark) {
    :root {
        --hatter-szin: #0f172a; /* Sötétkék/Fekete háttér */
        --szoveg-szin: #f8fafc; /* Világos szöveg */
        /* A --fo-szin maradhat ugyanaz! */
    }
}

CSS Teljesítmény és SEO (Minifikálás)

A Google a betöltési sebességet (Core Web Vitals) kőkeményen méri. A CSS fájlod mérete kritikus tényező. Minél nagyobb a fájl, annál tovább tart a böngészőnek letölteni és értelmezni (ezt hívják Render-Blocking erőforrásnak).

Hogyan optimalizáld a CSS-t?

Ne ismételd önmagad (DRY - Don't Repeat Yourself): Használj CSS változókat és közös osztályokat (utility classes). Ha 10 gombod van, ne írd le 10-szer a paddinget, csinálj egy .btn osztályt.
Minifikálás (Minification): Amikor a weboldalad élesbe megy, a CSS fájlból el kell távolítani minden felesleges szóközt, entert és kommentet. Egy 100 KB-os CSS fájl minifikálva gyakran csak 20 KB lesz. Erre rengeteg ingyenes online eszköz létezik (pl. CSS Minifier).
Kritikus CSS (Critical CSS): A legprofibb fejlesztők a weboldal legfelső, azonnal látható részének (Above the Fold) CSS kódját kiveszik a külső fájlból, és közvetlenül a HTML <head> szekciójába teszik (Inline). Így a böngésző azonnal meg tudja jeleníteni a főoldalt, anélkül, hogy várnia kéne a külső style.css letöltésére.

← Előző lecke Vissza a Főoldalra →