CSS Minifier és formázó online — Ingyenes, feltöltés nélkül

Illeszd be a CSS-t alább a tömörítéséhez — eltávolítva a megjegyzéseket, a szóközöket és a felesleges szabályokat —, vagy formázd olvasható, behúzott stíluslappá. Mindkét irány valódi CSS elemzőt használ, így az egyedi tulajdonságok (--var), media query-k és szelektorlisták helyesen kezelődnek, nem naiv szöveges trükkökkel csonkulnak el.

Mi ez az eszköz?

A CSS minifier úgy írja át a stíluslapot, hogy a lehető legkisebb legyen anélkül, hogy megváltoztatná, hogyan jelenik meg: eltávolítja a megjegyzéseket és a szóközöket, biztonságosan lerövidíti a színértékeket és a nulla mértékegységeket, összevonja a duplikált szabályokat, és eltávolítja a felesleges pontosvesszőket.

Ez az eszköz a clean-css-re épül, egy CSS optimalizálóra, amely valóban egy AST-be elemzi a stíluslapot, nem reguláris kifejezéseket használ, ezért biztonságosan tudja kezelni azokat a szélsőséges eseteket, amelyek a naiv minifierek alatt eltörnek — a CSS egyedi tulajdonságok (--main-color: ...), a stringek belsejében lévő tartalom, valamint a komplex szelektorok és media query-k is helyesen jönnek ki.

Miért érdemes használni?

AST-alapú tömörítés (clean-css), nem reguláris kifejezés — biztonságos egyedi tulajdonságokkal, stringekkel és beágyazott media query-kkel.
A 2. szintű optimalizálások összevonják és egyszerűsítik a szabályokat extra megtakarításért a sima szóköz-eltávolításon túl.
Pontosan lásd, hány bájtot és hány százalékot spóroltál.
A Formázás mód egy tömörített stíluslapot visszaalakít olvasható CSS-sé, konzisztens behúzással.
100%-ban helyi feldolgozás — a saját fejlesztésű vagy még ki nem adott stílusok sosem hagyják el a böngésződet.

Használati útmutató

Illeszd be a CSS-edet a beviteli mezőbe, vagy kattints a "Példa betöltése" gombra, hogy kipróbálj egy mintát egy egyedi tulajdonsággal és egy media query-vel.
Kattints a "Tömörítés" gombra a tömörítéshez, vagy a "Formázás" gombra a 2 szóközös behúzással történő szépítéshez.
Nézd meg a dobozok alatti üzenetet — a tömörítés mód mutatja a méretcsökkenést; az érvénytelen CSS egy egyértelmű hibaüzenetet ad, ahelyett hogy csendben hibás kimenetet állítana elő.
Kattints a "Másolás" gombra az eredmény átvételéhez.

Példa

Bemenet

:root {
  --main-color: #4f46e5;
}

.card {
  color: var(--main-color);
  padding: 16px;
}

@media (max-width: 600px) {
  .card {
    padding: 8px;
  }
}

Kimenet

:root{--main-color:#4f46e5}.card{color:var(--main-color);padding:16px}@media (max-width:600px){.card{padding:8px}}

Az egyedi tulajdonság, a media query és a cascade sorrend mind megmarad — csak a szóközök, megjegyzések és felesleges karakterek kerülnek eltávolításra.

Gyakorlati tippek

Tömörítsd build/üzembe helyezés idején, ne fejlesztés közben — szerkeszd az olvasható forrást, és hagyd, hogy ez az eszköz (vagy a build folyamatod) állítsa elő a kiadott verziót.
Ha azt debuggolod, miért néz ki másképp egy oldal éles környezetben, a tömörített CSS előzetes formázása sokkal olvashatóbbá teszi a forrásoddal való összehasonlítást.
Az egyedi tulajdonságok túlélik a tömörítést, így a dizájn-token alapú stíluslapok (--spacing, --color-* stb. használatával) biztonságosan átfuttathatók ezen az eszközön.
Kombináld a lenti HTML és JS minifierrel, ha a projekted minden fájlt külön tart a kiadás előtt.

Hol illeszkedik ez a valódi munkafolyamatokba

A CSS az egyik legnagyobb hatású dolog, amit tömöríteni érdemes, mivel a stíluslapok alapértelmezetten blokkolják a renderelést — minden lenyesett bájt a stíluslapból egy kis mennyiséget lefaraghat az első kirajzolásból, különösen lassabb kapcsolatokon. Ez kisebb nyereség, mint a képoptimalizálás, de gyakorlatilag ingyenes, ha egyszer be van kötve egy build lépésbe.

A Formázás irány az ellenkező problémára hasznos: egy versenytárs vagy egy legacy éles stíluslap vizsgálatára, amelyet tömörítve adtak ki, hogy megértsd a szerkezetét, mielőtt felülírást vagy újratervezést írnál.

→ HTML Minifier · JS Minifikáló

Gyakori felhasználási esetek

Egy stíluslap zsugorítása egy statikus oldal vagy landing page üzembe helyezése előtt.
Egy élő oldalról letöltött tömörített CSS fájl újraformázása a szerkezetének tanulmányozásához.
Egy tervezőeszközből exportált CSS tisztítása, amely gyakran túlzott mennyiségű megjegyzést és szóközt tartalmaz.
Egy kézzel írt CSS részlet gyors ellenőrzése, hogy helyesen elemezhető-e, mivel a hibás CSS explicit hibaként jelenik meg.

Gyakori kérdések

Feltöltésre kerül valahova a CSS-em?

Nem. A tömörítés és a formázás is helyben, a böngésződben történik JavaScripttel. Semmi, amit beillesztesz, nem kerül elküldésre egy szerverre.

Megváltoztatja a tömörítés, hogyan néz ki az oldalam?

Nem szabadna. Az eszköz a clean-css-t használja, amely megfelelően elemzi a CSS-t, és csak olyan átalakításokat alkalmaz, amelyek megőrzik az eredeti jelentést — nem törli azokat a szabályokat, amelyeket nem ért, és nem találgat gyártófüggő szintaxist illetően. Mint minden minifiernél, jó gyakorlat szúrópróbaszerűen ellenőrizni az oldalt a tömörített kimenet üzembe helyezése után.

Támogatja a CSS egyedi tulajdonságokat (változókat)?

Igen. A --custom-property deklarációk és a var() hivatkozások helyesen elemzendők és megőrződnek, ellentétben néhány regex-alapú minifierrel, amelyek megrongálhatják őket.

Mennyivel lesz jellemzően kisebb a CSS?

A kézzel írt, megjegyzésekkel és bőséges szóközökkel teli CSS gyakran 40-60%-kal zsugorodik. A már build eszközzel vagy keretrendszerrel generált CSS kevesebbet spórol, mivel általában már eleve elég kompakt.

Visszaalakíthatom a tömörített CSS-t olvasható formátumra?

Igen — illeszd be a tömörített CSS-t, és kattints a "Tömörítés" helyett a "Formázás" gombra, hogy megfelelően behúzott, olvasható stíluslapot kapj.

CSS Minifier és formázó