CSS @split: மேம்படுத்தப்பட்ட வலை செயல்திறனுக்கான குறியீடு பிரித்தலில் ஒரு ஆழமான மூழ்கல்

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

CSS குறியீடு பிளவு என்றால் என்ன?

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

பாரம்பரியமாக, உருவாக்குநர்கள் CSS குறியீடு பிளவை அடைய பல்வேறு முன்-செயலிகள் (Sass அல்லது Less போன்றவை) மற்றும் உருவாக்க கருவிகளை (Webpack அல்லது Parcel போன்றவை) நம்பியுள்ளனர். இந்த கருவிகள் பெரும்பாலும் சிக்கலான உள்ளமைவுகள் மற்றும் பணிப்பாய்வுகளை உள்ளடக்கியது. @split விதி, செயல்முறையை எளிதாக்குவதன் மூலமும், சிறந்த செயல்திறன் மேம்படுத்தலை வழங்குவதன் மூலமும், சொந்த CSS குறியீடு பிளவு திறன்களை உலாவிக்கு கொண்டு வருவதை நோக்கமாகக் கொண்டுள்ளது.

@split விதியை அறிமுகப்படுத்துகிறோம்

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

@split இன் தொடரியல்

@split விதியின் அடிப்படை தொடரியல் பின்வருமாறு:

@split [பிளவு-பெயர்] {
  [நிபந்தனை]: {
    [CSS விதிகள்];
  }
  ...
}

கூறுகளை உடைப்போம்:

• @split [பிளவு-பெயர்]: இது ஒரு தனித்துவமான பெயருடன் ஒரு புதிய பிளவை அறிவிக்கிறது. பிளவை பின்னர் குறிப்பிட பெயர் பயன்படுத்தப்படுகிறது.
• [நிபந்தனை]: இது ஒரு ஊடக வினவல் அல்லது CSS நிபந்தனையாகும், இது பிளவுக்குள் உள்ள பாணிகள் எப்போது பயன்படுத்தப்பட வேண்டும் என்பதை தீர்மானிக்கிறது.
• [CSS விதிகள்]: இது நிபந்தனை பூர்த்தி செய்யப்பட்டால் பயன்படுத்தப்படும் நிலையான CSS விதிகள்.

உதாரணம்: வெவ்வேறு திரை அளவுகளுக்கான பாணிகளைப் பிரித்தல்

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

@split பதிலளிக்கக்கூடிய-அமைப்பு {
  திரை மற்றும் (அதிகபட்ச-அகலம்: 768px): {
    .கலன் {
      அகலம்: 100%;
      பேடிங்: 10px;
    }
    h1 {
      எழுத்துரு-அளவு: 2em;
    }
  }
  திரை மற்றும் (குறைந்தபட்ச-அகலம்: 769px): {
    .கலன் {
      அகலம்: 960px;
      பேடிங்: 20px;
    }
    h1 {
      எழுத்துரு-அளவு: 3em;
    }
  }
}

இந்த எடுத்துக்காட்டில், பதிலளிக்கக்கூடிய-அமைப்பு என்ற பெயரில் ஒரு பிளவை வரையறுக்கிறோம். இது திரை அகலத்தின் அடிப்படையில் இரண்டு நிபந்தனைகளைக் கொண்டுள்ளது. திரை அகலம் 768px ஐ விடக் குறைவாகவோ அல்லது சமமாகவோ இருந்தால், மொபைல் சாதனங்களுக்கான பாணிகள் பயன்படுத்தப்படும். திரை அகலம் 768px ஐ விட அதிகமாக இருந்தால், பெரிய திரைகளுக்கான பாணிகள் பயன்படுத்தப்படும்.

உதாரணம்: அச்சு ஊடகத்திற்கான பாணிகளைப் பிரித்தல்

மற்றொரு பொதுவான பயன்பாட்டு வழக்கு அச்சு ஊடகத்திற்காக குறிப்பாக பாணிகளைப் பிரிப்பதாகும்:

@split அச்சு-பாணிகள் {
  அச்சு: {
    உடல் {
      எழுத்துரு-அளவு: 12pt;
      நிறம்: கருப்பு;
    }
    .அச்சு-இல்லை {
      காட்சி: இல்லை;
    }
  }
}

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

@split ஐப் பயன்படுத்துவதன் நன்மைகள்

@split விதியைப் பயன்படுத்துவது வலை செயல்திறன் மற்றும் பராமரிப்புக்கு பல நன்மைகளை வழங்குகிறது:

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

@split க்கான பயன்பாட்டு வழக்குகள்

வலை செயல்திறனை மேம்படுத்த @split விதியை பல்வேறு சூழ்நிலைகளில் பயன்படுத்தலாம்:

