CSS @charset: உலகளாவிய உரை காட்சியின் கண்ணுக்குத் தெரியாத சிற்பி

இணைய மேம்பாட்டின் சிக்கலான உலகில், ஒவ்வொரு பிக்சலும் எழுத்தும் எண்ணற்ற சாதனங்கள் மற்றும் கலாச்சாரங்களில் மிகச் சரியாகக் காட்டப்பட வேண்டும். இங்கு, ஏதேனும் பழுது ஏற்படும் வரை கவனிக்கப்படாத நுட்பமான ஆனால் முக்கியமான விவரங்கள் உள்ளன. வலுவான சர்வதேச இணைய இருப்புக்கு அடித்தளமான அத்தகைய ஒரு விவரம் எழுத்துரு குறியாக்கம் (character encoding) ஆகும். குறிப்பாக CSS-க்கு, இது @charset விதியை உள்ளடக்கியது. இது சிறியதாகத் தோன்றினாலும், உங்கள் ஸ்டைல்ஷீட்கள் உங்கள் உள்ளடக்கத்தின் அதே மொழியில் பேசுவதை உறுதி செய்வதற்கும், உலகளாவிய பார்வையாளர்களுக்கு உரையைத் தடையின்றி காண்பிப்பதற்கும் @charset-ஐப் புரிந்துகொண்டு சரியாகச் செயல்படுத்துவது மிக முக்கியம்.

இந்த விரிவான வழிகாட்டி @charset-இன் முக்கியத்துவத்தை ஆழமாக ஆராய்கிறது, இணையத்தில் எழுத்துரு குறியாக்கத்தின் பரந்த தளத்தில் அதன் பங்கினை விளக்குகிறது. இது ஏன் முக்கியமானது, மற்ற குறியாக்க அறிவிப்புகளுடன் இது எவ்வாறு தொடர்பு கொள்கிறது, அதன் பயன்பாட்டிற்கான சிறந்த நடைமுறைகள், மற்றும் தவிர்க்க வேண்டிய பொதுவான தவறுகள் ஆகியவற்றை நாம் வெளிக்கொணர்வோம், இவை அனைத்தும் உண்மையான உலகளாவிய இணைய அனுபவத்தை உருவாக்கும் கண்ணோட்டத்தில் பார்க்கப்படும்.

எழுத்துரு குறியாக்கத்தைப் புரிந்துகொள்ளுதல்: அடிப்படை

@charset-ஐ முழுமையாகப் பாராட்டுவதற்கு முன், நாம் முதலில் எழுத்துரு குறியாக்கத்தின் கருத்தைப் புரிந்துகொள்ள வேண்டும். அதன் மையத்தில், எழுத்துரு குறியாக்கம் என்பது எழுத்துகளுக்கு – எழுத்துக்கள், எண்கள், சின்னங்கள், மற்றும் ஈமோஜிகள் – தனித்துவமான எண் மதிப்புகளை வழங்கும் ஒரு அமைப்பாகும், இது அவற்றை டிஜிட்டல் முறையில் சேமிக்கவும், அனுப்பவும், மற்றும் காட்டவும் உதவுகிறது. ஒரு நிலையான குறியாக்கம் இல்லாமல், பைட்டுகளின் வரிசை வெறும் தரவு மட்டுமே; அதனுடன், அந்த பைட்டுகள் அர்த்தமுள்ள உரையாக மாறுகின்றன.

எழுத்துருக் கணங்களின் பரிணாமம்

• ASCII (தகவல் பரிமாற்றத்திற்கான அமெரிக்கத் தரக் குறியீடு): இதுவே ஆரம்பகால மற்றும் மிகவும் அடிப்படையான குறியாக்கத் தரநிலை. ASCII 128 எழுத்துகளை (0-127) வரைபடமாக்குகிறது, முக்கியமாக ஆங்கில எழுத்துக்கள், எண்கள், மற்றும் அடிப்படை நிறுத்தற்குறிகளை உள்ளடக்கியது. அதன் எளிமை புரட்சிகரமாக இருந்தது, ஆனால் கணினி உலகம் முழுவதும் விரிவடைந்ததால் அதன் வரையறுக்கப்பட்ட எல்லை விரைவாக ஒரு தடையாக மாறியது.
• ISO-8859-1 (Latin-1): இது ASCII-இன் ஒரு நீட்டிப்பாகும், மேற்கு ஐரோப்பிய மொழிகளை ஆதரிக்க மேலும் 128 எழுத்துகளை (128-255) சேர்க்கிறது, இதில் é, ü, ç போன்ற டயக்ரிடிக்ஸ் (accents, umlauts) கொண்ட எழுத்துகளும் அடங்கும். இது ஒரு குறிப்பிடத்தக்க படியாக இருந்தாலும், சிரிலிக், அரபு அல்லது கிழக்கு ஆசிய எழுத்துகள் போன்ற முற்றிலும் மாறுபட்ட எழுத்துருக்களைப் பயன்படுத்தும் மொழிகளுக்கு இது போதுமானதாக இல்லை.
• உலகளாவிய குறியாக்கத்தின் தேவை: இணையம் ஒரு உலகளாவிய நிகழ்வாக மாறியதால், ஒற்றை-பைட் குறியாக்கங்களின் வரம்புகள் வெளிப்படையாகத் தெரிந்தன. பல மொழிகளில் உள்ளடக்கத்தை வழங்கும் வலைத்தளங்கள் அல்லது பல்வேறு மொழி சமூகங்களைக் குறிவைப்பவை தீர்க்க முடியாத சவால்களை எதிர்கொண்டன. ஒவ்வொரு மனித மொழியிலும் உள்ள ஒவ்வொரு எழுத்தையும், மேலும் பல மனிதரல்லாத சின்னங்களையும் குறிக்கக்கூடிய ஒரு உலகளாவிய குறியாக்கம் தேவைப்பட்டது.

