របៀបប្រើ CSS Sprites ជាមួយនឹងរបៀបពន្លឺ និងងងឹត

ជា CSS sprites គឺជាបច្ចេកទេសដែលប្រើក្នុងការអភិវឌ្ឍន៍គេហទំព័រដើម្បីកាត់បន្ថយចំនួន របស់ HTTP សំណើដែលធ្វើឡើងដោយគេហទំព័រ។ ពួកវាពាក់ព័ន្ធនឹងការបញ្ចូលគ្នានូវរូបភាពតូចៗជាច្រើនទៅក្នុងឯកសាររូបភាពធំមួយ ហើយបន្ទាប់មកប្រើប្រាស់ CSS ដើម្បីបង្ហាញផ្នែកជាក់លាក់នៃរូបភាពនោះជាធាតុនីមួយៗនៅលើទំព័របណ្តាញ។

អត្ថប្រយោជន៍ចម្បងនៃការប្រើប្រាស់ CSS sprites គឺថាពួកគេអាចជួយកែលម្អពេលវេលាផ្ទុកទំព័រសម្រាប់គេហទំព័រមួយ។ រាល់ពេលដែលរូបភាពត្រូវបានផ្ទុកនៅលើទំព័របណ្តាញ វាទាមទារសំណើ HTTP ដាច់ដោយឡែក ដែលអាចពន្យឺតដំណើរការផ្ទុក។ ដោយការរួមបញ្ចូលរូបភាពជាច្រើនទៅក្នុងរូបភាព sprite តែមួយ យើងអាចកាត់បន្ថយចំនួនសំណើ HTTP ដែលត្រូវការដើម្បីផ្ទុកទំព័រ។ នេះអាចបណ្តាលឱ្យមានគេហទំព័រឆ្លើយតបកាន់តែលឿន និងរហ័ស ជាពិសេសសម្រាប់គេហទំព័រដែលមានរូបភាពតូចៗជាច្រើនដូចជារូបតំណាង និងប៊ូតុងជាដើម។

ការប្រើប្រាស់ CSS sprites ក៏អនុញ្ញាតឱ្យយើងទាញយកអត្ថប្រយោជន៍ពីឃ្លាំងសម្ងាត់កម្មវិធីរុករក។ នៅពេលអ្នកប្រើប្រាស់ចូលទៅកាន់គេហទំព័រ កម្មវិធីរុករកតាមអ៊ីនធឺណិតរបស់ពួកគេនឹងរក្សាទុករូបភាព sprite បន្ទាប់ពីសំណើដំបូង។ នេះមានន័យថាសំណើជាបន្តបន្ទាប់សម្រាប់ធាតុនីមួយៗនៅលើទំព័របណ្តាញដែលកំពុងប្រើរូបភាព sprite នឹងលឿនជាងមុន ដោយសារកម្មវិធីរុករកនឹងមានរូបភាពនៅក្នុងឃ្លាំងសម្ងាត់របស់វារួចហើយ។

CSS Sprites មិនមានប្រជាប្រិយភាពដូចពីមុនទេ។

CSS sprites នៅតែត្រូវបានប្រើប្រាស់ជាទូទៅដើម្បីកែលម្អល្បឿនគេហទំព័រ ទោះបីជាពួកវាប្រហែលជាមិនពេញនិយមដូចពីមុនក៏ដោយ។ ដោយសារតែកម្រិតបញ្ជូនខ្ពស់, webp ទម្រង់, ការបង្ហាប់រូបភាពបណ្តាញចែកចាយមាតិកា (CDN), ផ្ទុកខ្ជិល។និង ឃ្លាំងសម្ងាត់រឹងមាំ បច្ចេកវិទ្យា យើងមិនឃើញ CSS sprites ច្រើនដូចដែលយើងធ្លាប់ប្រើនៅលើបណ្តាញទេ… ទោះបីជាវានៅតែជាយុទ្ធសាស្ត្រដ៏អស្ចារ្យក៏ដោយ។ វាមានប្រយោជន៍ជាពិសេសប្រសិនបើអ្នកមានទំព័រដែលយោងរូបភាពតូចៗជាច្រើន។

CSS Sprite ឧទាហរណ៍

ដើម្បីប្រើ CSS sprites យើងត្រូវកំណត់ទីតាំងនៃរូបភាពនីមួយៗនៅក្នុងឯកសាររូបភាព sprite ដោយប្រើ CSS ។ ជាធម្មតានេះត្រូវបានធ្វើដោយការកំណត់ background-image និង background-position លក្ខណៈសម្បត្តិសម្រាប់ធាតុនីមួយៗនៅលើទំព័របណ្តាញដែលប្រើរូបភាព sprite ។ ដោយបញ្ជាក់កូអរដោនេ x និង y នៃរូបភាពនៅក្នុង sprite យើងអាចបង្ហាញរូបភាពនីមួយៗជាធាតុដាច់ដោយឡែកនៅលើទំព័រ។ នេះជាឧទាហរណ៍មួយ... យើងមានប៊ូតុងពីរក្នុងឯកសាររូបភាពតែមួយ៖

បើ​យើង​ចង់​ឱ្យ​រូបភាព​នៅ​ខាង​ឆ្វេង​ត្រូវ​បាន​គេ​បង្ហាញ យើង​អាច​ផ្តល់ 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 Sprites សម្រាប់របៀបពន្លឺ និងងងឹត

ការប្រើប្រាស់ដ៏គួរឱ្យចាប់អារម្មណ៍មួយគឺជាមួយនឹងរបៀបពន្លឺ និងងងឹត។ ប្រហែលជាអ្នកមានរូបសញ្ញា ឬរូបភាពដែលមានអក្សរងងឹតនៅលើវា ដែលមិនអាចមើលឃើញនៅលើផ្ទៃខាងក្រោយងងឹត។ ខ្ញុំ​បាន​ធ្វើ​ឧទាហរណ៍​នេះ​អំពី​ប៊ូតុង​មួយ​ដែល​មាន​ចំណុច​កណ្តាល​ពណ៌​ស​សម្រាប់​ទម្រង់​ពន្លឺ និង​មជ្ឈមណ្ឌល​ងងឹត​សម្រាប់​របៀប​ងងឹត។

ដោយប្រើ 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);
}

ករណីលើកលែង៖ អតិថិជនអ៊ីមែលអាចមិនគាំទ្រវាទេ។

កម្មវិធីអ៊ីមែលមួយចំនួនដូចជា Gmail មិនគាំទ្រអថេរ CSS ដែលត្រូវបានប្រើក្នុងឧទាហរណ៍ដែលខ្ញុំបានផ្តល់ជូនដើម្បីប្តូររវាងរបៀបពន្លឺ និងងងឹត។ នេះមានន័យថា អ្នកប្រហែលជាត្រូវប្រើបច្ចេកទេសជំនួស ដើម្បីប្តូររវាងកំណែផ្សេងគ្នានៃរូបភាព sprite សម្រាប់ពណ៌ចម្រុះផ្សេងៗ។

ដែនកំណត់មួយទៀតគឺថាកម្មវិធីអ៊ីមែលមួយចំនួនមិនគាំទ្រលក្ខណៈសម្បត្តិ CSS ជាក់លាក់ដែលត្រូវបានប្រើជាទូទៅនៅក្នុង CSS sprites ដូចជា background-position. វាអាចធ្វើឱ្យពិបាកក្នុងការកំណត់ទីតាំងរូបភាពនីមួយៗនៅក្នុងឯកសាររូបភាព sprite ។