મફત CSS મિનિફાયર અને બ્યુટિફાયર

આ કેવી રીતે કાર્ય કરે છે

આ ટૂલ સંપૂર્ણપણે JavaScript માં બનેલા હાથે લખેલા, ઝીરો-ડિપેન્ડન્સી CSS ટોકનાઇઝરનો ઉપયોગ કરે છે — કોઈ બાહ્ય લાઇબ્રેરી નહીં, કોઈ સર્વર કૉલ નહીં. કોઈપણ ટ્રાન્સફોર્મેશન લાગુ કરતાં પહેલાં ટોકનાઇઝર દરેક અક્ષરને કોડ, કમેન્ટ, ક્વોટેડ સ્ટ્રિંગ, કે url() મૂલ્ય તરીકે વર્ગીકૃત કરે છે, જે વ્હાઇટસ્પેસ નિયમોને સ્ટ્રિંગ કન્ટેન્ટ, ડેટા URI, કે calc() એક્સપ્રેશન બગાડતાં અટકાવે છે.

1. 1
   ટોકનાઇઝેશન પાસ

   ઇનપુટ CSS ને એક-એક અક્ષર કરીને સ્કેન કરવામાં આવે છે અને ટાઈપ કરેલા ટોકનમાં વિભાજિત કરવામાં આવે છે: કાચા કોડ સેગમેન્ટ, /* ... */ કમેન્ટ્સ, ક્વોટેડ સ્ટ્રિંગ (એસ્કેપ સિક્વન્સ સાચવીને), અને url(...) બ્લોક્સ. આ સુનિશ્ચિત કરે છે કે આગલા સ્ટેપમાં ટ્રાન્સફોર્મેશન ફક્ત વાસ્તવિક CSS સિન્ટેક્સને જ સ્પર્શે — ક્યારેય સ્ટ્રિંગ લિટરલ કે ડેટા URI ના કન્ટેન્ટને નહીં.
2. 2
   Minification કે Beautification

   Minify મોડમાં, સામાન્ય કમેન્ટ્સ કાઢી નાખવામાં આવે છે (/*! license */ કમેન્ટ્સ રાખવામાં આવે છે), કોડ ટોકનમાં વ્હાઇટસ્પેસના રન એક જ સ્પેસમાં ટૂંકાવવામાં આવે છે, અને { } : ; , > ~ ની આસપાસ punctuation-adjacent વ્હાઇટસ્પેસ કાઢી નાખવામાં આવે છે. calc() એક્સપ્રેશન તૂટે નહીં એ માટે + અને - ની આસપાસ સ્પેસ ઈરાદાપૂર્વક રાખવામાં આવે છે. Beautify મોડમાં, કોડને પહેલા સ્વચ્છ બેઝલાઇન સુધી minify કરવામાં આવે છે, પછી property: value colon ને a:hover જેવા સિલેક્ટર colon થી અલગ પાડવા માટે બે-સ્પેસ depth ટ્રેકિંગ અને declaration-colon detection સાથે ફરીથી ટોકનાઇઝ અને ઇન્ડેન્ટ કરવામાં આવે છે.
3. 3
   Gzip કદનો અંદાજ

   આઉટપુટ બનાવ્યા પછી, બ્રાઉઝરના નેટિવ CompressionStream API નો ઉપયોગ કરીને પરિણામને gzip વડે કમ્પ્રેસ કરવામાં આવે છે અને પરિણામી બાઇટ ગણતરી માપવામાં આવે છે. આ gzip કમ્પ્રેશન ધરાવતો વેબ સર્વર નેટવર્ક પર જે મોકલશે તેની સાચી ટ્રાન્સફર-કદ અંદાજ આપે છે.
4. 4
   કૉપી કરો કે ડાઉનલોડ કરો

   પ્રોસેસ કરેલ CSS Clipboard API દ્વારા ક્લિપબોર્ડમાં લખાય છે, અથવા text/css MIME પ્રકારના Blob નો ઉપયોગ કરીને styles.min.css (minify મોડ) કે styles.css (beautify મોડ) તરીકે ડાઉનલોડ થાય છે. કદમાં ઘટાડાની ટકાવારી તમે ટાઈપ કરો તેમ લાઇવ બતાવવામાં આવે છે.

સંબંધિત સાધનો