CSS நேம்ஸ்பேஸ் விதி: CSS மூலம் XMLஐ ஸ்டைல் செய்தல்

CSS நேம்ஸ்பேஸ் விதி, @namespace என குறிக்கப்படுகிறது, இது குறிப்பிட்ட XML நேம்ஸ்பேஸ்களுடன் CSS ஸ்டைல் விதிகளை இணைக்க ஒரு வழிமுறையை வழங்குகிறது. இந்த சக்திவாய்ந்த அம்சம் டெவலப்பர்களுக்கு CSS ஐப் பயன்படுத்தி XML ஆவணங்களை ஸ்டைல் செய்ய உதவுகிறது, XML தரவை பார்வைக்கு ஈர்க்கும் வகையில் வழங்க ஒரு நெகிழ்வான மற்றும் திறமையான வழியை வழங்குகிறது. இந்த வழிகாட்டி CSS நேம்ஸ்பேஸ் விதிகள் குறித்த விரிவான கண்ணோட்டத்தை வழங்குகிறது, இதில் சிண்டாக்ஸ், நடைமுறை எடுத்துக்காட்டுகள் மற்றும் சிறந்த நடைமுறைகள் அடங்கும்.

XML நேம்ஸ்பேஸ்களைப் புரிந்துகொள்ளுதல்

CSS நேம்ஸ்பேஸ் விதிகளுக்குள் செல்வதற்கு முன், XML நேம்ஸ்பேஸ்கள் என்ற கருத்தைப் புரிந்துகொள்வது அவசியம். ஒரே XML ஆவணத்தில் வெவ்வேறு மூலங்களிலிருந்து உறுப்புகள் மற்றும் பண்புக்கூறுகளைப் பயன்படுத்தும்போது பெயரிடல் முரண்பாடுகளைத் தவிர்க்க XML நேம்ஸ்பேஸ்கள் ஒரு வழியை வழங்குகின்றன. ஒரு நேம்ஸ்பேஸ் பொதுவாக ஒரு XML ஆவணத்தின் ரூட் உறுப்பில் அல்லது நேம்ஸ்பேஸ் பயன்படுத்தப்பட வேண்டிய எந்தவொரு உறுப்பிலும் xmlns பண்புக்கூற்றைப் பயன்படுத்தி அறிவிக்கப்படுகிறது.

உதாரணமாக, பின்வரும் XML துணுக்கைக் கவனியுங்கள்:

            <book xmlns="http://example.com/book">
  <title>The Hitchhiker's Guide to the Galaxy</title>
  <author>Douglas Adams</author>
</book>
            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், xmlns பண்புக்கூறு book உறுப்பு மற்றும் அதன் குழந்தைகளுக்கான இயல்புநிலை நேம்ஸ்பேஸை அறிவிக்கிறது. வெளிப்படையான நேம்ஸ்பேஸ் முன்னொட்டு இல்லாத அனைத்து உறுப்புகளும் இந்த நேம்ஸ்பேஸிற்கு சொந்தமானவை. நாம் ஒரு முன்னொட்டையும் பயன்படுத்தலாம்:

            <bk:book xmlns:bk="http://example.com/book">
  <bk:title>The Hitchhiker's Guide to the Galaxy</bk:title>
  <bk:author>Douglas Adams</bk:author>
</bk:book>
            

              
                Copy
              
            
          

இங்கே, 'bk' என்ற முன்னொட்டு நேம்ஸ்பேஸுடன் தொடர்புடையது. அந்த நேம்ஸ்பேஸில் உள்ள அனைத்து உறுப்புகளும் இப்போது முன்னொட்டைக் கொண்டுள்ளன.

@namespace விதி

CSS இல் உள்ள @namespace விதியானது ஒரு நேம்ஸ்பேஸ் URI ஐ ஒரு நேம்ஸ்பேஸ் முன்னொட்டுடன் இணைக்க உங்களை அனுமதிக்கிறது. இந்த முன்னொட்டை CSS செலக்டர்களில் அந்த நேம்ஸ்பேஸில் உள்ள உறுப்புகளைக் குறிவைக்கப் பயன்படுத்தலாம். @namespace விதியின் அடிப்படை சிண்டாக்ஸ் பின்வருமாறு:

            @namespace prefix "namespace-uri";
            

              
                Copy
              
            
          

