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

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

આ ટૂલ પેજમાં જ સીધા બનેલા હાથે લખેલા રિકર્સિવ પાર્સર વડે CSS ને ફોર્મેટ કરે છે — કોઈ થર્ડ-પાર્ટી લાઇબ્રેરી નહીં, કોઈ સર્વર કૉલ નહીં. પાર્સર તમારા CSS ને એક-એક અક્ષર કરીને પસાર કરે છે, ક્વોટેડ સ્ટ્રિંગ, url() મૂલ્યો, નેસ્ટેડ at-rules, અને કમેન્ટ્સ (જે સાદા regex-આધારિત અભિગમોને મૂંઝવે) ને યોગ્ય રીતે હેન્ડલ કરે છે.

1. 1
   કેરેક્ટર-લેવલ ટોકનાઇઝેશન

   walkCss ફંક્શન કાચા ઇનપુટને એક-એક અક્ષર કરીને સ્કેન કરે છે, ક્વોટ સ્ટેટ અને પેરેન્થેસિસ ડેપ્થ ટ્રેક કરે છે જેથી url(), સ્ટ્રિંગ મૂલ્યો, કે કમેન્ટ્સની અંદરના સેમિકોલન કે બ્રેસ ક્યારેય સ્ટ્રક્ચરલ ડિલિમિટર તરીકે ભૂલથી ન લેવાય.
2. 2
   બ્લોક અને ડિક્લેરેશન વિભાજન

   જ્યારે સ્કેનરને ટોપ-લેવલ ઓપનિંગ બ્રેસ મળે છે, ત્યારે તે પ્રિલ્યુડ (સિલેક્ટર કે at-rule કીવર્ડ) કાઢે છે અને બ્લોક બોડીને રિકર્સિવલી પ્રોસેસ કરે છે — જેમાં પોતે નેસ્ટેડ રૂલ્સ (@media, @supports, નેટિવ CSS નેસ્ટિંગ) ઊંડા રિકર્ઝન ડેપ્થ પર હેન્ડલ થાય શકે.
3. 3
   પ્રોપર્ટી સોર્ટિંગ અને ઇન્ડેન્ટેશન

   દરેક બ્લોકની અંદરના ડિક્લેરેશન એક રનમાં ભેગા કરવામાં આવે છે, પછી ઓપ્શનલી પ્રોપર્ટીના નામ પ્રમાણે અલ્ફાબેટિકલી સોર્ટ કરીને પસંદ કરેલી ઇન્ડેન્ટ પહોળાઈ (2 કે 4 સ્પેસ) સાથે લખવામાં આવે છે. Minify મોડ સંપૂર્ણપણે વ્હાઇટસ્પેસ છોડી દે છે અને કમેન્ટ્સ કાઢી નાખે છે.
4. 4
   તાત્કાલિક ઇન-બ્રાઉઝર આઉટપુટ

   તમે ટાઈપ કરો તેમ useMemo હૂક દ્વારા પરિણામો દેખાય છે — કંઈ પણ ક્યાંય મોકલાતું નથી. ફોર્મેટ કરેલ કે minify કરેલ CSS ને ક્લિપબોર્ડમાં કૉપી કરી શકાય છે અથવા .css ફાઇલ તરીકે ડાઉનલોડ કરી શકાય છે, અને પેનલ મૂળ સાથે સરખાવેલ કદનો ફેરફાર બતાવે છે.

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