XML ஆவணங்களுக்கு ஸ்டைலிங் செய்வதற்கான CSS நேம்ஸ்பேஸ்கள் பற்றிய ஆழமான பார்வை. இதில் தொடரியல், பயன்பாடு மற்றும் இணைய டெவலப்பர்களுக்கான சிறந்த நடைமுறைகள் அடங்கும்.
CSS நேம்ஸ்பேஸ் விதி: துல்லியத்துடன் XML-க்கு ஸ்டைலிங் செய்தல்
கேஸ்கேடிங் ஸ்டைல் ஷீட்கள் (CSS) பாரம்பரியமாக HTML ஆவணங்களுக்கு ஸ்டைல் செய்யப் பயன்படுத்தப்படுகின்றன. இருப்பினும், CSS-ஐ XML (Extensible Markup Language) ஆவணங்களுக்கும் பயன்படுத்தலாம். இங்குதான் CSS நேம்ஸ்பேஸ்கள் முக்கிய பங்கு வகிக்கின்றன. அவை ஒரு XML கட்டமைப்பிற்குள் குறிப்பிட்ட எலிமெண்ட்களை அவற்றின் தொடர்புடைய நேம்ஸ்பேஸ் அடிப்படையில் குறிவைக்க ஒரு வழிமுறையை வழங்குகின்றன. XHTML, SVG, MathML மற்றும் பிற XML-அடிப்படையிலான தொழில்நுட்பங்களுடன் பணிபுரியும் டெவலப்பர்களுக்கு CSS நேம்ஸ்பேஸ்களைப் புரிந்துகொள்வது மிகவும் முக்கியம்.
XML நேம்ஸ்பேஸ்கள் என்றால் என்ன?
XML நேம்ஸ்பேஸ்கள் என்பது ஒரு XML ஆவணத்தில் வெவ்வேறு மூலங்களிலிருந்து சொற்களஞ்சியங்களைக் கலக்கும்போது எலிமெண்ட் பெயர் மோதல்களைத் தவிர்ப்பதற்கான ஒரு வழியாகும். ஒரு நேம்ஸ்பேஸ் ஒரு யூனிஃபார்ம் ரிசோர்ஸ் ஐடென்டிஃபையர் (URI) மூலம் அடையாளம் காணப்படுகிறது, இது பொதுவாக ஒரு URL ஆகும். URI ஒரு சரியான ஆதாரத்தைச் சுட்டிக்காட்டத் தேவையில்லை என்றாலும், அது நேம்ஸ்பேஸிற்கான ஒரு தனித்துவமான அடையாளங்காட்டியாக செயல்படுகிறது. உங்கள் XML ஆவணத்திற்குள் ஒரு தனி "உலகத்தை" உருவாக்கும் ஒரு வழியாக இதைக் கருதுங்கள், அங்கு எலிமெண்ட்கள் தனித்துவமாக அடையாளம் காணப்படுகின்றன.
HTML மற்றும் ஸ்கேலபிள் வெக்டர் கிராபிக்ஸ் (SVG) இரண்டையும் கொண்ட ஒரு ஆவணத்தைக் கவனியுங்கள். HTML மற்றும் SVG ஆகிய இரண்டிலும் <title> என்ற எலிமெண்ட்கள் உள்ளன. நேம்ஸ்பேஸ்கள் இல்லாமல், எந்த <title> எலிமெண்ட்டிற்கு ஸ்டைல்களைப் பயன்படுத்துவது என்று உலாவிக்குத் தெரியாது.
XML-ல் நேம்ஸ்பேஸ்கள் எவ்வாறு அறிவிக்கப்படுகின்றன என்பதற்கான ஒரு உதாரணம் இங்கே:
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg">
<head>
<title>Document with Namespaces</title>
</head>
<body>
<h1>Hello World!</h1>
<svg:svg width="100" height="100">
<svg:circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg:svg>
</body>
</html>
இந்த எடுத்துக்காட்டில்:
xmlns="http://www.w3.org/1999/xhtml"என்பது<html>எலிமெண்ட் மற்றும் அதன் அனைத்து சந்ததியினருக்கும் (மீறப்படாவிட்டால்) இயல்புநிலை நேம்ஸ்பேஸை அறிவிக்கிறது. இதன் பொருள்<head>,<title>,<body>, மற்றும்<h1>போன்ற எலிமெண்ட்கள் XHTML நேம்ஸ்பேஸிற்கு சொந்தமானவை.xmlns:svg="http://www.w3.org/2000/svg"என்பது SVG நேம்ஸ்பேஸிற்காக "svg" என்ற முன்னொட்டுடன் ஒரு நேம்ஸ்பேஸை அறிவிக்கிறது.<svg:svg>மற்றும்<svg:circle>போன்ற எலிமெண்ட்கள் SVG நேம்ஸ்பேஸிற்கு சொந்தமானவை.
CSS நேம்ஸ்பேஸ்கள் எவ்வாறு செயல்படுகின்றன
CSS நேம்ஸ்பேஸ்கள், எலிமெண்ட்களை அவற்றின் நேம்ஸ்பேஸ் அடிப்படையில் ஸ்டைல் செய்ய உங்களை அனுமதிக்கின்றன. இது உங்கள் CSS-ல் @namespace at-rule-ஐப் பயன்படுத்தி அடையப்படுகிறது. @namespace விதி ஒரு நேம்ஸ்பேஸ் முன்னொட்டை ஒரு குறிப்பிட்ட நேம்ஸ்பேஸ் URI உடன் இணைக்கிறது.
அடிப்படை தொடரியல் இதுதான்:
@namespace prefix "namespace-uri";
இதில்:
prefixஎன்பது உங்கள் CSS-ல் நீங்கள் பயன்படுத்த விரும்பும் நேம்ஸ்பேஸ் முன்னொட்டு."namespace-uri"என்பது நேம்ஸ்பேஸை அடையாளம் காணும் URI.
நீங்கள் ஒரு நேம்ஸ்பேஸ் முன்னொட்டை அறிவித்தவுடன், அந்த நேம்ஸ்பேஸிற்குச் சொந்தமான எலிமெண்ட்களைக் குறிவைக்க உங்கள் CSS செலக்டர்களில் அதைப் பயன்படுத்தலாம்.
CSS நேம்ஸ்பேஸ்களைப் பயன்படுத்துதல்: நடைமுறை எடுத்துக்காட்டுகள்
எடுத்துக்காட்டு 1: SVG எலிமெண்ட்களுக்கு ஸ்டைலிங் செய்தல்
முந்தைய எடுத்துக்காட்டிலிருந்து SVG வட்டத்திற்கு ஸ்டைல் செய்ய விரும்புகிறீர்கள் என்று வைத்துக்கொள்வோம். நீங்கள் பின்வரும் CSS-ஐப் பயன்படுத்தலாம்:
@namespace svg "http://www.w3.org/2000/svg";
svg|circle {
fill: red;
stroke: blue;
stroke-width: 5px;
}
இந்த CSS-ல்:
@namespace svg "http://www.w3.org/2000/svg";என்பது SVG நேம்ஸ்பேஸை "svg" என்ற முன்னொட்டுடன் அறிவிக்கிறது.svg|circleஎன்பது ஒரு தகுதிவாய்ந்த பெயர் செலக்டர். பைப் சின்னம் (|) நேம்ஸ்பேஸ் முன்னொட்டை எலிமெண்ட் பெயரிலிருந்து பிரிக்கிறது. இந்த செலக்டர் SVG நேம்ஸ்பேஸிற்குள் உள்ள அனைத்து<circle>எலிமெண்ட்களையும் குறிவைக்கிறது.
இந்த CSS வட்டத்தின் நிரப்பு நிறத்தை சிவப்பாகவும், ஸ்ட்ரோக் நிறத்தை நீலமாகவும், ஸ்ட்ரோக் அகலத்தை 5 பிக்சல்களாகவும் மாற்றும்.
எடுத்துக்காட்டு 2: இயல்புநிலை நேம்ஸ்பேஸுடன் XHTML எலிமெண்ட்களுக்கு ஸ்டைலிங் செய்தல்
ஒரு XML ஆவணத்தில் இயல்புநிலை நேம்ஸ்பேஸ் (ரூட் எலிமெண்ட்டில் முன்னொட்டு இல்லாமல் அறிவிக்கப்பட்டது) இருக்கும்போது, CSS-ஐப் பயன்படுத்தி அந்த நேம்ஸ்பேஸிற்குள் உள்ள எலிமெண்ட்களை நீங்கள் குறிவைக்கலாம். நீங்கள் ஒரு நேம்ஸ்பேஸ் முன்னொட்டை வரையறுத்து, பின்னர் நேம்ஸ்பேஸ் முன்னொட்டுடன் யுனிவர்சல் செலக்டரை (*) பயன்படுத்த வேண்டும்.
முந்தைய எடுத்துக்காட்டிலிருந்து XHTML கட்டமைப்பைக் கவனியுங்கள். <h1> எலிமெண்டிற்கு ஸ்டைல் செய்ய, நீங்கள் பின்வரும் CSS-ஐப் பயன்படுத்தலாம்:
@namespace xhtml "http://www.w3.org/1999/xhtml";
xhtml|h1 {
color: green;
font-size: 2em;
}
இந்த CSS-ல்:
@namespace xhtml "http://www.w3.org/1999/xhtml";என்பது XHTML நேம்ஸ்பேஸை "xhtml" என்ற முன்னொட்டுடன் அறிவிக்கிறது.xhtml|h1என்பது XHTML நேம்ஸ்பேஸிற்குள் உள்ள<h1>எலிமெண்ட்டைக் குறிவைக்கிறது.
இந்த CSS <h1> எலிமெண்ட்டின் நிறத்தை பச்சையாகவும் அதன் எழுத்துரு அளவை 2em ஆகவும் மாற்றும்.
எடுத்துக்காட்டு 3: பல நேம்ஸ்பேஸ்களைப் பயன்படுத்துதல்
ஒரே ஆவணத்திற்குள் வெவ்வேறு சொற்களஞ்சியங்களிலிருந்து வரும் எலிமெண்ட்களுக்கு ஸ்டைல் செய்ய உங்கள் CSS-ல் பல நேம்ஸ்பேஸ்களை நீங்கள் வரையறுக்கலாம்.
XHTML மற்றும் MathML-ஐ இணைக்கும் ஒரு XML ஆவணத்தைக் கவனியுங்கள்:
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:mathml="http://www.w3.org/1998/Math/MathML">
<head>
<title>Document with Multiple Namespaces</title>
</head>
<body>
<h1>MathML Example</h1>
<mathml:math>
<mathml:mrow>
<mathml:mi>x</mathml:mi>
<mathml:mo>+</mathml:mo>
<mathml:mi>y</mathml:mi>
</mathml:mrow>
</mathml:math>
</body>
</html>
<h1> எலிமெண்ட் (XHTML) மற்றும் <math> எலிமெண்ட் (MathML) இரண்டிற்கும் ஸ்டைல் செய்ய, நீங்கள் பின்வரும் CSS-ஐப் பயன்படுத்தலாம்:
@namespace xhtml "http://www.w3.org/1999/xhtml";
@namespace mathml "http://www.w3.org/1998/Math/MathML";
xhtml|h1 {
color: blue;
}
mathml|math {
font-size: 1.5em;
}
இந்த CSS <h1> எலிமெண்ட்டை நீல நிறத்தில் ஸ்டைல் செய்யும் மற்றும் <math> எலிமெண்ட்டின் எழுத்துரு அளவை அதிகரிக்கும்.
உலாவி இணக்கத்தன்மை
நவீன உலாவிகளில் CSS நேம்ஸ்பேஸ்களுக்கான ஆதரவு பொதுவாக நன்றாக உள்ளது. இருப்பினும், பழைய உலாவிகளில் ஆதரவு குறைவாகவோ அல்லது இல்லாமலோ இருக்கலாம். இணக்கத்தன்மையை உறுதிப்படுத்த உங்கள் CSS-ஐ வெவ்வேறு உலாவிகளுடன் சோதிப்பது முக்கியம்.
உலாவி ஆதரவின் ஒரு பொதுவான கண்ணோட்டம் இங்கே:
- குரோம்: முழு ஆதரவு
- ஃபயர்பாக்ஸ்: முழு ஆதரவு
- சஃபாரி: முழு ஆதரவு
- எட்ஜ்: முழு ஆதரவு
- இன்டர்நெட் எக்ஸ்ப்ளோரர்: வரையறுக்கப்பட்ட ஆதரவு (IE9+ சில குறைபாடுகளுடன்)
இன்டர்நெட் எக்ஸ்ப்ளோரரின் பழைய பதிப்புகளுக்கு, நீங்கள் நிபந்தனைக்குட்பட்ட கருத்துகள் அல்லது மாற்று ஸ்டைலிங் நுட்பங்களைப் பயன்படுத்த வேண்டியிருக்கலாம்.
CSS நேம்ஸ்பேஸ்களைப் பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள்
- உங்கள் CSS-ன் மேற்பகுதியில் நேம்ஸ்பேஸ்களை அறிவிக்கவும்: இது உங்கள் CSS-ஐ மேலும் படிக்கக்கூடியதாகவும் பராமரிக்கக்கூடியதாகவும் ஆக்குகிறது.
- அர்த்தமுள்ள முன்னொட்டுகளைப் பயன்படுத்தவும்: தொடர்புடைய நேம்ஸ்பேஸைத் தெளிவாகக் குறிக்கும் முன்னொட்டுகளைத் தேர்ந்தெடுக்கவும் (எ.கா., SVG-க்கு "svg", XHTML-க்கு "xhtml").
- முன்னொட்டுப் பயன்பாட்டில் சீராக இருங்கள்: ஒரு நேம்ஸ்பேஸிற்கு ஒரு முன்னொட்டைத் தேர்ந்தெடுத்தவுடன், அதை உங்கள் CSS முழுவதும் சீராகப் பயன்படுத்தவும்.
- வெவ்வேறு உலாவிகளில் சோதிக்கவும்: உங்கள் CSS அனைத்து இலக்கு உலாவிகளிலும் எதிர்பார்த்தபடி செயல்படுகிறதா என்பதை உறுதிப்படுத்தவும்.
- CSS ரீசெட்டைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள்: ஸ்டைல்களை ரீசெட் செய்வது, குறிப்பாக XML ஆவணங்களைக் கையாளும்போது, வெவ்வேறு உலாவிகளில் சீரான ஸ்டைலிங்கை உறுதிசெய்ய உதவும்.
- அனைத்து நேம்ஸ்பேஸ் செய்யப்பட்ட எலிமெண்ட்களுக்கும் தகுதிவாய்ந்த பெயர்களை (முன்னொட்டு|எலிமெண்ட்) பயன்படுத்தவும்: சில உலாவிகள் இயல்புநிலை நேம்ஸ்பேஸில் உள்ள எலிமெண்ட்களை முன்னொட்டு இல்லாமல் ஸ்டைல் செய்ய அனுமதித்தாலும், தெளிவு மற்றும் நிலைத்தன்மைக்காக எப்போதும் தகுதிவாய்ந்த பெயர்களைப் பயன்படுத்துவது சிறந்த நடைமுறையாகும்.
யுனிவர்சல் நேம்ஸ்பேஸ் செலக்டர்
யுனிவர்சல் நேம்ஸ்பேஸ் செலக்டர், ஒற்றை நட்சத்திரக் குறியால் (*) குறிக்கப்படுகிறது, இது எலிமெண்ட்களை அவற்றின் நேம்ஸ்பேஸ் பொருட்படுத்தாமல் குறிவைக்கப் பயன்படுகிறது. இது சில சூழ்நிலைகளில் பயனுள்ளதாக இருக்கும், ஆனால் இது எதிர்பாராத ஸ்டைலிங்கிற்கு வழிவகுக்கும் என்பதால் எச்சரிக்கையுடன் பயன்படுத்தப்பட வேண்டும்.
உதாரணமாக, *|h1 என்பது எந்த நேம்ஸ்பேஸாக இருந்தாலும், எந்தவொரு <h1> எலிமெண்ட்டையும் குறிவைக்கும்.
`default` நேம்ஸ்பேஸைப் பயன்படுத்துதல்
CSS நிலை 4, இயல்புநிலை நேம்ஸ்பேஸைக் குறிப்பிட `default` என்ற முக்கிய சொல்லை அறிமுகப்படுத்துகிறது. இது முதன்மை நேம்ஸ்பேஸ் இயல்புநிலையாக இருக்கும் ஆவணங்களைக் கையாளும்போது மிகவும் சுருக்கமான ஸ்டைலிங்கை அனுமதிக்கிறது.
தொடரியல்:
@namespace default "http://www.w3.org/1999/xhtml";
default|h1 {
color: red;
}
இருப்பினும், இந்த அம்சத்திற்கான உலாவி ஆதரவு இன்னும் வளர்ந்து வருகிறது.
மாற்று ஸ்டைலிங் அணுகுமுறைகள்
XML ஆவணங்களுக்கு ஸ்டைல் செய்ய CSS நேம்ஸ்பேஸ்கள் பரிந்துரைக்கப்பட்ட வழியாக இருந்தாலும், குறிப்பாக நீங்கள் பழைய உலாவிகளை ஆதரிக்க வேண்டியிருந்தால் அல்லது சிக்கலான ஸ்டைலிங் தேவைகளைக் கொண்டிருந்தால், நீங்கள் கருத்தில் கொள்ளக்கூடிய மாற்று அணுகுமுறைகள் உள்ளன.
- ஜாவாஸ்கிரிப்ட்: எலிமெண்ட்களின் நேம்ஸ்பேஸ் அடிப்படையில் ஸ்டைல்களை மாறும் வகையில் சேர்க்க அல்லது மாற்ற ஜாவாஸ்கிரிப்டைப் பயன்படுத்தலாம். இது அதிக நெகிழ்வுத்தன்மையை வழங்குகிறது, ஆனால் மிகவும் சிக்கலானதாகவும் இருக்கலாம்.
- XSLT: எக்ஸ்டென்சிபிள் ஸ்டைல்ஷீட் லாங்குவேஜ் டிரான்ஸ்ஃபர்மேஷன்ஸ் (XSLT) XML ஆவணங்களை HTML அல்லது பிற வடிவங்களுக்கு மாற்றப் பயன்படுகிறது, இது மாற்றப்பட்ட வெளியீட்டை நிலையான CSS-ஐப் பயன்படுத்தி ஸ்டைல் செய்ய உங்களை அனுமதிக்கிறது.
பொதுவான ஆபத்துகள்
- நேம்ஸ்பேஸை அறிவிக்க மறப்பது:
@namespaceஐப் பயன்படுத்தி நேம்ஸ்பேஸை நீங்கள் அறிவிக்கவில்லை என்றால், உங்கள் CSS விதிகள் நோக்கம் கொண்ட எலிமெண்ட்களுக்குப் பயன்படுத்தப்படாது. - தவறான நேம்ஸ்பேஸ் URI-களைப் பயன்படுத்துதல்: ஒவ்வொரு சொற்களஞ்சியத்திற்கும் சரியான நேம்ஸ்பேஸ் URI-ஐப் பயன்படுத்துவதை உறுதிப்படுத்திக் கொள்ளுங்கள்.
- நேம்ஸ்பேஸ் முன்னொட்டுகளைக் குழப்புதல்: குழப்பத்தைத் தவிர்க்க வெவ்வேறு நேம்ஸ்பேஸ்களுக்கு வெவ்வேறு முன்னொட்டுகளைப் பயன்படுத்தவும்.
- உலாவி இணக்கத்தன்மையை புறக்கணித்தல்: உங்கள் CSS வெவ்வேறு உலாவிகளில் எதிர்பார்த்தபடி செயல்படுகிறதா என்பதை உறுதிப்படுத்த சோதிக்கவும்.
- அதிகப்படியான குறிப்பிட்ட செலக்டர்கள்: உங்கள் CSS-ஐப் பராமரிப்பதை கடினமாக்கும் அதிகப்படியான குறிப்பிட்ட செலக்டர்களைப் பயன்படுத்துவதைத் தவிர்க்கவும்.
முடிவுரை
CSS நேம்ஸ்பேஸ்கள் XML ஆவணங்களுக்கு ஸ்டைல் செய்ய ஒரு சக்திவாய்ந்த மற்றும் நெகிழ்வான வழியை வழங்குகின்றன. நேம்ஸ்பேஸ்கள் எவ்வாறு செயல்படுகின்றன மற்றும் அவற்றை உங்கள் CSS-ல் எவ்வாறு பயன்படுத்துவது என்பதைப் புரிந்துகொள்வதன் மூலம், சிக்கலான XML-அடிப்படையிலான பயன்பாடுகளுக்கு நன்கு கட்டமைக்கப்பட்ட மற்றும் பராமரிக்கக்கூடிய ஸ்டைல் ஷீட்களை நீங்கள் உருவாக்கலாம். உலாவி இணக்கத்தன்மை பொதுவாக நன்றாக இருந்தாலும், சீரான பயனர் அனுபவத்தை உறுதிப்படுத்த உங்கள் CSS-ஐ வெவ்வேறு உலாவிகளில் சோதிப்பது முக்கியம். சிறந்த நடைமுறைகளைப் பின்பற்றுவதன் மூலமும் பொதுவான ஆபத்துகளைத் தவிர்ப்பதன் மூலமும், பார்வைக்கு ஈர்க்கக்கூடிய மற்றும் செயல்பாட்டுடன் கூடிய XML-அடிப்படையிலான இணையப் பயன்பாடுகளை உருவாக்க CSS நேம்ஸ்பேஸ்களின் சக்தியை நீங்கள் பயன்படுத்தலாம்.
உங்கள் CSS-ஐ ஒழுங்கமைத்து வைத்திருக்கவும், அர்த்தமுள்ள முன்னொட்டுகளைப் பயன்படுத்தவும், உங்கள் குறியீட்டை எப்போதும் முழுமையாகச் சோதிக்கவும் நினைவில் கொள்ளுங்கள். CSS நேம்ஸ்பேஸ்கள் பற்றிய உறுதியான புரிதலுடன், எந்தவொரு XML ஸ்டைலிங் சவாலையும் நீங்கள் நம்பிக்கையுடன் சமாளிக்கலாம்.