ஒளி மற்றும் இருண்ட பயன்முறையில் CSS உருவங்களை எவ்வாறு பயன்படுத்துவது

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

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

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

CSS ஸ்ப்ரிட்கள் முன்பு இருந்ததைப் போல பிரபலமாக இல்லை

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

CSS ஸ்ப்ரைட் உதாரணம்

CSS உருவப்படங்களைப் பயன்படுத்த, CSS ஐப் பயன்படுத்தி ஸ்ப்ரைட் படக் கோப்பிற்குள் ஒவ்வொரு தனிப் படத்தின் நிலையை நாம் வரையறுக்க வேண்டும். இது பொதுவாக அமைப்பதன் மூலம் செய்யப்படுகிறது background-image மற்றும் background-position ஸ்ப்ரைட் படத்தைப் பயன்படுத்தும் வலைப்பக்கத்தில் உள்ள ஒவ்வொரு உறுப்புக்கும் பண்புகள். ஸ்ப்ரைட்டில் உள்ள படத்தின் x மற்றும் y ஆயத்தொகுப்புகளைக் குறிப்பிடுவதன் மூலம், பக்கத்தில் தனித்தனி உறுப்புகளாக நாம் தனிப்பட்ட படங்களைக் காட்டலாம். இதோ ஒரு உதாரணம்... ஒரே படக் கோப்பில் இரண்டு பொத்தான்கள் உள்ளன:

இடதுபுறத்தில் உள்ள படம் காட்டப்பட வேண்டும் எனில், div உடன் வழங்கலாம் arrow-left வகுப்பாக, ஆயத்தொகுப்புகள் அந்தப் பக்கத்தை மட்டுமே காட்டுகின்றன:

.arrow-left {
  width: 200px;
  height: 200px;
  background: url('sprite.png') no-repeat 0 0;
}

நாம் சரியான அம்புக்குறியைக் காட்ட விரும்பினால், எங்கள் divக்கு வகுப்பை அமைப்போம் arrow-right.

.arrow-right {
  width: 200px;
  height: 200px;
  background: url('sprite.png') no-repeat -200px 0;
}

ஒளி மற்றும் இருண்ட பயன்முறைக்கான CSS உருவங்கள்

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

CSS ஐப் பயன்படுத்தி, பயனர் ஒளிப் பயன்முறை அல்லது இருண்ட பயன்முறையைப் பயன்படுத்துகிறாரா என்பதன் அடிப்படையில் பொருத்தமான படப் பின்னணியைக் காட்ட முடியும்:

:root {
  --sprite-image: url('sprite.png');
  --sprite-width: 200px;
  --sprite-height: 400px;
  --sprite-x-light: 0;
  --sprite-y-light: 0;
  --sprite-x-dark: -200px;
  --sprite-y-dark: 0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sprite-x-light: 200px;
    --sprite-x-dark: 0;
  }
}

.icon {
  width: 32px;
  height: 32px;
  background: var(--sprite-image) no-repeat var(--sprite-x-light) var(--sprite-y-light);
}

.icon:hover {
  background-position: var(--sprite-x-dark) var(--sprite-y-dark);
}

விதிவிலக்கு: மின்னஞ்சல் வாடிக்கையாளர்கள் இதை ஆதரிக்காமல் இருக்கலாம்

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

மற்றொரு வரம்பு என்னவென்றால், சில மின்னஞ்சல் கிளையண்டுகள் பொதுவாக CSS ஸ்பிரிட்களில் பயன்படுத்தப்படும் சில CSS பண்புகளை ஆதரிக்காது. background-position. இது ஸ்ப்ரைட் படக் கோப்பிற்குள் தனிப்பட்ட படங்களை வைப்பதை கடினமாக்கும்.