CSS டாக்குமெண்ட் விதி: ஆவண-குறிப்பிட்ட ஸ்டைலிங் மற்றும் தழுவலில் தேர்ச்சி பெறுதல்

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

@document விதியைப் புரிந்துகொள்ளுதல்

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

• URL அடிப்படையில் ஸ்டைலிங்: ஒரு வலைத்தளத்தின் குறிப்பிட்ட பக்கங்கள் அல்லது பிரிவுகளுக்கு தனித்துவமான ஸ்டைல்களைப் பயன்படுத்துதல்.
• கிராஸ்-டொமைன் ஸ்டைலிங்: வெவ்வேறு டொமைன்களில் ஹோஸ்ட் செய்யப்பட்ட ஆதாரங்களுக்கு ஸ்டைல்களை இலக்கு வைத்தல்.
• வெவ்வேறு சூழல்களுக்கு ஏற்ப மாற்றுதல்: அச்சு, மின்னஞ்சல் அல்லது குறிப்பிட்ட ஆவண வகைகளுக்கான ஸ்டைல்களைத் தனிப்பயனாக்குதல்.
• உலாவி-குறிப்பிட்ட ஹேக்குகள்: (பொதுவாக ஊக்கப்படுத்தப்படாத போதிலும்) பழைய உலாவிகளில் ரெண்டரிங் முரண்பாடுகளைச் சரிசெய்ய, கடைசி முயற்சியாகப் பயன்படுத்தலாம்.

தொடரியல் மற்றும் பயன்பாடு

            @document  {
  /* CSS rules to apply */
}

            

              
                Copy
              
            
          

<condition(s)> பிரிவில், தொகுதியிலுள்ள சிஎஸ்எஸ் விதிகள் பயன்படுத்தப்படுவதற்கு பூர்த்தி செய்யப்பட வேண்டிய நிபந்தனைகளை நீங்கள் குறிப்பிடுவீர்கள். ஆவணத்தின் வெவ்வேறு அம்சங்களைப் பொருத்த பல செயல்பாடுகளின் கலவையைப் பயன்படுத்தலாம்.

கிடைக்கக்கூடிய பொருத்துதல் செயல்பாடுகள்

• url(): ஒரு குறிப்பிட்ட URL-ஐ துல்லியமாகப் பொருத்துகிறது.
• url-prefix(): கொடுக்கப்பட்ட முன்னொட்டுடன் தொடங்கும் URL-களைப் பொருத்துகிறது.
• domain(): ஒரு குறிப்பிட்ட டொமைனில் ஹோஸ்ட் செய்யப்பட்ட ஆவணங்களைப் பொருத்துகிறது.
• regexp(): ஒரு ரெகுலர் எக்ஸ்பிரஷன் அடிப்படையில் URL-களைப் பொருத்துகிறது. இது சிக்கலான பொருத்துதல் காட்சிகளுக்கு ஒரு சக்திவாய்ந்த விருப்பமாகும், ஆனால் செயல்திறன் சிக்கல்களைத் தவிர்க்க கவனமாகப் பயன்படுத்த வேண்டும்.

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

@document செயல்பாட்டில் உள்ள எடுத்துக்காட்டுகள்

1. ஒரு குறிப்பிட்ட பக்கத்தை ஸ்டைல் செய்தல்

உங்கள் வலைத்தளத்தின் "எங்களைப் பற்றி" பக்கத்திற்கு ஒரு தனித்துவமான பின்னணி நிறத்தைப் பயன்படுத்த விரும்புகிறீர்கள் என்று வைத்துக்கொள்வோம். url() பயன்படுத்தி, அந்த குறிப்பிட்ட பக்கத்தை நீங்கள் இலக்கு வைக்கலாம்:

            @document url("https://www.example.com/about-us.html") {
  body {
    background-color: #f0f8ff; /* Light blue background */
  }
}

            

              
                Copy
              
            
          

இது அந்த துல்லியமான URL-இல் அமைந்துள்ள பக்கத்திற்கு மட்டுமே பின்னணி நிறத்தைப் பயன்படுத்தும். URL பொருத்துதல் கேஸ்-சென்சிடிவ் என்பதை நினைவில் கொள்க, எனவே செயல்பாட்டில் உள்ள URL ஆவணத்தின் உண்மையான URL-உடன் துல்லியமாகப் பொருந்துவதை உறுதிசெய்யவும்.

2. ஒரு வலைத்தளத்தின் ஒரு பகுதியை ஸ்டைல் செய்தல்