UTF-8: உலகளாவியத் தரநிலை

இங்கே UTF-8 (யூனிகோட் உருமாற்ற வடிவம் - 8-பிட்) வருகிறது, இது இன்று இணையத்திற்கான κυρίαρχ எழுத்துரு குறியாக்கமாகும், அதற்குக் நல்ல காரணமும் உண்டு. UTF-8 என்பது ஒரு மாறி-அகல குறியாக்கமாகும், இது யூனிகோட் தரத்தில் உள்ள எந்த எழுத்தையும் குறிக்க முடியும். யூனிகோட் என்பது உலகின் அனைத்து எழுத்து முறைகளிலிருந்தும் அனைத்து எழுத்துகளையும் உள்ளடக்கும் நோக்கம் கொண்ட ஒரு பெரிய எழுத்துருக் கணம். UTF-8-இன் மாறி-அகலத் தன்மை என்பது:

• பொதுவான ASCII எழுத்துகள் ஒரு பைட்டால் குறிக்கப்படுகின்றன, இது பின்னோக்கி இணக்கத்தன்மை கொண்டதாகவும் ஆங்கில உரைக்குத் திறமையானதாகவும் ஆக்குகிறது.
• பிற எழுத்து முறைகளிலிருந்து வரும் எழுத்துகள் (எ.கா., கிரேக்கம், சிரிலிக், அரபு, சீனம், ஜப்பானியம், கொரியன், இந்தி, தாய்) இரண்டு, மூன்று, அல்லது நான்கு பைட்டுகளால் குறிக்கப்படுகின்றன.
• கலப்புக்-எழுத்துரு உள்ளடக்கத்திற்கு இது மிகவும் திறமையானது, ஏனெனில் இது ஒற்றை-பைட் எழுத்துகளில் இடத்தை வீணாக்காது.
• இது நெகிழ்தன்மை கொண்டது மற்றும் உலாவிகள், இயக்க முறைமைகள், மற்றும் நிரலாக்க மொழிகள் முழுவதும் பரவலாக ஆதரிக்கப்படுகிறது.

அனைத்து புதிய இணைய உள்ளடக்கங்களுக்கும் UTF-8-ஐப் பயன்படுத்துவதே பெரும் பரிந்துரையாகும். இது மேம்பாட்டை எளிதாக்குகிறது, அதிகபட்ச இணக்கத்தன்மையை உறுதி செய்கிறது, மற்றும் உலகளாவிய சென்றடைதலுக்கு இது முக்கியமானது.

CSS @charset விதி: ஒரு ஆழமான பார்வை

எழுத்துரு குறியாக்கத்தைப் புரிந்துகொண்ட நிலையில், நாம் இப்போது CSS @charset விதியில் கவனம் செலுத்தலாம். இந்த விதி ஒரு தனித்துவமான, முக்கிய நோக்கத்தைச் செய்கிறது: ஸ்டைல்ஷீட்டின் எழுத்துரு குறியாக்கத்தைக் குறிப்பிடுவது.

தொடரியல் மற்றும் இடம்

@charset-இன் தொடரியல் நேரடியானது:

@charset "UTF-8";

அல்லது, ஒரு பழைய, குறைவாகப் பரிந்துரைக்கப்படும் குறியாக்கத்திற்கு:

@charset "ISO-8859-1";

அதன் இடம் குறித்து முக்கியமான விதிகள் உள்ளன:

• அது ஸ்டைல்ஷீட்டில் முதன்மையான உறுப்பாக இருக்க வேண்டும். அதற்கு முன் எந்த கருத்துகளும், வெற்று இடமும் (ஒரு விருப்ப பைட்-ஆர்டர் மார்க்கைத் தவிர), வேறு எந்த CSS விதிகளும் அல்லது at-விதிகளும் இருக்கக்கூடாது.
• அது முதல் உறுப்பாக இல்லாவிட்டால், CSS பாகுபடுத்தி அதை வெறுமனே புறக்கணிக்கும், இது சாத்தியமான குறியாக்கச் சிக்கல்களுக்கு வழிவகுக்கும்.
• அது அறிவிக்கப்பட்ட ஸ்டைல்ஷீட்டிற்கு மட்டுமே பொருந்தும். உங்களிடம் பல CSS கோப்புகள் இருந்தால், ஒவ்வொரு கோப்பின் குறியாக்கமும் இயல்புநிலை அல்லது அனுமானிக்கப்பட்ட குறியாக்கத்திலிருந்து வேறுபடக்கூடும் என்றால், ஒவ்வொரு கோப்புக்கும் அதன் சொந்த @charset விதி தேவை.

இது ஏன் தேவைப்படுகிறது?

உங்கள் CSS கோப்பில் குறிப்பிட்ட எழுத்து வரம்புகளுடன் தனிப்பயன் எழுத்துருக்கள் உள்ளன, அல்லது சிறப்பு சின்னங்களுடன் உள்ளடக்க பண்புகளைப் பயன்படுத்துகிறது, அல்லது ASCII அல்லாத எழுத்துக்களைக் கொண்ட வகுப்புகளின் பெயர்களை வரையறுக்கிறது (பொதுவாக இது வகுப்புப் பெயர்களுக்கு ஊக்கமளிக்கப்படுவதில்லை என்றாலும், இது சாத்தியம்) என்று கற்பனை செய்து பாருங்கள். உங்கள் CSS கோப்பின் பைட்டுகளை உலாவி சேமித்த முறையிலிருந்து வேறுபட்ட குறியாக்கத்தைப் பயன்படுத்தி விளக்கினால், அந்த எழுத்துக்கள் "மொஜிபேக்" (乱れ文字 - "குழப்பமான எழுத்துக்கள்" என்பதற்கான ஜப்பானிய சொல்) என அழைக்கப்படும் சிதைந்த உரையாகத் தோன்றும்.