• முன்னொட்டு: இது உங்கள் CSS செலக்டர்களில் நீங்கள் பயன்படுத்தும் நேம்ஸ்பேஸ் முன்னொட்டு. இது எந்தவொரு சரியான CSS அடையாளங்காட்டியாகவும் இருக்கலாம்.
• namespace-uri: இது நீங்கள் குறிவைக்க விரும்பும் XML நேம்ஸ்பேஸின் URI. இது ஒற்றை அல்லது இரட்டை மேற்கோள்களுக்குள் உள்ள ஒரு சரமாக இருக்க வேண்டும்.

உதாரணமாக, bk என்ற முன்னொட்டை http://example.com/book என்ற நேம்ஸ்பேஸுடன் இணைக்க, பின்வரும் @namespace விதியைப் பயன்படுத்த வேண்டும்:

            @namespace bk "http://example.com/book";
            

              
                Copy
              
            
          

CSS செலக்டர்களில் நேம்ஸ்பேஸ்களைப் பயன்படுத்துதல்

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

            prefix|element { /* CSS rules */ }
            

              
                Copy
              
            
          

இங்கே prefix என்பது நேம்ஸ்பேஸ் முன்னொட்டு மற்றும் element என்பது நீங்கள் குறிவைக்க விரும்பும் உறுப்பின் பெயர். செங்குத்துக் கோடு (|) முன்னொட்டை உறுப்பின் பெயரிலிருந்து பிரிக்கிறது.

உதாரணமாக, http://example.com/book நேம்ஸ்பேஸில் உள்ள அனைத்து title உறுப்புகளையும் ஸ்டைல் செய்ய, நீங்கள் பின்வரும் CSS விதியைப் பயன்படுத்த வேண்டும்:

            @namespace bk "http://example.com/book";
bk|title {
  font-size: 1.2em;
  font-weight: bold;
}
            

              
                Copy
              
            
          

இந்த விதி http://example.com/book நேம்ஸ்பேஸிற்கு சொந்தமான title உறுப்புகளுக்கு மட்டுமே குறிப்பிட்ட ஸ்டைல்களைப் பயன்படுத்தும்.

நேம்ஸ்பேஸ்களில் உள்ள பண்புக்கூறுகளைக் குறிவைத்தல்

CSS ஐப் பயன்படுத்தி குறிப்பிட்ட நேம்ஸ்பேஸ்களில் உள்ள பண்புக்கூறுகளையும் நீங்கள் குறிவைக்கலாம். இதன் சிண்டாக்ஸ் உறுப்புகளைக் குறிவைப்பதைப் போன்றது:

            prefix|element[prefix|attribute] { /* CSS rules */ }
            

              
                Copy
              
            
          

உதாரணமாக, http://example.com/book நேம்ஸ்பேஸில் id என்ற பண்புக்கூறு இருந்தால், அதை நீங்கள் இதுபோல குறிவைக்கலாம்:

            @namespace bk "http://example.com/book";
bk|book[bk|id] {
  border: 1px solid black;
}
            

              
                Copy
              
            
          

இயல்புநிலை நேம்ஸ்பேஸ்

ஒரு XML ஆவணம் இயல்புநிலை நேம்ஸ்பேஸை (முன்னொட்டு இல்லாமல்) அறிவிக்கும்போது, அந்த நேம்ஸ்பேஸில் உள்ள உறுப்புகளை நட்சத்திரக் குறியை (*) முன்னொட்டாகப் பயன்படுத்தி குறிவைக்கலாம். உதாரணமாக, உங்களிடம் பின்வரும் XML இருந்தால்:

            <book xmlns="http://example.com/book">
  <title>The Hitchhiker's Guide to the Galaxy</title>
  <author>Douglas Adams</author>
</book>
            

              
                Copy
              
            
          

நீங்கள் title உறுப்பை பின்வரும் CSS ஐப் பயன்படுத்தி ஸ்டைல் செய்யலாம்:

            @namespace "http://example.com/book";
*|title {
  color: blue;
}
            

              
                Copy
              
            
          

