CSS tvarkytuvas ir glaudintuvas

Sutvarkykite netvarkingą CSS patogiam skaitymui arba suglaudinkite jį gamybiniam naudojimui – su saugiuoju režimu, kuris niekada nekeičia taisyklių tvarkos.

Įtrauka
Glaudinimas
Įklijuokite arba įrašykite CSS kodą, kad jį sutvarkytumėte arba suglaudintumėte.

Jūsų CSS formatuojamas ir glaudinamas tiesiog naršyklėje. Nieko nesiunčiama į „BroBroGo“ serverius.

DUK

Kuo skiriasi kodo sutvarkymas (beautify) ir suglaudinimas (minify)?

Sutvarkymo („Beautify“) funkcija iš naujo nustato įtraukas ir tarpus, kad stiliai būtų lengvai skaitomi ir redaguojami. Suglaudinimas („Minify“) daro priešingai – pašalina naršyklei nereikalingus tarpus bei komentarus ir sutrumpina reikšmes (pavyzdžiui, spalvų kodus), kad failas būtų mažesnis ir greičiau įkeliamas. Tvarkykite kodą dirbdami, o suglaudinkite prieš pateikdami į gamybinę aplinką.

Ką daro saugaus (Safe) ir optimizuoto (Optimized) suspaudimo nustatymai?

Saugusis režimas („Safe“) tik pašalina tarpus bei komentarus ir sutrumpina reikšmes, palikdamas kiekvieną taisyklę tiksliai ten, kur ją parašėte. Optimizuotas režimas („Optimized“) žengia dar toliau ir sujungia pasikartojančius selektorius bei taisykles, kad failas būtų dar mažesnis – jis gali pakeisti taisyklių tvarką, todėl stilių lentelėse, kurios priklauso nuo kodo eiliškumo, prieš gamybinį paleidimą verta viską greitai patikrinti. Komentarai, pažymėti kaip /*! … */, išsaugomi abiem atvejais.

Ar suglaudinimas pakeis mano puslapio išvaizdą?

Saugiajame režime („Safe“) – ne, jūsų stiliai bus atvaizduojami visiškai taip pat. Jis pašalina nereikalingus tarpus, paprastus komentarus ir perrašo reikšmes trumpesniais ekvivalentais (pavyzdžiui, #ffffff tampa #fff), tačiau niekada nekeičia naršyklių prefiksų ar modernios sintaksės. Optimizuotas režimas („Optimized“) papildomai sujungia taisykles – vizualiai rezultatas beveik visada bus identiškas, tačiau verta įsitikinti, ar jūsų stiliai nepriklauso nuo konkrečios taisyklių sekos.

HTML tvarkytuvas ir glaudintuvasSutvarkykite supainiotą HTML patogiam skaitymui arba suglaudinkite jį gamybiniam naudojimui – su pasirenkamu klaidų ir pažeistų žymų patikrinimu.SVG optimizavimo įrankisIšvalykite SVG kodą ir sumažinkite jo dydį nekeisdami paties grafinio vaizdo.JavaScript tvarkytuvas ir glaudintuvasAtkurkite suglaudinto ar užmaskuoto JavaScript kodo įtraukas, kad galėtumėte jį perskaityti, arba suglaudinkite savo kodą, kad jis užimtų mažiau vietos.CSS clamp() skaičiuoklėĮveskite dydį mažiems ir dideliems ekranams ir gaukite kintančią clamp() reikšmę, kuri sklandžiai prisitaiko – šriftams, paraštėms ar tarpams.Gradientų generatoriusKurkite tiesinius, radialinius ar kūginius gradientus, pridėkite spalvų taškus, nustatykite kryptį ir nukopijuokite CSS vienu spustelėjimu.Elementų šešėlių (box-shadow) generatoriusVilkite šliaužiklius, kad suformuotumėte šešėlį, sluoksniuokite juos gyliui išgauti ir akimirksniu nukopijuokite paruoštą CSS.Spalvų konverterisKonvertuokite spalvas tarp HEX, RGB, HSL, HSV, CMYK ir LAB – redaguokite bet kurį lauką, o kiti atsinaujins automatiškai.JSON formatavimo įrankisApskaičiuokite, suformatuokite, patikrinkite ir minifikuokite JSON akimirksniu.