@charset விதி உலாவிக்கு வெளிப்படையாகக் கூறுகிறது, "ஏய், இந்த CSS கோப்பு இந்த குறிப்பிட்ட எழுத்துரு குறியாக்கத்தைப் பயன்படுத்தி எழுதப்பட்டது. தயவுசெய்து அதன் பைட்டுகளை அதற்கேற்ப விளக்கவும்." இந்த வெளிப்படையான அறிவிப்பு, குறிப்பாக மற்ற குறியாக்க அறிவிப்புகளில் முரண்பாடுகள் அல்லது தெளிவற்ற நிலைகள் இருக்கும்போது, தவறான விளக்கங்களைத் தடுக்க உதவுகிறது.

குறியாக்க அறிவிப்புகளின் படிநிலை

ஒரு CSS கோப்பின் குறியாக்கத்தை உலாவி தீர்மானிக்கும் ஒரே வழி @charset விதி மட்டுமல்ல என்பதைப் புரிந்துகொள்வது முக்கியம். உலாவிகள் பின்பற்றும் ஒரு குறிப்பிட்ட முன்னுரிமைப் படிநிலை உள்ளது:

1. HTTP Content-Type ஹெடர்: இது மிகவும் அதிகாரப்பூர்வமான மற்றும் விரும்பப்படும் முறையாகும். ஒரு வலை சேவையகம் ஒரு CSS கோப்பை வழங்கும்போது, அது charset அளவுருவுடன் ஒரு HTTP Content-Type ஹெடரைச் சேர்க்கலாம், எடுத்துக்காட்டாக: Content-Type: text/css; charset=UTF-8. இந்த ஹெடர் இருந்தால், உலாவி எல்லாவற்றிற்கும் மேலாக அதை மதிக்கும்.

   இந்த முறை சக்தி வாய்ந்தது, ஏனெனில் இது சேவையகத்தால் அமைக்கப்படுகிறது, உலாவி கோப்பின் உள்ளடக்கத்தைப் பாகுபடுத்தத் தொடங்கும் முன்பே நிலைத்தன்மையை உறுதி செய்கிறது. இது பெரும்பாலும் சேவையக மட்டத்தில் (எ.கா., Apache, Nginx) அல்லது சேவையக-பக்க ஸ்கிரிப்டிங்கில் (எ.கா., PHP, Node.js) கட்டமைக்கப்படுகிறது.

2. பைட் ஆர்டர் மார்க் (BOM): BOM என்பது ஒரு கோப்பின் தொடக்கத்தில் உள்ள ஒரு சிறப்பு பைட் வரிசையாகும், இது அதன் குறியாக்கத்தைக் குறிக்கிறது (குறிப்பாக UTF-8, UTF-16 போன்ற UTF குறியாக்கங்களுக்கு). UTF-8 BOM-கள் தொழில்நுட்ப ரீதியாக விருப்பமானவை மற்றும் சில சமயங்களில் சிக்கல்களை ஏற்படுத்தக்கூடும் (எ.கா., பழைய உலாவிகள்/சேவையகங்களில் கூடுதல் வெற்று இடம்), அதன் இருப்பு உலாவிக்கு, "இந்த கோப்பு UTF-8 குறியாக்கம் செய்யப்பட்டது" என்று கூறுகிறது. ஒரு BOM இருந்தால், அது @charset விதியை விட முன்னுரிமை பெறும்.

   UTF-8-க்கு, BOM வரிசை EF BB BF ஆகும். பல உரை திருத்திகள் "UTF-8 with BOM" என சேமிக்கும்போது தானாகவே ஒரு BOM-ஐச் சேர்க்கின்றன. சாத்தியமான ரெண்டரிங் குறைபாடுகள் அல்லது பாகுபடுத்தி சிக்கல்களைத் தவிர்க்க, வலை உள்ளடக்கத்திற்கு UTF-8 கோப்புகளை BOM இல்லாமல் சேமிக்க பொதுவாக பரிந்துரைக்கப்படுகிறது.

3. @charset விதி: ஒரு HTTP Content-Type ஹெடரோ அல்லது BOM-ஓ இல்லாத பட்சத்தில், உலாவி CSS கோப்பில் முதல் அறிக்கையாக @charset விதியைத் தேடும். அது காணப்பட்டால், அது அறிவிக்கப்பட்ட குறியாக்கத்தைப் பயன்படுத்தும்.
4. பெற்றோர் ஆவண குறியாக்கம்: மேலே உள்ள எதுவும் குறிப்பிடப்படவில்லை என்றால், உலாவி பொதுவாக CSS கோப்புடன் இணைக்கும் HTML ஆவணத்தின் குறியாக்கத்திற்குத் திரும்பும். உதாரணமாக, உங்கள் HTML ஆவணத்தில் <meta charset="UTF-8"> இருந்து, CSS-க்கு வேறு குறியாக்கக் குறிப்புகள் எதுவும் இல்லை என்றால், உலாவி CSS-ம் UTF-8 என்று கருதும்.
5. இயல்புநிலை குறியாக்கம்: கடைசி வழியாக, எந்தவொரு மூலத்திலிருந்தும் வெளிப்படையான குறியாக்கத் தகவல் கிடைக்கவில்லை என்றால், உலாவி அதன் இயல்புநிலை குறியாக்கத்தைப் பயன்படுத்தும் (இது மாறுபடும் ஆனால் நவீன உலாவிகளில் பெரும்பாலும் UTF-8, அல்லது பழையவற்றில் ஒரு வட்டார-குறிப்பிட்ட குறியாக்கம்). இது மிகவும் ஆபத்தான சூழ்நிலை மற்றும் எல்லா விலையிலும் தவிர்க்கப்பட வேண்டும், ஏனெனில் இது மொஜிபேக்கின் மிகவும் பொதுவான காரணமாகும்.

