Kaip sumažinti CSS internete nieko neįdiegiant?

Įklijuokite CSS į CSS įvestis arba nutempkite .css failą, tada spustelėkite Sumažinti CSS. Komentarai ir papildomi tarpai pašalinami, o rezultatą galite Kopijuoti arba Atsisiųsti kaip styles.min.css.

Ar CSS mažintuvas išsaugo licencijų komentarus ir data URI nepakeistus?

Taip. Įprasti komentarai pašalinami, bet /*! license */ komentarai išsaugomi. Eilutės kabutėse, url() reikšmės ir data URI išskaidomos atskirai, todėl tarpų taisyklės jų nekeičia.

Kaip sumažintą CSS paversti atgal skaitomu kodu?

Vietoj Sumažinti CSS spustelėkite Pagražinti CSS. Kodas iš naujo įtraukiamas dviem tarpais kiekviename lygyje, o selektorių dvitaškiai, pavyzdžiui, a:hover, atskiriami nuo savybių dvitaškių. Atsisiųsti išsaugo kaip styles.css.

Ką reiškia gzip skaičius šalia sumažinimo?

Tai išvesties dydžio įvertis po gzip suspaudimo, išmatuotas naršyklės CompressionStream API. Jei jūsų naršyklė šios API neturi, gzip dydis nerodomas.

Ar mano CSS siunčiamas į serverį, kai jį sumažinu?

Ne. Mažinimą atlieka jūsų naršyklėje veikiantis JavaScript žymeklių skaidytuvas be išorinės bibliotekos. Niekas neįkeliama, todėl galite naudoti privatiems stilių lapams.

Taip. Kiekvienas įrankis yra nemokamas, nereikia nei paskyros, nei kredito kortelės. Darbas atliekamas jūsų įrenginyje, o ne mūsų serveriuose, todėl jis ir yra nemokamas.

Ar veikia mobiliuosiuose įrenginiuose?

Taip. Veikia šiuolaikinėse mobiliosiose naršyklėse iOS ir Android sistemose, nieko diegti nereikia.

🗜️

CSS minifikatorius ir formatuotojas nemokamai

Minifikuokite CSS, kad sumažintumėte failo dydį, arba formatuokite minifikuotą CSS skaitomumui. Momentaliai, jūsų naršyklėje.

Veikia jūsų naršyklėjeBe registracijos, be iššokančių langųPrisijungimo nereikiaNemokamai amžinai

Veikia neprisijungus, kai įkeliama

arba nutempkite .css failą žemiau

Nutempkite .css failą čia arba spustelėkite, kad pasirinktumėte

CSS · apdorojama jūsų įrenginyje

arba paspauskite Ctrl+V, kad įklijuotumėte iš iškarpinės

Naršyti failus

Įvesties CSS

Išvesties CSS

Išvestis pasirodys čia…

Dažniausi naudojimo būdai

Sumažinkite CSS gamybos diegimuiSumažinkite CSS failo dydį prieš diegiant gamyboje — greitesni puslapio persikrovimas ir žemesni pralaidumo kaštai.
Prižiūrėkite sumažintą CSS klaidoms ištaisytiSuformatuokite suspausto arba sumažinto CSS į skaitomą kodą, kad galėtumėte tikrinti ir ištaisyti stilius.
Sumažinkite CSS el. pašto šablonamsSutraukite CSS HTML el. pašto šablonams, kur failo dydis ir vietiniojo stiliaus išpūtimas yra svarbūs.
Sumažinkite CSS„WordPressSumažinkite pasirinktų„WordPress
Prižiūrėkite CSS kodo apžvalgaiSuformatuokite bet kurį CSS failą į švarų, sutrauktą, skaitomą kodą, paruoštą peržiūrai ir bendradarbiavimui.

Kaip tai veikia

Šis įrankis naudoja rankomis parašytą, be priklausomybių veikiantį CSS žetonizatorių, sukurtą visiškai JavaScript kalba — jokių išorinių bibliotekų, jokio kreipimosi į serverį. Žetonizatorius klasifikuoja kiekvieną simbolį kaip kodą, komentarą, eilutę kabutėse ar url() reikšmę prieš taikydamas bet kokias transformacijas, kas apsaugo, kad tarpų taisyklės nesugadintų eilučių turinio, duomenų URI ar calc() išraiškų.

1
Žetonizavimo etapas
Įvesties CSS nuskaitomas simbolis po simbolio ir skaidomas į tipizuotus žetonus: neapdoroti kodo segmentai, /* ... */ komentarai, eilutės kabutėse (išsaugant pabėgimo sekas) ir url(...) blokai. Tai užtikrina, kad kito žingsnio transformacijos paliestų tik tikrą CSS sintaksę — niekada eilutės literalo ar duomenų URI turinį.
2
Sutraukimas ar sutvarkymas
Sutraukimo režime įprasti komentarai pašalinami (/*! license */ komentarai paliekami), tarpų sekos kodo žetonuose sutraukiamos iki vieno tarpo, o skyrybai gretimi tarpai aplink { } : ; , > ~ pašalinami. Tarpai aplink + ir - sąmoningai paliekami nepakeisti, kad nesugadintų calc() išraiškų. Sutvarkymo režime kodas pirmiausia sutraukiamas iki švarios bazinės formos, tada iš naujo žetonizuojamas ir iš naujo įtraukiamas su dviejų tarpų gylio sekimu ir deklaracijos dvitaškio aptikimu, kad atskirtų savybė: reikšmė dvitaškius nuo selektoriaus dvitaškių, pvz., a:hover.
3
Gzip dydžio įvertis
Sukūrus išvestį, naršyklės natyvus CompressionStream API naudojamas rezultatui suspausti gzip formatu ir gauto baitų skaičiaus išmatavimui. Tai suteikia realistišką perdavimo dydžio įvertį, atitinkantį tai, ką siųstų žiniatinklio serveris su gzip suspaudimu per tinklą.
4
Kopijuoti arba atsisiųsti
Apdorotas CSS įrašomas į iškarpinę per Clipboard API arba atsisiunčiamas kaip styles.min.css (sutraukimo režimas) arba styles.css (sutvarkymo režimas), naudojant Blob su MIME tipu text/css. Dydžio sumažėjimo procentas rodomas gyvai, kol rašote.

Susiję įrankiai

✨

SVG optimizatorius ir minifikatorius

Pašalinkite metaduomenis, sutraukite tarpus ir suapvalinkite dešimtainius skaičius, kad ženkliai sumažintumėte SVG failo dydį — įprastas sumažinimas 30–70%. Vizuali peržiūra patvirtina, kad niekas nesuges.

IšbandykiteFailai lieka vietiškai

🎨

CSS gražintuvas

Suformatuokite sumažintą CSS su vienodais įtrauktimis arba jį sumažinkite. Pasirenkamas savybių rikiavimas abėcėlės tvarka, kad skirtumai būtų aiškūs.

Išbandykite

📋

JSON formatavimas

Formatuokite, tikrinkite, minimizuokite ir tyrinėkite JSON duomenis. Medžio vaizdas, sintaksės paryškinimas ir kopijavimas vienu paspaudimu.