CSS minifier

Illessz be egy stíluslapot a szóközök és kommentek eltávolításához, az olyan értékek rövidítéséhez, mint a #ff0000 → red, és a duplikált szabályok összevonásához a CSSO strukturális optimalizálásaival.

A böngésződben futNincs regisztrációNincs feltöltés

Minifikált kimenet

Hogyan használd: CSS minifier

  1. Illessz be CSS-t, vagy nyiss meg egy .css fájlt.
  2. Hagyd bekapcsolva az Átstrukturálás opciót a szabályok és deklarációk összevonásához, vagy kapcsold ki egy biztonságos, csak szóközöket érintő menethez.
  3. Hagyd bekapcsolva a licenckommentek megtartása opciót a /*! … */ megjegyzések megőrzéséhez.
  4. Hasonlítsd össze az eredeti, a minifikált és a gzippelt méretet.
  5. Másold ki az eredményt, vagy töltsd le az output.min.css fájlt.

Hogyan működik a CSS minifikálás?

Ez az eszköz a CSSO (CSS Optimizer) könyvtárat használja, amely szintaxisfává alakítja a stíluslapot, majd a lehető legrövidebb egyenértékű formában írja ki újra. A szóközök és kommentek eltávolításán túl biztonságos értékátírásokat is végez:

  • #ffffff → #fff, #ff0000 → red
  • 0px → 0, 0.90 → .9
  • margin: 8px 16px 8px 16px → margin:8px 16px
  • Az üres szabályok és a duplikált deklarációk kikerülnek

Mit csinál az „átstrukturálás”?

Az átstrukturálás a teljes stíluslapot vizsgálja: az azonos deklarációjú szabályokat egyetlen szelektorlistába vonja össze (.a,.b{color:red}), az ismétlődő szelektorokat pedig egyesíti. Valódi stíluslapokon ez gyakran további 5–15% megtakarítást jelent. A CSSO csak akkor von össze, ha a kaszkádsorrend változatlan marad, de ha szokatlan felülírásokra támaszkodsz, kikapcsolhatod a tisztán szintaktikai minifikáláshoz.

Miért érdemes minifikálni a CSS-t?

A CSS blokkolja a renderelést: a böngésző addig nem tudja kirajzolni az oldalt, amíg a <head> részben lévő stíluslapok le nem töltődnek és fel nem dolgozódnak. A kisebb CSS gyorsabb First Contentful Paintet és jobb Core Web Vitals értékeket jelent, ami a felhasználóknak és a keresési helyezésnek is jót tesz. A legjobb eredményért kombináld a minifikálást a szerveroldali gzip vagy Brotli tömörítéssel.

Gyakran ismételt kérdések

Biztonságos a CSS minifikálása?
Igen. A szóközök és kommentek nem befolyásolják a CSS megjelenítését, a CSSO értékátírásai pedig a specifikáció szerint egyenértékűek. Az átstrukturálás megtartja a kaszkádsorrendet; kapcsold ki, ha a legóvatosabb kimenetet szeretnéd.
Támogatja a modern CSS-t, például a custom propertyket, a nestinget és a @layert?
Igen. A custom propertyk (--var), a @media, a @supports, a @layer, a @container és a grid szintaxis megmarad.
Visszaalakíthatom később a minifikált CSS-t?
A minifikált CSS-t bármely formázó újra be tudja húzni, de az eltávolított kommentek nem állíthatók vissza. Őrizd meg az eredeti forrásfájlt, és a minifikált fájlt kezeld build-kimenetként.
Feltöltődik valahova a stíluslapom?
Nem. A minifikálás a böngésződben fut; semmi sem kerül szerverre.

Kapcsolódó eszközök

JavaScript minifier JS tömörítése és mangle Terserrel, méret- és gzip-statisztikával. HTML minifier Kommentek és szóközök törlése, inline CSS/JS minifikálása. SQL formázó SQL formázása vagy minifikálása PostgreSQL, MySQL, T-SQL, BigQuery stb. számára. JSON formázó JSON formázás, minifikálás és validálás sor/oszlop pontos hibákkal.