இந்த படிநிலை, சில சமயங்களில் ஒரு CSS கோப்பு வெளிப்படையான @charset விதி இல்லாமல் கூட ஏன் சரியாகக் காட்டப்படுகிறது என்பதை விளக்குகிறது, குறிப்பாக உங்கள் சேவையகம் தொடர்ந்து UTF-8 ஹெடர்களை அனுப்பினால் அல்லது உங்கள் HTML ஆவணம் UTF-8-ஐ அறிவித்தால்.

எப்போது மற்றும் ஏன் @charset-ஐப் பயன்படுத்த வேண்டும்

படிநிலையைக் கருத்தில் கொண்டு, ஒருவர் யோசிக்கலாம்: @charset எப்போதும் அவசியமா? பதில் நுணுக்கமானது, ஆனால் பொதுவாக, இது ஒரு நல்ல நடைமுறை, குறிப்பாக சில சூழ்நிலைகளில்:

1. ஒரு வலுவான மாற்று வழியாக: உங்கள் சேவையகம் UTF-8 ஹெடர்களை அனுப்பும்படி கட்டமைக்கப்பட்டிருந்தாலும், உங்கள் CSS கோப்பின் மேல் @charset "UTF-8";-ஐச் சேர்ப்பது ஒரு வெளிப்படையான, உள் அறிவிப்பாகச் செயல்படுகிறது. சேவையக உள்ளமைவுகள் சீரற்றதாக இருக்கும் மேம்பாட்டுச் சூழல்களில் அல்லது கோப்புகள் சேவையகம் இல்லாமல் உள்ளூரில் பார்க்கப்படும்போது இது குறிப்பாக பயனுள்ளதாக இருக்கும்.
2. நிலைத்தன்மை மற்றும் தெளிவுக்காக: இது CSS கோப்பின் குறியாக்கத்தை, கோப்பைத் திறக்கும் எவருக்கும், அது ஒரு டெவலப்பர், ஒரு உள்ளடக்க மேலாளர், அல்லது ஒரு உள்ளூர்மயமாக்கல் நிபுணராக இருந்தாலும், வெளிப்படையாகக் காட்டுகிறது. இந்தத் தெளிவு, குறிப்பாக சர்வதேச அணிகளுக்கு இடையே ஒத்துழைக்கும்போது, தெளிவற்ற தன்மையையும் சாத்தியமான பிழைகளையும் குறைக்கிறது.
3. இடம்பெயரும்போது அல்லது மரபு அமைப்புகளுடன் கையாளும்போது: நீங்கள் வெவ்வேறு குறியாக்கங்களுடன் (எ.கா., ISO-8859-1 அல்லது Windows-1252) உருவாக்கப்பட்ட பழைய CSS கோப்புகளுடன் பணிபுரிகிறீர்கள் என்றால், மற்றும் அந்த குறியாக்கங்களைத் தற்காலிகமாக அல்லது இடம்பெயர்வு கட்டத்தின் போது பாதுகாக்க வேண்டும் என்றால், அந்த கோப்புகளைச் சரியாக விளக்க @charset அவசியமாகிறது.
4. CSS-இல் ASCII அல்லாத எழுத்துக்களைப் பயன்படுத்தும்போது: பொதுவாக வாசிப்புத்திறன் மற்றும் பராமரிப்புத்திறனுக்காக ஊக்கமளிக்கப்படாவிட்டாலும், CSS அடையாளங்காட்டிகளில் (வகுப்புப் பெயர்கள் அல்லது எழுத்துருப் பெயர்கள் போன்றவை) ASCII அல்லாத எழுத்துக்களைக் கொண்டிருக்க அனுமதிக்கிறது, அவை எஸ்கேப் செய்யப்பட்டாலோ அல்லது கோப்பின் குறியாக்கம் அவற்றைச் சரியாகக் கையாண்டாலோ. உதாரணமாக, நீங்கள் ஒரு எழுத்துரு குடும்பத்தை font-family: "Libre Baskerville Cyrillic"; என வரையறுத்தால் அல்லது content பண்புகளில் குறிப்பிட்ட எழுத்துச் சின்னங்களைப் பயன்படுத்தினால் (யூரோ சின்னத்திற்கு content: '€';, அல்லது நேரடியாக content: '€';), CSS கோப்பின் குறியாக்கம் சரியாக அறிவிக்கப்படுவதை உறுதி செய்வது அவசியமாகிறது.

   @charset "UTF-8";
   .currency-symbol::before {
       content: "€"; /* UTF-8 யூரோ சின்னம் */
   }
   
   .multilingual-text::after {
       content: "안녕하세요"; /* கொரிய எழுத்துகள் */
   }
   
           

   சரியான @charset (அல்லது பிற வலுவான குறியாக்கக் குறிப்புகள்) இல்லாமல், இந்த எழுத்துக்கள் கேள்விக்குறிகள் அல்லது பிற தவறான சின்னங்களாக ரெண்டர் ஆகலாம்.

5. வெவ்வேறு களங்களில் உள்ள வெளிப்புற ஸ்டைல்ஷீட்கள்: வழக்கமான சொத்துக்களுக்கு இது குறைவாக இருந்தாலும், நீங்கள் முற்றிலும் மாறுபட்ட களங்களில் ஹோஸ்ட் செய்யப்பட்ட CSS கோப்புகளுடன் இணைக்கிறீர்கள் என்றால், அவற்றின் சேவையக உள்ளமைவுகள் கணிசமாக வேறுபடலாம். ஒரு வெளிப்படையான @charset எதிர்பாராத குறியாக்கப் பொருத்தமின்மைகளுக்கு எதிராக கூடுதல் வலுவான அடுக்கை வழங்க முடியும்.