XML ஆவணம் ஒரு இயல்புநிலை நேம்ஸ்பேஸை வரையறுத்திருந்தாலும், *| செலக்டரைப் பயன்படுத்தும்போதும், உங்கள் CSS இல் @namespace ஐப் பயன்படுத்தி நேம்ஸ்பேஸை அறிவிக்க *வேண்டும்* என்பதை நினைவில் கொள்க.

|element செலக்டர்

|element செலக்டர் *எந்தவொரு* நேம்ஸ்பேஸிலும் உள்ள உறுப்புகளைக் குறிவைக்கிறது. உறுப்புகளின் குறிப்பிட்ட நேம்ஸ்பேஸைப் பொருட்படுத்தாமல் ஸ்டைல்களைப் பயன்படுத்த இது பயனுள்ளதாக இருக்கும்.

உதாரணமாக:

            |title {
  text-transform: uppercase;
}
            

              
                Copy
              
            
          

இது 'title' என்று பெயரிடப்பட்ட எந்தவொரு உறுப்பையும், அது எந்த நேம்ஸ்பேஸில் இருந்தாலும், பெரிய எழுத்துக்களுக்கு மாற்றும்.

நடைமுறை எடுத்துக்காட்டுகள்

பல நேம்ஸ்பேஸ்களுடன் கூடிய ஒரு சிக்கலான எடுத்துக்காட்டைக் கருத்தில் கொள்வோம். உங்களிடம் ஒரு புத்தக நேம்ஸ்பேஸ் மற்றும் ஒரு மெட்டாடேட்டா நேம்ஸ்பேஸிலிருந்து உறுப்புகளை இணைக்கும் ஒரு XML ஆவணம் இருப்பதாக வைத்துக்கொள்வோம்:

            <book xmlns:bk="http://example.com/book" xmlns:meta="http://example.com/metadata">
  <bk:title>The Lord of the Rings</bk:title>
  <bk:author>J.R.R. Tolkien</bk:author>
  <meta:publisher>Allen & Unwin</meta:publisher>
  <meta:year>1954</meta:year>
</book>
            

              
                Copy
              
            
          

இந்த XML ஆவணத்தை ஸ்டைல் செய்ய, உங்கள் CSS இல் இரண்டு நேம்ஸ்பேஸ்களையும் அறிவிக்க வேண்டும்:

            @namespace bk "http://example.com/book";
@namespace meta "http://example.com/metadata";

bk|title {
  font-size: 1.5em;
  font-weight: bold;
}

bk|author {
  font-style: italic;
}

meta|publisher {
  color: green;
}

meta|year {
  color: gray;
}
            

              
                Copy
              
            
          

இந்த CSS குறியீடு http://example.com/book மற்றும் http://example.com/metadata ஆகிய இரண்டு நேம்ஸ்பேஸ்களிலும் உள்ள உறுப்புகளுக்கான ஸ்டைல்களை வரையறுக்கிறது. தலைப்பு பெரியதாகவும் தடிமனாகவும், ஆசிரியர் சாய்வாகவும், வெளியீட்டாளர் பச்சையாகவும், ஆண்டு சாம்பல் நிறமாகவும் இருக்கும்.

CSS நேம்ஸ்பேஸ்கள் மூலம் SVG-ஐ ஸ்டைல் செய்தல்

SVG (அளவிடக்கூடிய திசையன் வரைகலை) என்பது ஒரு XML-அடிப்படையிலான திசையன் பட வடிவமைப்பு ஆகும். CSS நேம்ஸ்பேஸ்கள் மூலம் SVG-ஐ ஸ்டைல் செய்வது மிகவும் சக்திவாய்ந்ததாக இருக்கும். இதோ ஒரு எடுத்துக்காட்டு:

            <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
            

              
                Copy
              
            
          

இதோ CSS:

            @namespace svg "http://www.w3.org/2000/svg";

svg|circle {
  stroke: blue;
  fill: orange;
}

svg|svg {
  border: 1px solid black;
}

            

              
                Copy
              
            
          

இது வட்டத்தின் ஸ்ட்ரோக்கை நீல நிறத்திற்கும், ஃபில்லை ஆரஞ்சு நிறத்திற்கும் மாற்றும், மற்றும் SVG உறுப்பிற்கு ஒரு பார்டரைச் சேர்க்கும். CSS இல் SVG நேம்ஸ்பேஸை அறிவிக்க வேண்டியதன் அவசியத்தைக் கவனியுங்கள்.

