Utilia
Kategóriák ▾
Nyelv: hu ▾

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

Szépítsd a kusza CSS-t tiszta behúzással, vagy tömörítsd csso-val, és nézd meg a méretet előtte és utána. A böngésződben fut, semmit nem töltünk fel.

Hogyan formázd vagy tömörítsd a CSS-t

  1. Illeszd be a stíluslapot, vagy kattints a Fájl megnyitása gombra egy .css fájl betöltéséhez (legfeljebb 10 MB).
  2. Válaszd ki a Behúzás módját (2 szóköz, 4 szóköz vagy tabulátor), és azt, hogy szeretnél-e Üres sor a szabályok között opciót.
  3. Kattints a Formázás (szépítés) gombra az olvasható kódért, vagy a Tömörítés gombra a legkisebb változatért.
  4. Tömörítéshez hagyd bejelölve a Szabályok összevonása tömörítéskor opciót a legjobb eredményért, és a /*! megjegyzések */ megtartása opciót a licencfejlécek megőrzéséhez.
  5. Másold ki vagy töltsd le az eredményt. Az állapotsor bájtban mutatja a méretet előtte és utána, valamint a megtakarítás százalékát.

Ha hiányzik egy kapcsos zárójel, az eszköz megáll, és megmondja, hogy melyik sorban van a lezáratlan { vagy a felesleges }, ahelyett hogy hibás kimenetet adna.

Szépítés: olvasható, egységes CSS

A Formázás (szépítés) a js-beautify könyvtárat használja, amely sok kódszerkesztőben megtalálható. Minden deklarációt külön sorba tesz, behúzza az egyes szabályok és az olyan @-szabályok tartalmát, mint a @media és a @supports, a csoport minden szelektorát külön sorba írja, és szóközt tesz minden deklaráció kettőspontja után. A meglévő üres sorokat megtartja (egymás után legfeljebb egyet), így a fájl logikai szakaszai láthatók maradnak. A formázó soha nem változtatja meg az értékeket, a szabályok sorrendjét vagy a szelektorok jelentését: csak a szóközöket módosítja.

Ez hasznos egy weboldal tömörített CSS-ének elolvasásához, egy eszköz által generált stíluslap átnézéséhez, vagy egy olyan fájl rendbetételéhez, amelyet többen, különböző szokások szerint szerkesztettek.

Tömörítés: kisebb CSS a csso-val

A Tömörítés a csso (CSS Optimizer) strukturális tömörítőt használja. A szóközök és megjegyzések eltávolításán túl a stíluslapot egyenértékű, rövidebb alakra írja át:

  • a színek rövidülnek (a #ff0000 red lesz, a #ffffff #fff);
  • az egységek és a nullák egyszerűsödnek (a 0px 0 lesz, a 0.5em .5em);
  • az ismétlődő deklarációk eltűnnek, a rövidített tulajdonságok pedig összevonódnak, ha ez biztonságos;
  • a Szabályok összevonása tömörítéskor opcióval az azonos deklarációkat tartalmazó szabályok csoportosulnak (az a{color:red} b{color:red} a,b{color:red} lesz), a felülírt deklarációk pedig kimaradnak.

Az átstrukturálás normál stíluslapoknál biztonságos, de áthelyezi a deklarációkat. Ha a CSS-ed nagyon konkrét kaszkádsorrendre épít, például böngészőhackekre, vedd ki a jelölést: a csso ilyenkor csak helyben tömöríti az egyes szabályokat.

A megjegyzések törlődnek, kivéve a /*! kezdetű „fontos” megjegyzéseket, amelyeket gyakran licencekhez használnak. A /*! megjegyzések */ megtartása jelölés kivételével ezek is eltávolíthatók.

Méret előtte és utána

Az állapotsor a bemenet és az eredmény méretét hasonlítja össze UTF-8 bájtokban. A megszépített kód általában nagyobb az eredetinél; a tömörített kód kézzel írt CSS-nél jellemzően 20–50%-ot takarít meg. Ne feledd, hogy a szerverek gzip-pel vagy Brotlival is tömörítik a fájlokat, így az átvitelnél a megtakarítás kisebb a nyers számnál, a tömörítés viszont továbbra is csökkenti az elemzési időt és a gyorsítótárazott fájlok méretét.

Gyakori kérdések

Elküldésre kerül a CSS-em egy szervernek?

Nem. Mindkét könyvtár a böngésződben fut. A stíluslapod soha nem hagyja el a számítógépedet, ami azt is jelenti, hogy az eszköz az oldal betöltése után offline is működik.

Formázhatok SCSS-t vagy Less-t?

A formázás az egyszerű SCSS-nél és Less-nél általában működik, mert a szintaxis közel áll a CSS-hez. A tömörítés nem: a csso csak a szabványos CSS-t érti, ezért az előfeldolgozós kódot előbb fordítsd le.

Miért más a tömörített CSS, mint amire számítottam?

A csso átrendezheti vagy összevonhatja a szabályokat, ha a Szabályok összevonása tömörítéskor be van jelölve. Az eredményül kapott CSS ugyanazokat a stílusokat alkalmazza. Ha azt szeretnéd, hogy minden szabály a helyén maradjon, vedd ki a jelölést.

Ellenőrzi az eszköz a CSS-em érvényességét?

Csak részben. Azt vizsgálja, hogy a kapcsos zárójelek és a megjegyzések kiegyensúlyozottak-e, és jelzi a hiba sorát. Az érvénytelen tulajdonságneveket vagy értékeket úgy hagyja, ahogy vannak, mert a böngészők figyelmen kívül hagyják az ismeretlen deklarációkat.

Mi történik a gyártói előtagokkal és az egyéni tulajdonságokkal?

Megmaradnak. A gyártói előtagokat, például a -webkit- előtagot, és az egyéni tulajdonságokat (--main-color) a formázás és a tömörítés is megőrzi.

Kapcsolódó eszközök