Kicsinyítés és formázás
A Kicsinyítés eltávolítja a felesleges formázást és optimalizálja a CSS-t. A Formázás behúzásokat és sortöréseket ad hozzá, hogy a tömör kód olvasható legyen.
CSS kicsinyítése és formázása
Csökkentsd a CSS méretét, vagy formázd olvashatóra. Hasonlítsd össze az eredményt az eredeti stíluslappal.
Feldolgozási mód
További műveletek
Kapcsolódó eszközök
Statisztikáid
0
Feldolgozva
0
Megtakarított bájtok
0%
Átlagos méretcsökkenés
Még nem használt
Leggyakoribb mód
0
Másolva
100%
Aktivitási pontszám
CSS kicsinyítése és formázása
A videó nem tölthető be. Az alábbi útmutatót továbbra is követheted.
A videó az angol felületet mutatja.
A Kicsinyítés tömör CSS-t készít, a Formázás olvashatóvá teszi a kódot. A Formázás nem állítja vissza a korábban törölt megjegyzéseket. Az eredeti stíluslap lecserélése előtt tarts meg róla egy másolatot.
CSS kicsinyítése és formázása beállítható módon
Szerkezeti optimalizálás
A CSSO rövidítheti az értékeket, eltávolíthatja az üres szabályokat és összevonhatja az ismétlődő szerkezeteket. A méretcsökkenés a stíluslaptól és a szabályok átrendezésének engedélyezésétől függ.
CSS-fájl megnyitása
A Importálás gombbal tölts be egy .css-fájlt, vagy húzd a beviteli mezőre. A kiválasztott mód a fájl tartalmát dolgozza fel.
További 3 megjelenítéseKevesebb megjelenítése
Szintaktikai figyelmeztetések
A Kicsinyítés megjeleníti az elemző által észlelt hibák sorát és oszlopát. Az elkészült CSS használata előtt nézd át ezeket a jelzéseket.
Megjegyzések és szabályszerkezet
Tartsd meg a /*! kezdetű megjegyzéseket, ha licencadatokat vagy fontos tudnivalókat tartalmaznak. Kapcsold ki az átrendezést, ha nem szeretnéd összevonni a szabályokat vagy módosítani a sorrendjüket.
Automatikus feldolgozás
Bekapcsolt Automatikus feldolgozás mellett a módosítások frissítik az eredményt. Ahol ez a beállítás látható, kikapcsolhatod, és használhatod helyette a Kicsinyítés vagy Formázás gombot. Telefonon ezek a gombok elérhetők, de az Automatikus feldolgozás beállítás nem jelenik meg.
Gyakori kérdések
Mit jelent a CSS minifikálása?
A minifikálás eltávolítja a felesleges szóközöket és megjegyzéseket, és rövidítheti az értékeket, például a #ffffff értéket #fff alakra. Az eszköz CSSO-t használ, amely engedélyezett átrendezésnél az ismétlődő szabályokat és deklarációkat is optimalizálja.
Mennyivel lesz kisebb a CSS?
Ez az eredeti kódtól függ. A sok megjegyzést vagy ismétlődő szabályt tartalmazó stíluslap jobban csökkenhet, mint a már tömör kód. A 768 pixelnél szélesebb ablakokban az editorok alatt hasonlíthatod össze a bemenet és a kimenet méretét. Keskenyebb ablakban ezek az adatok rejtve maradnak. A gzip-adat a böngészőben végzett tömörítést méri, ezért a szerver más bájtmennyiséget is küldhet.
Javítja a CSS kicsinyítése a betöltést vagy a SEO-t?
A kisebb stíluslap csökkentheti a látogatók által letöltött CSS mennyiségét. A betöltés javulása az oldal többi részétől, a gyorsítótártól és a fájlok kiszolgálásától is függ. A minifikálás önmagában nem garantál jobb Core Web Vitals értékeket vagy keresési helyezést.
Mi a különbség a CSS kicsinyítése és formázása között?
A Kicsinyítés tömör CSS-t készít kisebb fájlhoz. A Formázás sortöréseket és behúzásokat ad hozzá az olvasáshoz és szerkesztéshez. A korábban eltávolított megjegyzéseket és eredeti formázást nem állítja vissza.
További 4 megjelenítéseKevesebb megjelenítése
Hogyan tehetem olvashatóvá a tömör CSS-t?
Válaszd a Formázás módot, illeszd be a CSS-t, és állíts be két- vagy négyszóközös behúzást. A formázott eredményt a kimeneti editorból másolhatod vagy töltheted le.
Elronthatja a kicsinyítés a CSS-t?
Az eredeti fájl lecserélése előtt nézd át az eredményt, és próbáld ki a webhelyeden. Az átrendezés összevonhatja a szabályokat vagy módosíthatja a sorrendjüket. Kapcsold ki, ha számít a sorrend, és ellenőrizd az elemző figyelmeztetéseit.
Megtalálja az eszköz a CSS hibáit?
A Kicsinyítés megmutatja az elemző által észlelt szintaktikai hibák sorát és oszlopát. Egyes hibás bemenetek részben feldolgozhatók, és a formázás nem teljes körű CSS-ellenőrzés. Próbáld ki az eredményt a webhelyed által támogatott böngészőkben.
Fel kell töltenem valahová a CSS-t?
Nem. Az Importálás helyi fájlt olvas be az editorba, a feldolgozás pedig a böngészőben fut. A stíluslap nem kerül átalakításra egy szerverre.
Technikai részletek
Kicsinyítés CSSO-val
A Kicsinyítés betölti a CSSO-t, és a css-tree segítségével elemzi a stíluslapot. Az optimalizálás eltávolítja a felesleges formázást, rövidítheti az értékeket, törölheti az üres szabályokat és összevonhat szerkezeteket. Két beállítás szabályozza a fontos megjegyzések megtartását és a szabályok átrendezését.
Feldolgozás a böngészőben
A kicsinyítést és formázást végző könyvtárak az adott mód első használatakor töltődnek be. A CSS-t a böngészőben dolgozzák fel. Az Importálás helyi fájlt olvas be, nem tölti fel átalakításra.
További 4 megjelenítéseKevesebb megjelenítése
Eredmény és méret-összehasonlítás
A bemenet és a kimenet méretét a szöveg bájtjai adják. Ha elérhető a CompressionStream, az eszköz a gzip-pel tömörített eredmény méretét is megméri a böngészőben. A Letöltés a választott módra utaló nevű .css-fájlt hoz létre.
Az elemző hibajelzései
A Kicsinyítés összegyűjti a css-tree hibajelzéseit, és megjeleníti a jelzett sort és oszlopot. Az elemző hibás bemenetet is részben feldolgozhat, ezért az eredmény nem igazolja minden deklaráció érvényességét vagy kívánt működését.
CSS formázása
A Formázás a @projectwallace/format-css könyvtárat használja két- vagy négyszóközös behúzással. Mindkét mód jelzi a css-tree által észlelt szintaktikai problémákat is. A formázás nem állítja vissza a törölt megjegyzéseket, és nem igazolja minden CSS-deklaráció érvényességét.
Helyi használati statisztikák
A feldolgozások, a megtakarított bájtok és a módhasználat számlálói a Kicsinyítés vagy Formázás gombbal indított műveleteket számolják. Az automatikus frissítések nem növelik ezeket. Az eredmény másolása külön számlálót kap. Ha a tároló elérhető, a statisztikák a böngésző IndexedDB-adatbázisába kerülnek. Az aktivitási pontszám a méretcsökkenésből, a másolások arányából és a használt módokból áll össze. Nem méri a CSS helyességét vagy a betöltés sebességét.