• பதிலளிக்கக்கூடிய வடிவமைப்பு: திரை அளவு அல்லது சாதன நோக்குநிலையின் அடிப்படையில் வெவ்வேறு பாணிகளை ஏற்றவும்.
• அச்சு பாணிகள்: அச்சு ஊடகத்திற்கான குறிப்பிட்ட பாணிகளை வரையறுக்கவும், தேவையற்ற கூறுகளை மறைத்து, வாசிப்பை மேம்படுத்தவும்.
• தீம் மாறுதல்: பயனர் விருப்பத்தேர்வுகளின் அடிப்படையில் வெவ்வேறு CSS தீம்களை ஏற்றவும் (எ.கா., ஒளி முறை மற்றும் இருண்ட முறை).
• A/B சோதனை: வெவ்வேறு வடிவமைப்பு கூறுகளை A/B சோதனை செய்வதற்கான வெவ்வேறு CSS வேறுபாடுகளை ஏற்றவும்.
• அம்சக் கொடிகள்: அம்சக் கொடிகளின் அடிப்படையில் குறிப்பிட்ட அம்சங்களுக்கான CSS ஐ நிபந்தனையுடன் ஏற்றவும்.
• சர்வதேசமயமாக்கல் (i18n): பயனரின் மொழி அல்லது பிராந்தியத்தின் அடிப்படையில் வெவ்வேறு CSS பாணிகளை ஏற்றவும். எடுத்துக்காட்டாக, வலமிருந்து இடமாக மொழிகளுக்கு வெவ்வேறு எழுத்துரு பாணிகள் அல்லது தளவமைப்பு மாற்றங்கள் அவசியமாக இருக்கலாம்.
• அணுகல்தன்மை: அதிகரித்த மாறுபாடு அல்லது பெரிய எழுத்துருக்கள் போன்ற குறைபாடுகள் உள்ள பயனர்களுக்காக மேம்படுத்தப்பட்ட CSS ஐ ஏற்றவும்.

CSS குறியீடு பிளவு நுட்பங்களுடன் ஒப்பீடு

தற்போது, CSS குறியீடு பிளவு முதன்மையாக முன்-செயலிகள் மற்றும் உருவாக்க கருவிகள் மூலம் அடையப்படுகிறது. இந்த இருக்கும் நுட்பங்களுடன் @split இன் ஒப்பீடு இங்கே:

முன்-செயலிகள் (Sass, Less, Stylus)

• நன்மை: முதிர்ச்சியடைந்த மற்றும் பரவலாக ஏற்றுக்கொள்ளப்பட்டவை, மாறிகள், கலவைகள் மற்றும் கூடு போன்ற அம்சங்களை வழங்குகின்றன.
• பாதகம்: தொகுப்பு படி தேவை, சிக்கலை அதிகரிக்கும், பெரும்பாலும் குறியீடு பிளவுக்கான உருவாக்க கருவிகளை நம்பியிருக்கும்.

உருவாக்க கருவிகள் (Webpack, Parcel)

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

@split

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

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

கருத்தில் கொள்ள வேண்டியவை மற்றும் சிறந்த நடைமுறைகள்

@split விதி CSS குறியீடு பிளவுக்கான ஒரு நம்பிக்கைக்குரிய அணுகுமுறையை வழங்குகிறது என்றாலும், கருத்தில் கொள்ள வேண்டிய பல விஷயங்கள் மற்றும் சிறந்த நடைமுறைகள் உள்ளன:

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

CSS குறியீடு பிளவின் எதிர்காலம்

@split விதி CSS மற்றும் வலை செயல்திறன் மேம்பாட்டின் பரிணாம வளர்ச்சியில் ஒரு குறிப்பிடத்தக்க படியாகும். @split க்கான உலாவி ஆதரவு அதிகரிக்கும்போது, வேகமான மற்றும் பதிலளிக்கக்கூடிய வலைத்தளங்களை உருவாக்குவதற்கான ஒரு நிலையான நடைமுறையாக மாற வாய்ப்புள்ளது. பல்வேறு காரணிகளின் அடிப்படையில் CSS ஐ நிபந்தனையுடன் ஏற்றும் திறன் மிகவும் வடிவமைக்கப்பட்ட மற்றும் உகந்த பயனர் அனுபவங்களை உருவாக்குவதற்கான புதிய சாத்தியங்களைத் திறக்கிறது.

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

முடிவு

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

மேலும் கற்றல்

• CSS நிபந்தனை விதிகள் தொகுதி நிலை 4 (ஆசிரியர் வரைவு)
• MDN வலை ஆவணங்கள்: CSS அட்-ரூல்