CSS மினிஃபையர்
CSS குறியீட்டை தயாரிப்பிற்காக சுருக்குங்கள்.
ஃபீச்சர் டெவலப்மென்ட் சைக்கிள்களில் ஸ்டைல்கள் சேர்ந்து கொண்டே போவதால், CSS ஃபைல்கள் காலப்போக்கில் பெரிதாகி விடுகின்றன. டெவலப்மென்ட்டுக்கு உதவும் வைட்ஸ்பேஸ், கமெண்ட்கள், ஃபார்மேட்டிங் ஆகியவை புரொடக்ஷனில் எந்த மதிப்பும் தராது — அவை ஃபைல் சைஸையும் லோட் நேரத்தையும் மட்டுமே அதிகரிக்கின்றன. CSS-ஐ மினிஃபை செய்வதன் மூலம், வைட்ஸ்பேஸ், கமெண்ட்கள், கிளோசிங் பிரேஸுக்கு முன் வரும் கடைசி செமிகோலன் போன்ற தேவையற்ற எழுத்துக்கள் அகற்றப்பட்டு ஃபைல் சைஸ் குறைக்கப்படுகிறது. gzip காம்ப்ரெஷனுடன் இணைந்தால், மினிஃபை செய்யப்பட்ட CSS அசல் ஃபைலைவிட 70–90% சிறியதாக இருக்கும், இதனால் பக்கம் லோட் ஆகும் வேகம் கணிசமாக அதிகரிக்கும்.
📋 இந்த கால்குலேட்டரை எப்படி பயன்படுத்துவது
உங்கள் CSS-ஐ இன்புட் ஏரியாவில் பேஸ்ட் செய்யுங்கள் — க்ளாஸ் ரூல்ஸ், மீடியா குவரிகள், கீஃப்ரேம் அனிமேஷன்கள், கஸ்டம் ப்ராப்பர்ட்டீஸ், எதுவாக இருந்தாலும் சரி. "Minify CSS" என்பதைக் கிளிக் செய்தால், அனைத்து வைட்ஸ்பேஸும் கமெண்ட்களும் அகற்றப்பட்ட காம்பாக்ட் CSS உருவாகும். இந்த டூல் அசல் மற்றும் மினிஃபை செய்யப்பட்ட எழுத்துக்களின் எண்ணிக்கையையும், சதவீத குறைப்பையும் காண்பிக்கும். இதன் முடிவை காபி செய்து உங்கள் புரொடக்ஷன் பில்ட், CDN, அல்லது நேரடியாக <style> டேக்கில் பயன்படுத்தலாம். டெவலப்மென்ட்டுக்காக உங்கள் அசல், கமெண்ட் செய்யப்பட்ட CSS-ஐ எப்போதும் பாதுகாத்து வையுங்கள்; உங்கள் பில்ட் பைப்லைனின் ஒரு பகுதியாக மினிஃபிகேஷனை செய்யுங்கள்.
💡 முக்கிய தகவல்கள்
CSS மினிஃபிகேஷன் பல மாற்றங்களைச் செய்கிறது: /* பிளாக் கமெண்ட்கள் */ அகற்றப்படும் (/*! எனக் குறிக்கப்பட்ட காப்புரிமை கமெண்ட்களை சில மினிஃபையர்கள் பாதுகாக்கும், ஆனால் இந்த அடிப்படை டூலில் அது இல்லை), ப்ராப்பர்ட்டி டிலிமிட்டர்களைச் (: ; , { }) சுற்றியுள்ள வைட்ஸ்பேஸ் அகற்றப்படும், கிளோசிங் பிரேஸுக்கு முன் வரும் கடைசி செமிகோலன் அகற்றப்படும், மற்றும் பல வைட்ஸ்பேஸ் எழுத்துக்கள் ஒரே ஸ்பேஸாக மாற்றப்படும். shorthand ப்ராப்பர்ட்டி மெர்ஜிங் (margin: 10px 10px 10px 10px → margin: 10px), கலர் ஷார்ட்னிங் (#ffffff → #fff), அல்லது ப்ராப்பர்ட்டி டீடுப்ளிகேஷன் போன்ற மேம்பட்ட ஆப்டிமைசேஷன்களை இது செய்வதில்லை — அவைக்கு cssnano அல்லது clean-css போன்ற முழுமையான CSS ஆப்டிமைசர் தேவை.