CSS gražintuvas nemokamai
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.
Nuvilkite failą čia arba spustelėkite, kad pasirinktumėte
CSS · apdorojama jūsų įrenginyje
arba paspauskite Ctrl+V, kad įklijuotumėte iš iškarpinės
Išvestis pasirodys čia…Dažniausi naudojimo būdai
- Debug gamybos CSSPeržiūrėkite minified CSS iš gamybos svetainių skaitomame formate, norėdami rasti ir atvirkštinio inžinerinio stiliau.
- Taikyti komandos CSS stiliusPaleiskite komandos siūlytą CSS per nuoseklų grožintoją, kad skirtumai būtų apie turinį, o ne formatavimą.
- Formatuokite pardavėjo priešdėlio CSSCSS su pardavėjo priešdėliu (autoprefixer išvestis) dažnai turi daug -webkit-, -moz-, -ms- variantų. Formatuokite patikrinimui.
- Sužinokite iš Pro CSSStudijuokite CSS iš žinomų projektavimo sistemų suformatavę jų išdirbę išvestį.
- Formatuokite CSS klaidų ataskaitomsKai pateikiate CSS klaidas, suformatavę CSS yra daug lengviau skaityti ir suprasti peržiūrėtojams.
Kaip tai veikia
Šis įrankis formatuoja CSS naudodamas rankomis parašytą rekursyvų analizatorių, integruotą tiesiai į puslapį — jokios trečiosios šalies bibliotekos, jokio kreipimosi į serverį. Analizatorius nuskaito jūsų CSS simbolis po simbolio, teisingai apdorodamas kabutėse esančias eilutes, url() reikšmes, įdėtąsias at-taisykles ir komentarus, kurie suklaidintų paprastesnius reguliariais reiškiniais grįstus metodus.
- 1Žetonizavimas simbolio lygiuFunkcija walkCss nuskaito neapdorotą įvestį po vieną simbolį, sekdama kabučių būseną ir skliaustų gylį, kad kabliataškiai ar riestiniai skliaustai url(), eilučių reikšmėse ar komentaruose niekada nebūtų palaikyti struktūriniais skyrikliais.
- 2Blokų ir deklaracijų atskyrimasKai analizatorius randa viršutinio lygio atidarantį riestinį skliaustą, jis išgauna įvadinę dalį (selektorių ar at-taisyklės raktažodį) ir rekursyviai apdoroja bloko turinį — kuris pats gali turėti įdėtąsias taisykles (@media, @supports, natyvų CSS įdėjimą), apdorojamas didesniame rekursijos gylyje.
- 3Savybių rikiavimas ir įtraukosKiekvieno bloko deklaracijos surenkamos į seką, tada pasirinktinai rikiuojamos abėcėlės tvarka pagal savybės pavadinimą prieš išvedant su pasirinktu įtraukos pločiu (2 ar 4 tarpai). Sutraukimo režimas visiškai praleidžia tarpus ir pašalina komentarus.
- 4Akimirksniu naršyklėje rodoma išvestisRezultatai pasirodo, kol rašote, per useMemo kablį — niekas niekur nesiunčiama. Suformatuotą ar sutrauktą CSS galima nukopijuoti į iškarpinę arba atsisiųsti kaip .css failą, o skydelyje rodomas dydžio skirtumas, palyginti su originalu.
Susiję įrankiai
HTML gražintuvas ir minifikatorius
Gražiai suformatuokite arba sumažinkite HTML su tinkama įdėtų elementų įtrauka. Išsaugo turinį <pre>, <script>, <style> blokuose.
SQL formatuotojas ir gražintuvas
Gražiai suformatuokite SQL užklausas su tinkama įtrauka, konfigūruojamu raktažodžių registru ir eilučių lūžiais ties pagrindinėmis užklausos dalimis. Veikia su bet kuriuo SQL dialektu.
CSS minifikatorius ir formatuotojas
Minifikuokite CSS, kad sumažintumėte failo dydį, arba formatuokite minifikuotą CSS skaitomumui. Momentaliai, jūsų naršyklėje.