CSS formázó és tömörítő

A weboldalak stíluslapjai (CSS) fejlesztés közben olvashatóan, behúzásokkal, megjegyzésekkel készülnek. A böngészőnek azonban ezekre nincs szüksége, viszont minden bájtot le kell töltenie. A CSS-tömörítő (css minifier) eltávolítja mindazt, ami a működéshez nem kell: a megjegyzéseket, a sortöréseket, a felesleges szóközöket a kapcsos zárójelek, kettőspontok, pontosvesszők és vesszők körül, valamint a blokk végén álló felesleges pontosvesszőt.

Az eredmény ugyanúgy működik, de kisebb, így gyorsabban töltődik be az oldal, ami a felhasználóknak és a keresőknek is számít. Az eszköz kiírja az eredeti és a tömörített méretet bájtban, valamint a megtakarítás százalékát.

Az átalakítás gépelés közben történik, és a két mód között egy kattintással válthatsz.

A tömörítés nem változtatja meg a CSS jelentését:

• az idézőjeles szövegeket (például content: " " vagy betűtípusnevek) érintetlenül hagyja,
• a @media lekérdezésekben megtartja a szükséges szóközt (például and (),
• a **/! … / formájú megjegyzéseket – amelyekben a licencfeltételek szoktak állni – alapból megtartja, mert sok licenc előírja, hogy a szerzői jogi megjegyzés a terjesztett fájlban is maradjon. Ha nem kell, kapcsold ki.

A tömörítő nem alakítja át a színkódokat és a mértékegységeket, és nem vonja össze a szabályokat. Ezek a fejlesztői eszközláncok (build) fejlettebb tömörítőinek feladatai, kisebb további megtakarítással.

A fordított művelet a formázás: ha egy weboldalról, egy sablonból vagy egy régebbi projektből tömörített, egysoros CSS-t kaptál, a formázó olvasható szerkezetbe tördeli. Minden szabály új sorba kerül, a deklarációk soronként, behúzással, a kettőspont után szóközzel, a több szelektort tartalmazó szabályoknál pedig minden szelektor külön sorba.

A beágyazott blokkokat (@media, @supports, @layer) is helyesen húzza be. A behúzás 2 vagy 4 szóköz vagy tabulátor lehet. A formázott és a tömörített változat ugyanazt jelenti, csak a kinézetük más.

A formázás hibakeresésnél is segít: ha egy tömörített stíluslapban egy szabályt keresel, a formázott változatban a böngésző keresőjével sokkal könnyebben megtalálod, és az is jobban látszik, melyik @media blokkba tartozik.

Bemenet:

/* fejléc */
.header , .nav > a {
  color : #0b7a55 ;
  margin : 0 auto ;
}

Tömörítve: .header,.nav>a{color:#0b7a55;margin:0 auto}

Formázva a tömörítettből:

.header,
.nav>a {
  color: #0b7a55;
  margin: 0 auto;
}

Figyeld meg, hogy a 0 auto közötti szóköz mindkét esetben megmarad, mert ott jelentése van.

• Kis weboldalaknál, ahol nincs automatikus build-folyamat: a kész stíluslapot tömörítve töltsd fel.
• E-mail-sablonoknál, beágyazott stílusoknál, ahol minden bájt számít.
• Hibakeresésnél: egy élesített oldal tömörített CSS-ét formázva könnyebb átnézni.
• Tanuláshoz: egy jól formázott stíluslapon látszik a szabályok szerkezete.

Ha a weboldalad build-eszközt (például Vite, webpack) használ, ott a tömörítés automatikus; ez az eszköz akkor jön jól, ha gyorsan, telepítés nélkül kell egy fájlt átalakítanod. CSS-fájlt közvetlenül is megnyithatsz, az eredményt pedig letöltheted. Minden a böngésződben történik, a kód nem kerül fel szerverre.

• Inline stílusokhoz: egy style attribútumba vagy egy beágyazott <style> blokkba másolt CSS tömörítve átláthatóbb a HTML-ben.

Megéri tömöríteni, ha a szerver úgyis gzip- vagy Brotli-tömörítéssel küldi a fájlt? Igen, bár a különbség kisebb. A szerveroldali tömörítés az ismétlődő mintákat nyomja össze, a megjegyzéseket és a felesleges szóközöket viszont attól még elküldi; a kettő együtt adja a legkisebb méretet.

Mi számít még a betöltési sebességnél? A nem használt szabályok: egy sablonból vagy keretrendszerből átvett stíluslap gyakran sokkal több szabályt tartalmaz, mint amennyit az oldal használ. A böngésző fejlesztői eszközeinek „Coverage” (lefedettség) nézete megmutatja, mennyi nem használt CSS töltődik le.

Hova tegyem a tömörített fájlt? Általában külön fájlnévvel (például style.min.css) szokás menteni, hogy az olvasható eredeti is megmaradjon a további szerkesztéshez.