ఉచిత CSS బ్యూటిఫైయర్

ఇది ఎలా పనిచేస్తుంది

ఈ టూల్ పేజీలోనే నేరుగా నిర్మించిన చేతితో రాసిన రికర్సివ్ పార్సర్ ఉపయోగించి CSSను ఫార్మాట్ చేస్తుంది — థర్డ్-పార్టీ లైబ్రరీ లేదు, సర్వర్ కాల్ లేదు. పార్సర్ మీ CSSను అక్షరం వారీగా పరిశీలిస్తుంది, సరళమైన regex-ఆధారిత పద్ధతులను గందరగోళపరిచే కోట్ చేసిన స్ట్రింగ్‌లు, url() విలువలు, నెస్టెడ్ at-rules, మరియు కామెంట్‌లను సరిగ్గా నిర్వహిస్తుంది.

1. 1
   అక్షర-స్థాయి టోకనైజేషన్

   walkCss ఫంక్షన్ ముడి ఇన్‌పుట్‌ను ఒక్కో అక్షరం చొప్పున స్కాన్ చేస్తుంది, కోట్ స్థితి మరియు కుండలీకరణ లోతును ట్రాక్ చేస్తుంది, కాబట్టి url(), స్ట్రింగ్ విలువలు, లేదా కామెంట్‌లలోని సెమికోలన్‌లు లేదా బ్రేస్‌లు ఎప్పుడూ నిర్మాణ విభాజకాలుగా పొరపడబడవు.
2. 2
   బ్లాక్ మరియు డిక్లరేషన్ విభజన

   స్కానర్ ఉన్నత-స్థాయి ప్రారంభ బ్రేస్‌ను కనుగొన్నప్పుడు, అది prelude (selector లేదా at-rule కీవర్డ్)ను వెలికితీసి బ్లాక్ బాడీని రికర్సివ్‌గా ప్రాసెస్ చేస్తుంది — దానిలోనే లోతైన రికర్షన్ స్థాయిలో నిర్వహించబడే నెస్టెడ్ రూల్స్ (@media, @supports, స్థానిక CSS nesting) ఉండవచ్చు.
3. 3
   ప్రాపర్టీ క్రమబద్ధీకరణ మరియు ఇండెంటేషన్

   ప్రతి బ్లాక్‌లోని డిక్లరేషన్‌లు ఒక రన్‌గా సేకరించబడి, ఎంచుకున్న ఇండెంట్ వెడల్పుతో (2 లేదా 4 ఖాళీలు) రాయబడే ముందు ఐచ్ఛికంగా ప్రాపర్టీ పేరు ప్రకారం అక్షర క్రమంలో అమర్చబడతాయి. Minify మోడ్ ఖాళీలను పూర్తిగా దాటవేసి కామెంట్‌లను తీసేస్తుంది.
4. 4
   తక్షణ బ్రౌజర్ అవుట్‌పుట్

   useMemo హుక్ ద్వారా మీరు టైప్ చేస్తుండగానే ఫలితాలు కనిపిస్తాయి — ఏదీ ఎక్కడికీ పంపబడదు. ఫార్మాట్ చేసిన లేదా minify చేసిన CSSను క్లిప్‌బోర్డ్‌కు కాపీ చేయవచ్చు లేదా .css ఫైల్‌గా డౌన్‌లోడ్ చేయవచ్చు, ప్యానెల్ అసలుతో పోలిస్తే పరిమాణ తేడాను చూపుతుంది.

సంబంధిత సాధనాలు