Hogyan minifikálhatok CSS-t online telepítés nélkül?

Illessze be a CSS-t a Bemeneti CSS mezőbe, vagy húzzon be egy .css fájlt, majd kattintson a CSS minifikálása gombra. A megjegyzések és a felesleges szóközök eltűnnek, az eredményt Másolhatja vagy Letöltheti styles.min.css néven.

Megőrzi a CSS-minifikáló a licenc-megjegyzéseket és a data URI-kat?

Igen. A szokásos megjegyzések törlődnek, de a /*! license */ megjegyzések megmaradnak. Az idézőjeles karakterláncokat, az url() értékeket és a data URI-kat külön tokenizálja, így a szóközszabályok nem módosítják őket.

Hogyan alakíthatom a minifikált CSS-t vissza olvasható kóddá?

Kattintson a CSS formázása gombra a CSS minifikálása helyett. A kód szintenként két szóközzel újra behúzódik, és a szelektorok kettőspontjait, például a:hover, megkülönbözteti a tulajdonságok kettőspontjaitól. A Letöltés styles.css néven menti.

Mit jelent a csökkenés melletti gzip-es szám?

Ez a kimenet méretének becslése gzip-tömörítés után, a böngésző CompressionStream API-jával mérve. Ha a böngészőjéből hiányzik ez az API, a gzip-méret nem jelenik meg.

Elküldődik a CSS-em szerverre, amikor minifikálom?

Nem. A minifikálást egy JavaScript-tokenizáló végzi a böngészőjében, külső könyvtár nélkül. Semmi nem töltődik fel, így privát stíluslapokhoz is használhatja.

Igen. Minden eszköz ingyenesen használható, fiók és bankkártya nélkül. A munka a szervereink helyett a te eszközödön fut, ezért maradhat ingyenes a használata.

Igen. Az iOS és Android jelenlegi mobilböngészőiben fut, telepítés nélkül.

🗜️

Ingyenes CSS minifier és formázó

Minifikálj CSS-t a fájlméret csökkentéséhez, vagy formázz minifikált CSS-t az olvashatóság érdekében. Azonnal, a böngésződben.

A böngésződben futNincs regisztráció, nincs felugró ablakNem szükséges bejelentkezésÖrökre ingyenes

Betöltés után offline is működik

vagy húzz ide egy .css fájlt alább

Húzz ide egy .css fájlt, vagy kattints a tallózáshoz

CSS · az eszközödön dolgozza fel

vagy nyomjon Ctrl+V-t a vágólapról való beillesztéshez

Fájlok tallózása

CSS bemenet

CSS kimenet

A kimenet itt jelenik meg…

Gyakori felhasználások

CSS minimalizálása termelési telepítéshezCsökkentse a CSS fájl méretét az éles telepítés előtt — gyorsabb oldalbetöltés és alacsonyabb sávszélességi költségek.
Szépítse meg a minimalizált CSS-t a hibakereséshezFormázza a tömörített vagy minimalizált CSS-t olvasható kóddá, hogy megvizsgálhassa és hibakereséseket végezhet a stílusok.
CSS minimalizálása e-mail sablonokhozTömörítse a CSS-t HTML e-mail sablonokhoz, ahol a fájl mérete és a beépített stílus túlcsordulásveszélye számít.
CSS minimalizálása WordPress témákhozCsökkentse az egyéni WordPress téma stíluslapok méretét jobb PageSpeed pontszámokért.
Szépítse meg a CSS-t a kódáttekintéshezFormázzon bármilyen CSS-fájlt tiszta, behúzott, olvasható kóddá az áttekintésre és az együttműködésre kész.

Hogyan működik

Ez az eszköz egy kézzel írt, nulla-függőségű CSS tokenizálót használ, amely teljes egészében JavaScriptben van megírva — nincs külső könyvtár, nincs szerverhívás. A tokenizáló minden karaktert kód, megjegyzés, idézett karakterlánc vagy url() érték szerint osztályoz, mielőtt bármilyen transzformációt alkalmazna, ami megakadályozza, hogy a bjeline-szabályok elrontsák a karakterlánc-tartalmakat, data URI-kat vagy calc() kifejezéseket.

1
Tokenizálási átfutás
A bemeneti CSS karakterenként kerül szkennelésre, és típusos tokenekre bontásra: nyers kódszegmensekre, /* ... */ megjegyzésekre, idézett karakterláncokra (megőrizve az escape szekvenciákat) és url(...) blokkokra. Ez biztosítja, hogy a következő lépés transzformációi csak a tényleges CSS szintaxist érintik — soha nem egy karakterlánc-literál vagy data URI tartalmát.
2
Minifikáció vagy szépítés
Minify módban a szabályos megjegyzések eldobásra kerülnek (a /*! license */ megjegyzések megmaradnak), a kódtokenekben lévő bjeline-futamok egyetlen szóközre sűrűsödnek, és az interpunkció melletti bjeline-k a { } : ; , > ~ körül eltávolításra kerülnek. A + és - körüli szóközök szándékosan érintetlenek maradnak, hogy elkerüljék a calc() kifejezések tönkretételét. Szépítés módban a kód először egy tiszta alaphoz minifikálódik, majd újra tokenizálásra és behúzásra kerül kétszóközös mélységkövetéssel és deklaráció-kettőspont felismeréssel, hogy megkülönböztesse a property: value kettőspontokat a szelektor kettőspontoktól, mint az a:hover.
3
Gzip méretbecslés
A kimenet előállítása után a böngésző natív CompressionStream API-ja kerül felhasználásra az eredmény gzip-pel való tömörítésére és a kapott bájtszám mérésére. Ez egy realisztikus átvitel-méretbecslést ad, amely megegyezik azzal, amit egy gzip tömörítéssel rendelkező webszerver küldene a hálózaton.
4
Másolás vagy letöltés
A feldolgozott CSS a vágólapra kerül a Clipboard API-n keresztül, vagy letölthető styles.min.css (minify mód) vagy styles.css (szépítés mód) néven egy text/css MIME-típusú Blob használatával. A méretcsökkentés százaléka élőben jelenik meg gépelés közben.

Kapcsolódó eszközök

✨

SVG optimalizáló és minifier

Távolítsd el a metaadatokat, tömörítsd a szóközöket, és kerekítsd a tizedes számokat az SVG fájlméret drámai csökkentéséhez — jellemzően 30–70%-os csökkentés. A vizuális előnézet ellenőrzi, hogy semmi sem törik.

Próbálja kiA fájlok helyi maradnak

🎨

CSS-szépítő

Formázza a minifikált CSS-t egységes behúzással, vagy minifikálja. Opcionális betűrendes tulajdonságrendezés az áttekinthető különbségekért.

Próbálja ki

📋

JSON formázó

JSON adatok formázása, ellenőrzése, tömörítése és böngészése. Fa nézet, szintaxis kiemelés és egykattintásos másolás.