சுருக்கமாக, UTF-8 என்பது உலகளவில் பரிந்துரைக்கப்பட்ட குறியாக்கம் மற்றும் சேவையக ஹெடர்கள் மிகவும் வலுவான பொறிமுறையாக இருந்தாலும், @charset "UTF-8"; ஒரு சிறந்த பாதுகாப்பாகவும், உங்கள் ஸ்டைல்ஷீட்டிற்குள் ஒரு தெளிவான நோக்க அறிவிப்பாகவும் செயல்படுகிறது, இது பெயர்வுத்திறனை மேம்படுத்துகிறது மற்றும் உலகளாவிய பார்வையாளர்களுக்கான குறியாக்கம் தொடர்பான சிக்கல்களின் வாய்ப்பைக் குறைக்கிறது.

உலகளாவிய எழுத்துரு குறியாக்கத்திற்கான சிறந்த நடைமுறைகள்

ஒரு தடையற்ற, உலகளவில் அணுகக்கூடிய இணைய அனுபவத்தை உறுதிப்படுத்த, உங்கள் அனைத்து இணைய சொத்துக்களிலும் ஒரு நிலையான குறியாக்க உத்தியைக் கடைப்பிடிப்பது முக்கியம். இங்கே சிறந்த நடைமுறைகள், இதில் @charset அதன் பங்கைக் கொண்டுள்ளது:

1. எல்லா இடங்களிலும் UTF-8-ஐத் தரப்படுத்தவும்

இது பொன் விதி. UTF-8-ஐ உங்கள் இயல்புநிலை மற்றும் உலகளாவிய குறியாக்கமாக மாற்றவும்:

• அனைத்து HTML ஆவணங்கள்: உங்கள் HTML-இன் <head> பிரிவில் <meta charset="UTF-8">-ஐ வெளிப்படையாக அறிவிக்கவும். இது முதல் மெட்டா குறிச்சொற்களில் ஒன்றாக இருக்க வேண்டும்.
• அனைத்து CSS ஸ்டைல்ஷீட்கள்: உங்கள் எல்லா .css கோப்புகளையும் UTF-8 ஆக சேமிக்கவும். கூடுதலாக, ஒவ்வொரு CSS கோப்பின் முதல் வரியாக @charset "UTF-8";-ஐச் சேர்க்கவும்.
• அனைத்து JavaScript கோப்புகள்: உங்கள் .js கோப்புகளை UTF-8 ஆக சேமிக்கவும். JavaScript-இல் @charset-க்கு சமமான எதுவும் இல்லை என்றாலும், நிலைத்தன்மை முக்கியம்.
• சேவையக உள்ளமைவு: உங்கள் வலை சேவையகத்தை (Apache, Nginx, IIS, போன்றவை) அனைத்து உரை அடிப்படையிலான உள்ளடக்கத்தையும் Content-Type: text/html; charset=UTF-8 அல்லது Content-Type: text/css; charset=UTF-8 ஹெடருடன் வழங்கும்படி கட்டமைக்கவும். இது மிகவும் வலுவான மற்றும் விரும்பப்படும் முறையாகும்.
• தரவுத்தள குறியாக்கம்: உங்கள் தரவுத்தளங்கள் (எ.கா., MySQL, PostgreSQL) UTF-8-ஐப் பயன்படுத்தும்படி கட்டமைக்கப்பட்டுள்ளதா என்பதை உறுதிப்படுத்தவும் (குறிப்பாக MySQL-க்கு utf8mb4, எல்லா யூனிகோட் எழுத்துகளையும், ஈமோஜிகள் உட்பட, முழுமையாக ஆதரிக்க).
• மேம்பாட்டுச் சூழல்: உங்கள் உரை திருத்தி, IDE மற்றும் பதிப்புக் கட்டுப்பாட்டு அமைப்பை இயல்புநிலையாக UTF-8-க்கு கட்டமைக்கவும். இது தற்செயலாக வேறு குறியாக்கத்தில் சேமிப்பதைத் தடுக்கிறது.

உங்கள் முழு அடுக்கிலும் தொடர்ந்து UTF-8-ஐப் பயன்படுத்துவதன் மூலம், குறியாக்கம் தொடர்பான சிக்கல்களின் வாய்ப்புகளை வியத்தகு முறையில் குறைக்கிறீர்கள், எந்த மொழியில், எந்த எழுத்துருவில் உள்ள உரையும், உலகெங்கிலும் உள்ள பயனர்களுக்கு நோக்கம் கொண்டபடி காட்டப்படுவதை உறுதி செய்கிறீர்கள்.

2. கோப்புகளை எப்போதும் UTF-8 ஆக (BOM இல்லாமல்) சேமிக்கவும்

பெரும்பாலான நவீன உரை திருத்திகள் (VS Code, Sublime Text, Atom, Notepad++ போன்றவை) சேமிக்கும்போது குறியாக்கத்தைக் குறிப்பிட உங்களை அனுமதிக்கின்றன. எப்போதும் "UTF-8" அல்லது "UTF-8 without BOM" என்பதைத் தேர்வு செய்யவும். குறிப்பிட்டுள்ளபடி, ஒரு BOM குறியாக்கத்தைக் குறிக்கிறதென்றாலும், அது சில நேரங்களில் சிறிய பாகுபடுத்தல் சிக்கல்கள் அல்லது கண்ணுக்குத் தெரியாத எழுத்துக்களை ஏற்படுத்தக்கூடும், எனவே வலை உள்ளடக்கத்திற்கு இதைத் தவிர்ப்பது பொதுவாக சிறந்தது.

3. சரிபார்த்து சோதிக்கவும்