உங்கள் வலைத்தளத்தின் ஒரு முழுப் பகுதியையும், அதாவது ஒரு வலைப்பதிவையும் ஸ்டைல் செய்ய விரும்பினால், நீங்கள் url-prefix() பயன்படுத்தலாம்:

            @document url-prefix("https://www.example.com/blog/") {
  .blog-post {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
  }
}

            

              
                Copy
              
            
          

இது "https://www.example.com/blog/" உடன் தொடங்கும் URL-ஐக் கொண்ட எந்தப் பக்கத்திலும் .blog-post என்ற கிளாஸ் உள்ள அனைத்து உறுப்புகளுக்கும் குறிப்பிட்ட எழுத்துரு மற்றும் வரி உயரத்தைப் பயன்படுத்தும். உங்கள் வலைத்தளத்தின் ஒரு குறிப்பிட்ட பகுதி முழுவதும் ஒரு நிலையான தோற்றத்தையும் உணர்வையும் பராமரிக்க இது பயனுள்ளதாக இருக்கும்.

3. ஒரு குறிப்பிட்ட டொமைனை இலக்கு வைத்தல்

domain() செயல்பாடு டொமைன் பெயரின் அடிப்படையில் ஸ்டைல்களை இலக்கு வைக்க உங்களை அனுமதிக்கிறது. மற்ற டொமைன்களிலிருந்து உள்ளடக்கத்தை உட்பொதித்து, உங்கள் தளத்தில் அதன் தோற்றத்தைக் கட்டுப்படுத்த விரும்பும்போது இது பயனுள்ளதாக இருக்கும். எடுத்துக்காட்டாக, "example.org" இலிருந்து உள்ளடக்கத்திற்கு குறிப்பிட்ட ஸ்டைலிங்கைப் பயன்படுத்த:

            @document domain("example.org") {
  img {
    border: 1px solid #ccc;
  }
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டு உங்கள் வலைத்தளத்தில் காட்டப்படும்போது "example.org" டொமைனில் இருந்து வரும் அனைத்து படங்களுக்கும் ஒரு பார்டரைச் சேர்க்கிறது. இருப்பினும், கிராஸ்-ஆரிஜின் கொள்கைகளைப் பற்றி எச்சரிக்கையாக இருங்கள். உங்கள் டொமைனிலிருந்து கிராஸ்-ஆரிஜின் அணுகலை அந்த ஆதாரம் அனுமதித்தால் மட்டுமே இது வேலை செய்யும்.

4. ரெகுலர் எக்ஸ்பிரஷன்களுடன் மேம்பட்ட பொருத்துதல்

மிகவும் சிக்கலான பொருத்துதல் காட்சிகளுக்கு, நீங்கள் regexp() செயல்பாட்டைப் பயன்படுத்தலாம். இது ரெகுலர் எக்ஸ்பிரஷன்களின் அடிப்படையில் URL-களை இலக்கு வைக்க உங்களை அனுமதிக்கிறது. உதாரணமாக, "product" அல்லது "item" (கேஸ்-இன்சென்சிடிவ்) இரண்டையும் கொண்ட URL உள்ள அனைத்து பக்கங்களையும் இலக்கு வைக்க:

            @document regexp("(?i)(product|item)") {
  .product-name {
    font-weight: bold;
  }
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், (?i) ரெகுலர் எக்ஸ்பிரஷனை கேஸ்-இன்சென்சிடிவ் ஆக்குகிறது. (product|item) என்ற ரெகுலர் எக்ஸ்பிரஷன் "product" அல்லது "item" இரண்டையும் பொருத்துகிறது. எச்சரிக்கை: ரெகுலர் எக்ஸ்பிரஷன்கள் கணக்கீட்டு ரீதியாக செலவு மிக்கதாக இருக்கலாம், குறிப்பாக அவை மோசமாக எழுதப்பட்டிருந்தால். அவற்றை குறைவாகப் பயன்படுத்துங்கள் மற்றும் செயல்திறனுக்காக அவை மேம்படுத்தப்பட்டிருப்பதை உறுதிசெய்யுங்கள்.

பல நிபந்தனைகளை இணைத்தல்

காற்புள்ளிகளைப் பயன்படுத்தி ஒரு @document விதியில் பல நிபந்தனைகளை இணைக்கலாம். இது பல நிபந்தனைகளின் அடிப்படையில் ஸ்டைல்களைப் பயன்படுத்த உங்களை அனுமதிக்கிறது. எடுத்துக்காட்டாக, "எங்களைப் பற்றி" மற்றும் "எங்களைத் தொடர்பு கொள்க" ஆகிய இரு பக்கங்களுக்கும் ஸ்டைல்களைப் பயன்படுத்த:

            @document url("https://www.example.com/about-us.html"), url("https://www.example.com/contact-us.html") {
  body {
    font-family: 'Helvetica', sans-serif;
  }
}

            

              
                Copy
              
            
          

இது இரு பக்கங்களின் பாடிக்கும் ஹெல்வெடிகா எழுத்துருவைப் பயன்படுத்தும். காற்புள்ளிகளைப் பயன்படுத்துவது ஒரு "OR" நிபந்தனையை உருவாக்குகிறது என்பதை நினைவில் கொள்வது முக்கியம் - நிபந்தனைகளில் ஏதேனும் ஒன்று பூர்த்தி செய்யப்பட்டால் ஸ்டைல்கள் பயன்படுத்தப்படும்.

ஸ்பெசிஃபிசிட்டி மற்றும் கேஸ்கேட்

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

உதாரணமாக, ஒரு குறிப்பிட்ட செலக்டரைக் கொண்ட ஒரு விதி (எ.கா., ஒரு ஐடி செலக்டர்) எப்போதும் குறைந்த ஸ்பெசிஃபிசிட்டியைக் கொண்ட ஒரு விதியை (எ.கா., ஒரு கிளாஸ் செலக்டர்) மீறும், இரு விதிகளும் ஒரே @document தொகுதியில் இருந்தாலும் கூட.

கேஸ்கேடும் செயல்பாட்டுக்கு வருகிறது. இரு விதிகளுக்கும் ஒரே ஸ்பெசிஃபிசிட்டி இருந்தால், ஸ்டைல்ஷீட்டில் பின்னர் தோன்றும் விதிக்கு முன்னுரிமை அளிக்கப்படும். இதன் பொருள், நீங்கள் வழக்கமான CSS-லும் மற்றும் ஒரு @document விதியிலும் முரண்பட்ட ஸ்டைல்களை வரையறுத்திருந்தால், பின்னர் வரையறுக்கப்பட்ட விதி பயன்படுத்தப்படும்.

உலாவி இணக்கத்தன்மை

@document விதிக்கான உலாவி இணக்கத்தன்மை நவீன உலாவிகளில் ஓரளவு நன்றாக உள்ளது, ஆனால் பழைய உலாவிகளில் உள்ள வரம்புகளைப் பற்றி எச்சரிக்கையாக இருப்பது முக்கியம். Chrome, Firefox, Safari மற்றும் Edge ஆகியவற்றின் பெரும்பாலான நவீன பதிப்புகள் இந்த விதியை ஆதரிக்கின்றன. இருப்பினும், இன்டர்நெட் எக்ஸ்ப்ளோரரின் பழைய பதிப்புகள் ஆதரிக்கவில்லை.

உங்கள் ஸ்டைல்கள் பரந்த அளவிலான உலாவிகளில் வேலை செய்வதை உறுதிசெய்ய, ஸ்டைல்களைப் பயன்படுத்துவதற்கு முன்பு @document விதிக்கான ஆதரவைக் கண்டறிய ஃபீச்சர் குவரிகளை (@supports) பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள். மாற்றாக, நீங்கள் ஒரு முற்போக்கான மேம்பாட்டு அணுகுமுறையைப் பயன்படுத்தலாம், அங்கு @document விதி அதை ஆதரிக்கும் உலாவிகளுக்கு மேம்படுத்தப்பட்ட ஸ்டைலிங்கை வழங்குகிறது, அதே நேரத்தில் மற்ற உலாவிகள் ஒரு அடிப்படை ஸ்டைலிங்கிற்குத் திரும்புகின்றன.

சிறந்த நடைமுறைகள் மற்றும் பரிசீலனைகள்

@document விதி சக்திவாய்ந்த திறன்களை வழங்கினாலும், அதை புத்திசாலித்தனமாகப் பயன்படுத்துவதும் சிறந்த நடைமுறைகளைப் பின்பற்றுவதும் முக்கியம்:

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

அடிப்படை ஸ்டைலிங்கிற்கு அப்பால்: மேம்பட்ட பயன்பாட்டு வழக்குகள்

@document விதியை அடிப்படை ஸ்டைலிங்கிற்கு மேல் பயன்படுத்தலாம். இதோ சில மேம்பட்ட பயன்பாட்டு வழக்குகள்:

• அச்சு ஸ்டைல்ஷீட்கள்: ஒரு பயனர் ஒரு வலைப்பக்கத்தை அச்சிடும்போது குறிப்பிட்ட ஸ்டைல்களைப் பயன்படுத்த நீங்கள் @document பயன்படுத்தலாம். இதற்காக @media print பொதுவாகப் பயன்படுத்தப்பட்டாலும், ஒரு குறிப்பிட்ட அச்சு டெம்ப்ளேட்டை இலக்கு வைக்க வேண்டியிருந்தால் @document பயனுள்ளதாக இருக்கும்.
• மின்னஞ்சல் கிளையன்ட் ஸ்டைலிங்: சில வரையறுக்கப்பட்ட சந்தர்ப்பங்களில், HTML மின்னஞ்சல்களை ரெண்டர் செய்யும்போது குறிப்பிட்ட மின்னஞ்சல் கிளையன்ட்களை இலக்கு வைக்க நீங்கள் @document பயன்படுத்தலாம். இருப்பினும், CSS-க்கான மின்னஞ்சல் கிளையன்ட் ஆதரவு மிகவும் மாறுபட்டது, எனவே இந்த அணுகுமுறை எச்சரிக்கையுடனும் முழுமையான சோதனையுடனும் பயன்படுத்தப்பட வேண்டும். அதிகபட்ச இணக்கத்தன்மைக்கு இன்லைன் ஸ்டைல்கள் பொதுவாக விரும்பப்படுகின்றன.
• உள்ளடக்க மேலாண்மை அமைப்பு (CMS) ஒருங்கிணைப்பு: ஒரு CMS உடன் பணிபுரியும்போது, குறிப்பிட்ட உள்ளடக்க வகைகள் அல்லது டெம்ப்ளேட்டுகளுக்கு குறிப்பிட்ட ஸ்டைல்களைப் பயன்படுத்த நீங்கள் @document பயன்படுத்தலாம். இது முக்கிய CMS ஸ்டைல்ஷீட்களை மாற்றாமல் வெவ்வேறு வகையான உள்ளடக்கங்களுக்கு ஒரு நிலையான தோற்றத்தையும் உணர்வையும் பராமரிக்க உங்களை அனுமதிக்கிறது.
• A/B சோதனை: அதன் முதன்மை நோக்கம் இல்லையென்றாலும், URL அளவுருக்கள் அல்லது பிற ஆவண பண்புகளின் அடிப்படையில் வெவ்வேறு பயனர் பிரிவுகளுக்கு வெவ்வேறு ஸ்டைல்களைப் பயன்படுத்த A/B சோதனை கட்டமைப்புகளுடன் இணைந்து @document பயன்படுத்தப்படலாம்.

CSS-இன் எதிர்காலம் மற்றும் ஆவண ஸ்டைலிங்

@document விதி வலை உள்ளடக்கத்தின் উপস্থাপனையைக் கட்டுப்படுத்த ஒரு சக்திவாய்ந்த கருவியைக் குறிக்கிறது, மேலும் அதன் திறன்கள் எதிர்கால CSS விவரக்குறிப்புகளில் விரிவாக்கப்படலாம். வலை அபிவிருத்தி தொடர்ந்து உருவாகும்போது, @document போன்ற மேம்பட்ட CSS அம்சங்களைப் புரிந்துகொள்வது அதிநவீன, தழுவக்கூடிய மற்றும் பயனர் நட்பு வலை அனுபவங்களை உருவாக்குவதற்கு பெருகிய முறையில் முக்கியமானதாக மாறும்.

முடிவுரை

சிஎஸ்எஸ் டாக்குமெண்ட் விதி (@document) ஆவண பண்புகளின் அடிப்படையில் ஸ்டைல்களை இலக்கு வைக்க ஒரு தனித்துவமான மற்றும் மதிப்புமிக்க வழியை வழங்குகிறது. இது உலாவி இணக்கத்தன்மை மற்றும் பராமரிப்புத்திறனுக்கான கவனமான பரிசீலனையுடன் புத்திசாலித்தனமாகப் பயன்படுத்தப்பட வேண்டும் என்றாலும், குறிப்பிட்ட சூழல்கள் மற்றும் URL-களுக்கு வலைப்பக்கங்களைத் தனிப்பயனாக்குவதற்கும் தழுவுவதற்கும் சக்திவாய்ந்த திறன்களை வழங்குகிறது. @document விதியில் தேர்ச்சி பெறுவதன் மூலம், வலை டெவலப்பர்கள் தங்கள் உள்ளடக்கத்தின் উপস্থাপனையின் மீது அதிக கட்டுப்பாட்டைப் பெறலாம் மற்றும் மேலும் தனிப்பயனாக்கப்பட்ட மற்றும் ஈர்க்கக்கூடிய பயனர் அனுபவங்களை உருவாக்கலாம். அதன் சக்தியைத் தழுவி, உங்கள் வலை அபிவிருத்தி பயணத்தில் புதிய சாத்தியங்களைத் திறக்கவும்!