சிறந்த நடைமுறைகள்

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

பிரவுசர் இணக்கத்தன்மை

CSS நேம்ஸ்பேஸ் விதிகள் பொதுவாக Chrome, Firefox, Safari, மற்றும் Edge உள்ளிட்ட நவீன பிரவுசர்களால் நன்கு ஆதரிக்கப்படுகின்றன. இருப்பினும், இன்டர்நெட் எக்ஸ்ப்ளோரரின் பழைய பதிப்புகளில் நேம்ஸ்பேஸ் விதிகளுக்கு வரம்புக்குட்பட்ட அல்லது ஆதரவு இல்லாமல் இருக்கலாம். உங்கள் குறியீடு எதிர்பார்த்தபடி செயல்படுகிறதா என்பதை உறுதிப்படுத்த வெவ்வேறு பிரவுசர்களில் முழுமையாகச் சோதிப்பது அவசியம். பழைய பிரவுசர்களை ஆதரிக்க நீங்கள் பாலிஃபில்கள் அல்லது மாற்று ஸ்டைலிங் நுட்பங்களைப் பயன்படுத்த வேண்டியிருக்கலாம்.

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

• ஸ்டைல்கள் பயன்படுத்தப்படவில்லை: நீங்கள் நேம்ஸ்பேஸை சரியாக அறிவித்துள்ளீர்களா மற்றும் உங்கள் முன்னொட்டுகள் சீராக உள்ளதா என்பதை இருமுறை சரிபார்க்கவும். உங்கள் CSS இல் உள்ள நேம்ஸ்பேஸ் URI உங்கள் XML ஆவணத்தில் உள்ள நேம்ஸ்பேஸ் URI உடன் பொருந்துகிறதா என்பதை உறுதிப்படுத்தவும்.
• எதிர்பாராத ஸ்டைலிங்: நீங்கள் எதிர்பாராத ஸ்டைலிங்கைக் கண்டால், உங்கள் CSS செலக்டர்கள் சரியான உறுப்புகளைக் குறிவைக்கின்றனவா என்பதை உறுதிப்படுத்த அவற்றை மதிப்பாய்வு செய்யவும். மற்ற நேம்ஸ்பேஸ்களில் உள்ள உறுப்புகளைத் தற்செயலாகப் பாதிக்கக்கூடிய அதிகப்படியான பொதுவான செலக்டர்களைத் தவிர்க்கவும்.
• கிராஸ்-பிரவுசர் இணக்கத்தன்மை சிக்கல்கள்: ஏதேனும் இணக்கத்தன்மை சிக்கல்களை அடையாளம் காண உங்கள் குறியீட்டை வெவ்வேறு பிரவுசர்களில் சோதிக்கவும். பழைய பிரவுசர்களை ஆதரிக்க பாலிஃபில்கள் அல்லது மாற்று ஸ்டைலிங் நுட்பங்களைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள்.

CSS நேம்ஸ்பேஸ்களுக்கான மாற்றுகள்

CSS நேம்ஸ்பேஸ்கள் XML ஐ ஸ்டைல் செய்வதற்கான ஒரு சக்திவாய்ந்த கருவியாக இருந்தாலும், உங்கள் குறிப்பிட்ட தேவைகளைப் பொறுத்து நீங்கள் கருத்தில் கொள்ளக்கூடிய மாற்று அணுகுமுறைகள் உள்ளன:

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

முடிவுரை

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

உங்கள் குறியீட்டை எப்போதும் வெவ்வேறு பிரவுசர்களில் சோதித்து, தேவைப்பட்டால் மாற்று அணுகுமுறைகளைக் கருத்தில் கொள்ள நினைவில் கொள்ளுங்கள். CSS நேம்ஸ்பேஸ் விதிகள் பற்றிய உறுதியான புரிதலுடன், உங்கள் பயனர்களுக்கு ஈர்க்கக்கூடிய மற்றும் அணுகக்கூடிய வலை அனுபவங்களை நீங்கள் உருவாக்கலாம்.

மேலும் படிக்க

• MDN வலை ஆவணங்கள்: @namespace
• CSS நேம்ஸ்பேஸ்கள் தொகுதி நிலை 3