• உலாவி டெவலப்பர் கருவிகள்: உங்கள் CSS கோப்புகளுக்கான HTTP ஹெடர்களை ஆய்வு செய்ய உங்கள் உலாவியின் டெவலப்பர் கருவிகளைப் பயன்படுத்தவும். Content-Type ஹெடரில் charset=UTF-8 உள்ளதா என்பதை உறுதிப்படுத்தவும்.
• குறுக்கு-உலாவி மற்றும் குறுக்கு-சாதன சோதனை: ஏதேனும் ரெண்டரிங் முரண்பாடுகளைப் பிடிக்க, பல்வேறு உலாவிகளிலும் (Chrome, Firefox, Safari, Edge) மற்றும் இயக்க முறைமைகளிலும், மொபைல் சாதனங்கள் உட்பட, உங்கள் வலைத்தளத்தைச் சோதிக்கவும்.
• சர்வதேசமயமாக்கப்பட்ட உள்ளடக்க சோதனை: உங்கள் தளம் பல மொழிகளை ஆதரித்தால், வெவ்வேறு எழுத்துருக்களில் (எ.கா., அரபு, ரஷ்யன், சீனம், தேவநாகரி) உள்ளடக்கத்துடன் சோதித்து, எல்லா எழுத்துகளும் சரியாக ரெண்டர் செய்யப்படுவதை உறுதிப்படுத்தவும். அடிப்படை பன்மொழித் தளத்திற்கு (BMP) வெளியே இருக்கக்கூடிய எழுத்துகளுக்கு, சில ஈமோஜிகள் போன்றவை, சிறப்பு கவனம் செலுத்துங்கள், அவற்றுக்கு UTF-8-இல் நான்கு பைட்டுகள் தேவைப்படும்.

4. சர்வதேச எழுத்துகளுக்கு மாற்று எழுத்துருக்களைக் கருத்தில் கொள்ளவும்

எழுத்துரு குறியாக்கம் உலாவி பைட்டுகளைச் சரியாக விளக்குவதை உறுதிசெய்கிறது என்றாலும், அந்த எழுத்துக்களைக் காண்பிப்பது பயனரின் கணினியில் தேவையான கிளிஃப்களைக் கொண்ட எழுத்துருக்கள் இருப்பதைப் பொறுத்தது. ஒரு தனிப்பயன் வலை எழுத்துரு ஒரு குறிப்பிட்ட எழுத்தை ஆதரிக்கவில்லை என்றால், உலாவி ஒரு கணினி எழுத்துருவிற்குத் திரும்பும். உங்கள் எழுத்துரு அடுக்குகள் வலுவானவை என்பதை உறுதிசெய்து, உங்கள் முதன்மை வலை எழுத்துருக்களில் இல்லாத எழுத்துக்களைக் கையாள, பொதுவான எழுத்துரு குடும்பங்களை (sans-serif, serif போன்றவை) மாற்று வழிகளாகச் சேர்க்கவும்.

பொதுவான தவறுகள் மற்றும் சரிசெய்தல்

சிறந்த நடைமுறைகள் இருந்தபோதிலும், குறியாக்கச் சிக்கல்கள் எப்போதாவது ஏற்படலாம். @charset மற்றும் எழுத்துரு குறியாக்கம் தொடர்பான பொதுவான சிக்கல்களை அடையாளம் கண்டு தீர்ப்பது எப்படி என்பது இங்கே:

1. @charset-இன் தவறான இடம்

மிகவும் அடிக்கடி ஏற்படும் பிழை, @charset-ஐ முதல் வரியைத் தவிர வேறு எங்காவது வைப்பதாகும். அதற்கு முன் கருத்துகள், வெற்று வரிகள் அல்லது பிற விதிகள் இருந்தால், அது புறக்கணிக்கப்படும்.

/* எனது ஸ்டைல்ஷீட் */
@charset "UTF-8"; /* இது சரியானது */

/* எனது ஸ்டைல்ஷீட் */

@charset "UTF-8"; /* தவறு: முன் வெற்று இடம் */

/* எனது ஸ்டைல்ஷீட் */
@import url("reset.css");
@charset "UTF-8"; /* தவறு: @import முன் உள்ளது */

தீர்வு: எப்போதும் @charset உங்கள் CSS கோப்பில் முழுமையான முதல் அறிவிப்பாக இருப்பதை உறுதிசெய்யவும்.

2. கோப்பு குறியாக்கத்திற்கும் அறிவிக்கப்பட்ட குறியாக்கத்திற்கும் இடையிலான பொருத்தமின்மை

உங்கள் CSS கோப்பு, ISO-8859-1 என சேமிக்கப்பட்டிருந்தால், ஆனால் நீங்கள் @charset "UTF-8"; என அறிவித்தால், ASCII வரம்பிற்கு வெளியே உள்ள எழுத்துக்கள் தவறாக ரெண்டர் ஆக வாய்ப்புள்ளது. கோப்பு UTF-8 ஆக இருந்து, ஆனால் ஒரு பழைய குறியாக்கமாக அறிவிக்கப்பட்டாலும் இது பொருந்தும்.

தீர்வு: எப்போதும் உங்கள் கோப்பை நீங்கள் அறிவிக்கும் குறியாக்கத்தில் (முன்னுரிமை UTF-8) சேமித்து, சேவையக ஹெடர்கள் மற்றும் HTML மெட்டா குறிச்சொற்களுடன் நிலைத்தன்மையை உறுதிசெய்யவும். தேவைப்பட்டால் கோப்புகளை மாற்ற, ஒரு உரை திருத்தியின் "Save As..." அல்லது "Change Encoding" விருப்பங்களைப் பயன்படுத்தவும்.

3. சேவையக உள்ளமைவு @charset-ஐ மீறுகிறது

உங்கள் சேவையகம் உங்கள் @charset விதியை விட வேறுபட்ட குறியாக்கத்தைக் குறிப்பிடும் ஒரு HTTP Content-Type ஹெடரை அனுப்பினால், சேவையகத்தின் ஹெடர் வெற்றிபெறும். உங்கள் @charset சரியாக இருந்தாலும், இது எதிர்பாராத மொஜிபேக்கிற்கு வழிவகுக்கும்.

தீர்வு: அனைத்து CSS கோப்புகளுக்கும் எப்போதும் Content-Type: text/css; charset=UTF-8 அனுப்புமாறு உங்கள் வலை சேவையகத்தை உள்ளமைக்கவும். இது மிகவும் நம்பகமான அணுகுமுறை.

4. UTF-8 BOM சிக்கல்கள்

