CSS கோப்புகளின் வடிவமைப்பு மற்றும் அளவை மேம்படுத்துதல்
இணையதளங்களின் வடிவமைப்பு மற்றும் தோற்றத்தை நிர்ணயிப்பதில் CSS (Cascading Style Sheets) முக்கியப் பங்கு வகிக்கிறது. மனிதர்கள் எளிதாகப் படித்துப் புரிந்துகொள்வதற்கும், உலாவிகள் (Browsers) விரைவாகச் செயலாக்குவதற்கும் தேவையான CSS குறியீட்டின் வடிவமைப்பு முற்றிலும் மாறுபட்டது. மனிதர்கள் குறியீட்டை எளிதாகத் திருத்துவதற்கும் படிப்பதற்கும் உள்தள்ளல்கள் (Indentation), புதிய வரிகள் மற்றும் கருத்துகள் (Comments) அவசியமாகின்றன. ஆனால், உலாவிகளுக்கு இந்த வெற்று இடைவெளிகளும் கருத்துகளும் தேவையில்லை; இவை கோப்பின் அளவை மட்டுமே அதிகரிக்கின்றன.
CSS கோப்பின் அளவு அதிகரிக்கும்போது, இணையப்பக்கம் பதிவிறக்கமாகும் நேரம் (Page load time) அதிகரிக்கிறது. இது பயனர் அனுபவத்தையும் இணையதளத்தின் செயல்திறனையும் நேரடியாகப் பாதிக்கிறது. இந்தச் சிக்கலைத் தீர்க்கவே CSS Beautification (அழகாக்குதல்) மற்றும் CSS Minification (சுருக்குதல்) ஆகிய இரண்டு செயல்முறைகள் பயன்படுத்தப்படுகின்றன.
CSS பியூட்டிஃபையர் & மினிஃபையர் கருவியின் உள்ளீடுகள்
இந்தக் கருவி அதிகபட்சமாக 500,000 எழுத்துகள் (Characters) வரையிலான CSS குறியீட்டை ஏற்றுக்கொண்டு செயலாக்குகிறது. இதில் பின்வரும் உள்ளீட்டு விருப்பங்களை நீங்கள் தேர்வு செய்யலாம்:
- CSS உள்ளீடு: உங்கள் CSS குறியீட்டை நேரடியாக ஒட்டலாம் அல்லது தட்டச்சு செய்யலாம்.
- உள்தள்ளல்: குறியீட்டை அழகாக்கும்போது பயன்படுத்த வேண்டிய இடைவெளியைத் தேர்வு செய்யலாம்.
- 2 இடைவெளிகள் (2 spaces)
- 4 இடைவெளிகள் (4 spaces)
- டேப் (tab)
- சுருக்கம்: குறியீட்டைச் சுருக்கும்போது பயன்படுத்த வேண்டிய முறையைத் தேர்வு செய்யலாம்.
- பாதுகாப்பானது: இது வெற்று இடைவெளிகளையும் சாதாரண கருத்துகளையும் மட்டுமே நீக்குகிறது, மேலும் மதிப்புகளைச் சுருக்குகிறது. நீங்கள் எழுதிய விதிகளின் வரிசையை இது மாற்றுவதில்லை.
- மேம்படுத்தப்பட்டது: இது கோப்பின் அளவை மேலும் குறைக்க, ஒரே மாதிரியான செலக்டர்கள் (Selectors) மற்றும் விதிகளை (Rules) ஒன்றிணைக்கிறது. இதனால் விதிகளின் வரிசை மாறக்கூடும்.
வெளியீட்டு அளவீடுகளும் பதிவிறக்கமும்
குறியீடு செயலாக்கப்பட்ட பிறகு, அதன் முடிவுகளைக் கண்காணிக்கப் பின்வரும் அளவீடுகள் காட்டப்படுகின்றன:
- வரிகள்: செயலாக்கப்பட்ட CSS குறியீட்டில் உள்ள மொத்த வரிகளின் எண்ணிக்கை.
- எழுத்துகள்: செயலாக்கப்பட்ட CSS குறியீட்டில் உள்ள மொத்த எழுத்துகளின் எண்ணிக்கை.
- அளவு: UTF-8 குறியாக்கத்தில் (Encoding) செயலாக்கப்பட்ட CSS கோப்பின் பைட் அளவு.
- சுருக்கப்பட்டது —
{pct}% சிறியது: CSS குறியீடு சுருக்கப்படும்போது, அசல் கோப்பிலிருந்து எவ்வளவு சதவீத அளவு குறைக்கப்பட்டுள்ளது என்பதை இது காட்டுகிறது.
செயலாக்கப்பட்ட குறியீட்டைப் பயன்படுத்த இரண்டு எளிய வழிகள் உள்ளன. பதிவிறக்கு பொத்தானை அழுத்துவதன் மூலம், செயலாக்கப்பட்ட குறியீட்டை styles.css என்ற கோப்பாக நேரடியாகப் பதிவிறக்கலாம். அல்லது, நகலெடுக்கும் பொத்தானைப் பயன்படுத்தி குறியீட்டை நேரடியாக நகலெடுத்துக் கொள்ளலாம்.
செயலாக்க விதிகளும் பிழைச் செய்திகளும்
இந்தக் கருவி குறியீட்டைச் செயலாக்கும்போது சில குறிப்பிட்ட விதிகளைப் பின்பற்றுகிறது:
/*! … */எனக் குறிக்கப்பட்ட கருத்துகள் (Comments) "பாதுகாப்பானது" மற்றும் "மேம்படுத்தப்பட்டது" ஆகிய இரண்டு சுருக்க முறைகளிலும் நீக்கப்படாமல் அப்படியே பாதுகாக்கப்படும்.- அழகாக்கும்போது (Beautifying), குறியீடு மீண்டும் உள்தள்ளப்பட்டு, படிக்க எளிதான இடைவெளிகளுடன் சீரமைக்கப்படுகிறது.
- சுருக்கும்போது (Minifying), வெற்று இடைவெளிகள் மற்றும் சாதாரண கருத்துகள் நீக்கப்படுவதுடன், வண்ண மதிப்புகள் போன்ற பண்புகள் சுருக்கப்படுகின்றன (உதாரணமாக,
#ffffffஎன்பது#fffஎன மாற்றப்படும்). - "பாதுகாப்பானது" பயன்முறையில், வெண்டார் பிரீஃபிக்ஸ்கள் (Vendor prefixes) மற்றும் நவீன தொடரியல்கள் (Modern syntax) எவ்வித மாற்றமும் இன்றி அப்படியே வைக்கப்படும்.
செயலாக்கத்தின்போது ஏற்படும் பிழைகளைக் குறிக்கப் பின்வரும் செய்திகள் காட்டப்படும்:
- உள்ளீடு காலியாக இருந்தால்: "சுருக்குவதற்கு எந்த CSS-உம் கண்டறியப்படவில்லை — உள்ளீட்டில் தொடரியல் பிழைகள் உள்ளதா எனச் சரிபார்க்கவும்".
- குறியீட்டைச் செயலாக்க முடியாதபோது: "இந்த CSS-ஐச் செயலாக்க முடியவில்லை".
- உள்ளீடு 500,000 எழுத்துகளுக்கு மேல் இருந்தால்: "இந்த ஸ்டைல்ஷீட் செயலாக்க முடியாத அளவுக்குப் பெரியதாக உள்ளது. சிறிய கோப்பை முயற்சிக்கவும்".
- உள்ளீட்டில் தரவு இருந்து, சுருக்கப்பட்ட முடிவு காலியாக இருந்தால், அது தொடரியல் பிழையைக் குறிக்கிறது.
தரவு தனியுரிமை மற்றும் பாதுகாப்பு
இந்தக் கருவியைப் பயன்படுத்தும்போது உங்கள் தரவுப் பாதுகாப்பு உறுதி செய்யப்படுகிறது. உங்கள் CSS குறியீடு முழுவதும் உங்கள் சொந்த உலாவியிலேயே (Browser) வடிவமைக்கப்பட்டு சுருக்கப்படுகிறது. BroBroGo-விற்கு எந்தவொரு தரவும் பதிவேற்றப்படுவதில்லை.
அடிக்கடி கேட்கப்படும் கேள்விகள் (FAQ)
Beautify மற்றும் Minify ஆகியவற்றுக்கு இடையே உள்ள வேறுபாடு என்ன? Beautify (அழகாக்குதல்) என்பது உங்கள் குறியீட்டின் உள்தள்ளல்களையும் இடைவெளிகளையும் சீரமைத்து, எளிதாகப் படிக்கவும் திருத்தவும் வழிவகுக்கிறது. Minify (சுருக்குதல்) இதற்கு நேர்மாறானது — உலாவிக்குத் தேவையில்லாத வெற்று இடைவெளிகளையும் கருத்துகளையும் நீக்கி, வண்ண மதிப்புகள் போன்றவற்றைச் சுருக்கி, கோப்பின் அளவைக் குறைத்து வேகமாக ஏற்ற உதவுகிறது. வேலை செய்யும்போது Beautify-ஐயும், வெளியிடும்போது Minify-ஐயும் பயன்படுத்தவும்.
Safe மற்றும் Optimized சுருக்க அமைப்புகள் என்ன செய்கின்றன?
Safe (பாதுகாப்பானது) பயன்முறை வெற்று இடைவெளிகளையும் கருத்துகளையும் மட்டுமே நீக்கி, மதிப்புகளைச் சுருக்குகிறது; நீங்கள் எழுதிய விதிகளை அப்படியே வைத்திருக்கும். Optimized (உகந்தது) பயன்முறை இன்னும் ஒரு படி மேலே சென்று, கோப்பின் அளவைக் குறைக்க ஒரே மாதிரியான செலக்டர்களையும் விதிகளையும் ஒன்றிணைக்கிறது — இது விதிகளின் வரிசையை மாற்றக்கூடும் என்பதால், வெளியிடுவதற்கு முன் ஒருமுறை சரிபார்ப்பது நல்லது. /*! … */ எனக் குறிக்கப்பட்ட கருத்துகள் இரண்டு பயன்முறைகளிலும் அப்படியே பாதுகாக்கப்படும்.
சுருக்குதால் (Minifying) எனது பக்கத்தின் தோற்றம் மாறுமா?
Safe பயன்முறையில் எந்த மாற்றமும் இருக்காது — உங்கள் பக்கத்தின் வடிவமைப்பு அப்படியே இருக்கும். இது வெற்று இடைவெளிகளை நீக்கி, சாதாரண கருத்துகளைத் தவிர்த்து, மதிப்புகளைச் சுருக்கமான வடிவங்களில் மாற்றும் (உதாரணமாக #ffffff என்பதை #fff என மாற்றும்). மேலும், இது உங்கள் வெண்டார் பிரீஃபிக்ஸ்கள் அல்லது நவீன தொடரியல்களை மாற்றாது. Optimized பயன்முறையானது விதிகளையும் ஒன்றிணைக்கும், இது பெரும்பாலான ஸ்டைல்ஷீட்களில் ஒரே மாதிரியாகத் தெரிந்தாலும், விதிகளின் வரிசையைச் சார்ந்திருக்கும் பக்கங்களில் ஒருமுறை சரிபார்ப்பது நல்லது.
இந்தக் கருவியை யாரெல்லாம் பயன்படுத்தலாம்? முன்பக்க உருவாக்குநர்கள் (Front-end developers), ஏற்கனவே உள்ள ஸ்டைல்ஷீட்களைப் பராமரிப்பவர்கள், சுருக்கப்பட்ட CSS குறியீட்டைப் படித்துப் பார்க்க விரும்புபவர்கள், மற்றும் பக்கத்தின் தோற்றம் மாறாமல் கோப்பின் அளவைச் சுருக்க நினைப்பவர்கள் இந்தக் கருவியைப் பயன்படுத்தலாம்.