Lumaktaw sa pangunahing nilalaman
LibraTool logoLibraTool

Libreng CSS Beautifier

Ayusin ang minified na CSS na may pare-parehong indentation, o i-minify ang CSS. May opsyonal na alphabetical na pag-uuri ng property para mas madaling ihambing ang mga pagbabago.

Gumagana offline kapag na-load na

I-drop ang file dito, o mag-click para mag-browse

CSS Β· pinoproseso sa iyong device

o pindutin ang Ctrl+V para i-paste mula sa clipboard

I-browse ang mga file
Pinagandang CSS
Lalabas ang output dito…

Mga karaniwang gamit

  • I-debug ang Production CSSTingnan ang minified CSS mula sa production sites sa readable format upang mahanap at reverse-engineer ang styling.
  • I-enforce ang Team CSS StylePatakbuhin ang team-submitted CSS sa isang consistent beautifier kaya ang diff ay tungkol sa content, hindi sa formatting.
  • I-format ang Vendor-Prefixed CSSAng vendor-prefixed CSS (autoprefixer output) ay madalas na may maraming -webkit-, -moz-, -ms- variant. I-format upang mag-inspect.
  • Matuto mula sa Pro CSSPag-aralan ang CSS mula sa kilalang design system sa pamamagitan ng pag-format ng kanilang compiled output.
  • I-format ang CSS para sa Bug ReportKapag nag-file ng CSS bug, ang formatted CSS ay mas madaling basahin at maintindihan ng mga reviewer.

Paano ito Gumagana

Fino-format ng tool na ito ang CSS gamit ang hand-written na recursive parser na nakapaloob mismo sa pahina β€” walang third-party library, walang server call. Dinadaanan ng parser ang CSS mo bawat character, tamang hinahawakan ang mga quoted string, url() value, nested na at-rule, at komento na makalilito sa mas simpleng regex-based na paraan.

  1. 1
    Tokenization sa antas ng character
    Sinusuri ng walkCss function ang raw na input nang isang character sa bawat pagkakataon, sinusubaybayan ang quote state at lalim ng panaklong kaya hindi kailanman napagkakamalang structural delimiter ang mga semicolon o brace sa loob ng url(), string value, o komento.
  2. 2
    Paghihiwalay ng block at declaration
    Kapag nakakita ang scanner ng top-level na opening brace, kinukuha nito ang prelude (ang selector o at-rule keyword) at recursive na pinoproseso ang body ng block β€” na maaaring may nested na rule (@media, @supports, native CSS nesting) na hinahawakan sa mas malalim na recursion.
  3. 3
    Pag-sort ng property at indentation
    Kinokolekta sa isang run ang mga declaration sa bawat block, pagkatapos ay opsyonal na sino-sort nang alpabetiko ayon sa pangalan ng property bago isulat gamit ang napiling indent width (2 o 4 na space). Nilalaktawan ng minify mode ang lahat ng whitespace at tinatanggal ang mga komento.
  4. 4
    Instant na output sa browser
    Lumalabas ang mga resulta habang nagta-type ka sa pamamagitan ng useMemo hook β€” walang ipinapadala kahit saan. Puwedeng kopyahin sa clipboard o i-download bilang .css file ang na-format o na-minify na CSS, at ipinapakita ng panel ang pagkakaiba sa laki kumpara sa orihinal.

Mga Kaugnay na Tool

🌐

HTML Beautifier at Minifier

Mag-pretty-print o mag-minify ng HTML na may wastong nesting indentation. Pinapanatili ang nilalaman sa loob ng mga <pre>, <script>, <style> block.

Subukan
πŸ—„οΈ

SQL Formatter at Beautifier

Mag-pretty-print ng mga SQL query na may wastong indentation, configurable na case ng keyword, at mga line break sa mga pangunahing clause. Gumagana sa anumang SQL dialect.

Subukan
πŸ—œοΈ

CSS Minifier at Beautifier

I-minify ang CSS para bawasan ang laki ng file o i-beautify ang minified na CSS para sa pagiging madaling basahin. Mabilis, sa iyong browser.

Subukan

Mga Madalas na Itanong