நவீன கருவிகளுடன் இது குறைவாக இருந்தாலும், தேவையற்ற UTF-8 BOM சில நேரங்களில் பாகுபடுத்துதலில் தலையிடக்கூடும், குறிப்பாக பழைய உலாவி பதிப்புகள் அல்லது சேவையக அமைப்புகளில், சில சமயங்களில் கோப்பின் தொடக்கத்தில் கண்ணுக்குத் தெரியாத எழுத்துக்கள் அல்லது தளவமைப்பு மாற்றங்களுக்கு வழிவகுக்கும்.

தீர்வு: உங்கள் எல்லா UTF-8 கோப்புகளையும் BOM இல்லாமல் சேமிக்கவும். பல உரை திருத்திகள் இந்த விருப்பத்தை வழங்குகின்றன. நீங்கள் சிக்கல்களை எதிர்கொண்டால், ஒரு ஹெக்ஸ் எடிட்டர் அல்லது மறைக்கப்பட்ட எழுத்துக்களைக் காட்டக்கூடிய ஒரு சிறப்பு உரை திருத்தியைப் பயன்படுத்தி BOM உள்ளதா என சரிபார்க்கவும்.

5. தேர்வாளர்கள்/உள்ளடக்கத்தில் உள்ள சிறப்பு எழுத்துகளுக்கான எழுத்து எஸ்கேப்பிங்

CSS அடையாளங்காட்டிகளுக்குள் (வகுப்புப் பெயர்கள் போன்றவை, உலகளாவிய திட்டங்களுக்குப் பரிந்துரைக்கப்படவில்லை என்றாலும்) அல்லது சரம் மதிப்புகளில் (போலி-உறுப்புகளுக்கு content போன்றவை) நேரடியாக ASCII அல்லாத எழுத்துக்களைப் பயன்படுத்த வேண்டும் என்றால், நீங்கள் CSS எஸ்கேப்களையும் (\ அதைத் தொடர்ந்து யூனிகோட் குறியீட்டு புள்ளி) பயன்படுத்தலாம். உதாரணமாக, யூரோ சின்னத்திற்கு content: "\20AC";. இந்த அணுகுமுறை கோப்பின் குறியாக்கத்தைப் பொருட்படுத்தாமல் இணக்கத்தன்மையை உறுதி செய்கிறது, ஆனால் இது ஸ்டைல்ஷீட்டை மனிதர்கள் படிப்பதற்கு கடினமாக்குகிறது.

.euro-icon::before {
    content: "\20AC"; /* யூரோ சின்னத்திற்கான யூனிகோட் எஸ்கேப் */
}

.korean-text::after {
    content: "\C548\B155\D558\C138\C694"; /* '안녕하세요' என்பதற்கான யூனிகோட் எஸ்கேப்கள் */
}

@charset "UTF-8";-ஐப் பயன்படுத்துவதும், கோப்பு சரியாக UTF-8 ஆக சேமிக்கப்படும்போது எழுத்துக்களை நேரடியாக உட்பொதிப்பதும் பொதுவாக வாசிப்புத்திறனுக்காக விரும்பப்படுகிறது. குறிப்பிட்ட சூழ்நிலைகளுக்கு அல்லது முழுமையான உறுதி தேவைப்படும்போது எஸ்கேப்பிங் ஒரு வலுவான மாற்றாகும்.

சரியான குறியாக்கத்தின் உலகளாவிய தாக்கம்

எழுத்துரு குறியாக்கத்தின் தொழில்நுட்ப ரீதியான விவரம், மற்றும் அதன் நீட்டிப்பாக, @charset விதி, உங்கள் வலை உள்ளடக்கத்தின் உலகளாவிய சென்றடைதல் மற்றும் அணுகல்தன்மைக்கு ஆழமான தாக்கங்களைக் கொண்டுள்ளது:

• உலகளவில் "மொஜிபேக்"-ஐத் தடுத்தல்: சிதைந்த உரையைப் போல பயனர் அனுபவத்தை எதுவும் உடைக்காது. அது ஒரு மெனு உருப்படி, ஒரு ஸ்டைல் செய்யப்பட்ட உள்ளடக்கம், அல்லது ஒரு பொத்தான் லேபிளாக இருந்தாலும், தவறான குறியாக்கம் உரையைப் படிக்க முடியாததாக மாற்றக்கூடும், வெவ்வேறு மொழிகளைப் பேசும் அல்லது லத்தீன் அல்லாத எழுத்துருக்களைப் பயன்படுத்தும் பயனர்களை உடனடியாக அந்நியப்படுத்துகிறது. சரியான குறியாக்கத்தை உறுதி செய்வது எல்லா இடங்களிலும் உள்ள பயனர்களுக்கு இந்த "உரை சிதைவைத்" தடுக்கிறது.
• உண்மையான சர்வதேசமயமாக்கலை (i18n) இயக்குதல்: உலகளாவிய பார்வையாளர்களுக்கு சேவை செய்ய வடிவமைக்கப்பட்ட வலைத்தளங்களுக்கு, வலுவான சர்வதேசமயமாக்கல் பேச்சுவார்த்தைக்குட்பட்டதல்ல. இது பல மொழிகளை ஆதரித்தல், வெவ்வேறு தேதி/நேர வடிவங்கள், நாணய சின்னங்கள், மற்றும் உரை திசைகளை (இடமிருந்து வலம், வலமிருந்து இடம்) உள்ளடக்கியது. சரியான எழுத்துரு குறியாக்கம் இந்த சர்வதேசமயமாக்கல் முயற்சிகள் அனைத்தும் கட்டமைக்கப்படும் அடித்தளமாகும். அது இல்லாமல், மிகவும் அதிநவீன மொழிபெயர்ப்பு அமைப்பு கூட சரியாகக் காட்டத் தவறிவிடும்.
• பகுதிகள் முழுவதும் பிராண்ட் நிலைத்தன்மையை பராமரித்தல்: உங்கள் பிராண்டின் காட்சி அடையாளம் அதன் உரை தோன்றும் விதத்திற்கும் நீண்டுள்ளது. ஒரு பிராண்ட் பெயர் அல்லது கோஷம் தனித்துவமான எழுத்துக்களைக் கொண்டிருந்தால் அல்லது லத்தீன் அல்லாத எழுத்துருவில் வழங்கப்பட்டால், சரியான குறியாக்கம் உங்கள் பிராண்டின் இந்த முக்கியமான அம்சம் பயனரின் இருப்பிடம் அல்லது கணினி அமைப்புகளைப் பொருட்படுத்தாமல், சீராகவும் தொழில் ரீதியாகவும் காட்டப்படுவதை உறுதி செய்கிறது.
• உலகளாவிய தேடலுக்கான SEO-வை மேம்படுத்துதல்: தேடுபொறிகள் உள்ளடக்கத்தை அட்டவணைப்படுத்த சரியாக விளக்கப்பட்ட உரையை பெரிதும் நம்பியுள்ளன. குறியாக்கச் சிக்கல்களால் உங்கள் எழுத்துக்கள் சிதைந்திருந்தால், தேடுபொறிகள் உங்கள் உள்ளடக்கத்தைச் சரியாகப் புரிந்துகொண்டு வகைப்படுத்தப் போராடக்கூடும், இது உங்கள் உலகளாவிய தேடுபொறி தரவரிசை மற்றும் கண்டறியும் திறனைப் பாதிக்கக்கூடும்.
• அணுகல்தன்மையை மேம்படுத்துதல்: உதவித் தொழில்நுட்பங்களை (ஸ்கிரீன் ரீடர்கள், உருப்பெருக்கிகள்) நம்பியிருக்கும் பயனர்களுக்கு, சரியான உரை ரெண்டரிங் மிக முக்கியம். சிதைந்த உரை மனிதக் கண்களுக்குப் படிக்க முடியாதது மட்டுமல்லாமல், அணுகல்தன்மை கருவிகளுக்கும் படிக்க முடியாதது, இது உங்கள் உள்ளடக்கத்தை உலகளாவிய பயனர் தளத்தின் ஒரு குறிப்பிடத்தக்க பகுதிக்கு அணுக முடியாததாக ஆக்குகிறது.

இணையம் புவியியல் எல்லைகளைத் தாண்டிய உலகில், எழுத்துரு குறியாக்கத்தைப் புறக்கணிப்பது, இல்லாத இடத்தில் மொழித் தடைகளை உருவாக்குவதற்குச் சமம். தாழ்மையான @charset விதி, சரியாகப் புரிந்து கொள்ளப்பட்டு செயல்படுத்தப்படும்போது, இந்தத் தடைகளை உடைப்பதில் கணிசமாக பங்களிக்கிறது, இது உண்மையான உலகளாவிய மற்றும் உள்ளடக்கிய ஒரு இணையத்தை வளர்க்கிறது.

முடிவுரை: பெரிய தாக்கங்களைக் கொண்ட ஒரு சிறிய விதி

CSS @charset விதி, இணைய மேம்பாட்டின் பரந்த நிலப்பரப்பில் ஒரு சிறிய விவரமாகத் தோன்றினாலும், உங்கள் ஸ்டைல்ஷீட்களின் உலகளாவிய இணக்கத்தன்மை மற்றும் சரியான ரெண்டரிங்கை உறுதி செய்வதில் விகிதாசாரத்தில் பெரிய பங்கைக் கொண்டுள்ளது. இது எழுத்துரு குறியாக்கப் புதிரின் ஒரு அடிப்படைக் கூறு, இது HTTP ஹெடர்கள், BOM-கள் மற்றும் HTML மெட்டா குறிச்சொற்களுடன் இணைந்து செயல்பட்டு, உங்கள் பைட்டுகளின் மொழியை உலாவிக்குத் தெரிவிக்கிறது.

HTML மற்றும் CSS முதல் JavaScript மற்றும் சேவையக உள்ளமைவுகள் வரை - அனைத்து வலை சொத்துக்களிலும் UTF-8-ஐ உங்கள் உலகளாவிய குறியாக்கத் தரமாக ஏற்றுக்கொள்வதன் மூலமும், உங்கள் ஸ்டைல்ஷீட்களின் தொடக்கத்தில் @charset "UTF-8";-ஐ தொடர்ந்து பயன்படுத்துவதன் மூலமும், நீங்கள் ஒரு உண்மையான சர்வதேச வலை இருப்புக்கு ஒரு வலுவான அடித்தளத்தை அமைக்கிறீர்கள். இந்த விடாமுயற்சியான கவனம் "மொஜிபேக்"-ஐத் தடுக்கிறது மற்றும் உங்கள் உள்ளடக்கம், வடிவமைப்பு, மற்றும் பிராண்ட் அடையாளம் உலகின் ஒவ்வொரு பயனருக்கும், அவர்களின் தாய்மொழி அல்லது எழுத்துருவைப் பொருட்படுத்தாமல், குறைபாடின்றி வழங்கப்படுவதை உறுதி செய்கிறது.

நீங்கள் இணையத்திற்காக தொடர்ந்து உருவாக்கும்போது, ஒவ்வொரு எழுத்தும் முக்கியம் என்பதை நினைவில் கொள்ளுங்கள். உங்கள் CSS-இல் உள்ள தாழ்மையான @charset விதியால் முன்னெடுக்கப்படும் ஒரு நிலையான மற்றும் தெளிவான எழுத்துரு குறியாக்க உத்தி, ஒரு தொழில்நுட்ப சம்பிரதாயம் மட்டுமல்ல; இது ஒரு உண்மையான உலகளாவிய, அணுகக்கூடிய, மற்றும் பயனர் நட்பான இணையத்திற்கான ஒரு அர்ப்பணிப்பாகும்.