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

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

ఈ టూల్ పూర్తిగా JavaScriptలో నిర్మించిన చేతితో రాసిన, సున్నా-డిపెండెన్సీ CSS టోకనైజర్ ఉపయోగిస్తుంది — బాహ్య లైబ్రరీలు లేవు, సర్వర్ కాల్‌లు లేవు. టోకనైజర్ ఏ మార్పులు వర్తింపజేసే ముందైనా ప్రతి అక్షరాన్ని code, comment, quoted string, లేదా url() విలువగా వర్గీకరిస్తుంది, ఇది ఖాళీ నియమాలు స్ట్రింగ్ విషయాలు, data URIలు, లేదా calc() ఎక్స్‌ప్రెషన్‌లను పాడుచేయకుండా నిరోధిస్తుంది.

1. 1
   టోకనైజేషన్ పాస్

   ఇన్‌పుట్ CSS అక్షరం వారీగా స్కాన్ చేయబడి టైప్ చేసిన టోకెన్‌లుగా విభజించబడుతుంది: ముడి code భాగాలు, /* ... */ కామెంట్‌లు, కోట్ చేసిన స్ట్రింగ్‌లు (escape sequences కాపాడుతూ), మరియు url(...) బ్లాక్‌లు. దీనివల్ల తదుపరి దశలోని మార్పులు నిజమైన CSS సింటాక్స్‌ను మాత్రమే తాకుతాయి — స్ట్రింగ్ లిటరల్ లేదా data URI విషయాలను ఎప్పుడూ కాదు.
2. 2
   Minification లేదా beautification

   minify మోడ్‌లో, సాధారణ కామెంట్‌లు తొలగించబడతాయి (/*! license */ కామెంట్‌లు ఉంచబడతాయి), code టోకెన్‌లలో ఖాళీల వరుసలు ఒకే ఖాళీగా కుదించబడతాయి, మరియు { } : ; , > ~ చుట్టూ విరామ చిహ్నాల పక్కన ఉన్న ఖాళీలు తీసివేయబడతాయి. calc() ఎక్స్‌ప్రెషన్‌లు పాడవకుండా + మరియు - చుట్టూ ఉన్న ఖాళీలు ఉద్దేశపూర్వకంగా వదిలివేయబడతాయి. beautify మోడ్‌లో, కోడ్ ముందుగా శుభ్రమైన ఆధారానికి minify చేయబడి, తర్వాత property: value కోలన్‌లను a:hover వంటి selector కోలన్‌ల నుండి వేరు చేయడానికి రెండు-ఖాళీల లోతు ట్రాకింగ్ మరియు డిక్లరేషన్-కోలన్ గుర్తింపుతో మళ్లీ టోకనైజ్ చేసి ఇండెంట్ చేయబడుతుంది.
3. 3
   Gzip పరిమాణ అంచనా

   అవుట్‌పుట్ ఉత్పత్తి చేసిన తర్వాత, ఫలితాన్ని gzipతో కంప్రెస్ చేసి వచ్చే బైట్ సంఖ్యను కొలవడానికి బ్రౌజర్ స్థానిక CompressionStream API ఉపయోగించబడుతుంది. ఇది gzip కంప్రెషన్ ఉన్న వెబ్ సర్వర్ నెట్‌వర్క్ ద్వారా పంపే దానికి సరిపోయే వాస్తవిక బదిలీ-పరిమాణ అంచనాను ఇస్తుంది.
4. 4
   కాపీ లేదా డౌన్‌లోడ్

   ప్రాసెస్ చేసిన CSS Clipboard API ద్వారా క్లిప్‌బోర్డ్‌కు రాయబడుతుంది, లేదా MIME రకం text/css ఉన్న Blob ఉపయోగించి styles.min.css (minify మోడ్) లేదా styles.css (beautify మోడ్)గా డౌన్‌లోడ్ చేయబడుతుంది. మీరు టైప్ చేస్తుండగా పరిమాణ తగ్గింపు శాతం లైవ్‌గా చూపబడుతుంది.

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