Агуулга маркетинг

Гэрэл ба харанхуй горимтой CSS спрайтуудыг хэрхэн ашиглах вэ

CSS sprites нь вэб хөгжүүлэлтэд ашигладаг, тоог багасгах арга юм HTTP вэб хуудсаар хийсэн хүсэлтүүд. Эдгээр нь олон жижиг зургийг нэг том зургийн файл болгон нэгтгэж, дараа нь CSS ашиглан тухайн зургийн тодорхой хэсгийг вэб хуудсан дээр тус тусад нь тусад нь харуулах явдал юм.

CSS спрайтуудыг ашиглахын гол давуу тал нь вэбсайтын хуудас ачаалах хугацааг сайжруулахад тусалдаг. Вэб хуудсанд зураг ачаалагдах бүрт тусдаа HTTP хүсэлт шаардагддаг бөгөөд энэ нь ачаалах процессыг удаашруулдаг. Олон зургийг нэг спрайт зураг болгон нэгтгэснээр бид хуудсыг ачаалахад шаардагдах HTTP хүсэлтийн тоог багасгаж чадна. Энэ нь ялангуяа дүрс, товчлуур гэх мэт олон жижиг зурагтай сайтуудад илүү хурдан бөгөөд илүү хариу үйлдэл үзүүлэхэд хүргэдэг.

CSS спрайтуудыг ашиглах нь хөтчийн кэшийг ашиглах боломжийг бидэнд олгодог. Хэрэглэгч вэбсайтад зочлох үед тэдний хөтөч эхний хүсэлтийн дараа спрайт зургийг кэшлэх болно. Энэ нь вэб хуудасны спрайт дүрсийг ашиглаж буй бие даасан элементүүдийн дараагийн хүсэлтүүд нь хөтчид аль хэдийн кэшдээ зурагтай байх тул илүү хурдан байх болно гэсэн үг юм.

CSS Спрайтууд өмнөх шигээ алдартай биш

CSS спрайтуудыг сайтын хурдыг сайжруулахад ашигладаг хэвээр байгаа ч тэд урьдынх шигээ тийм ч алдартай биш байж болох юм. Өндөр зурвасын өргөнтэй учир, вэбсайт формат, зургийн шахалт, контент хүргэх сүлжээ (CDN), залхуу ачиж буулгахБолон хүчтэй кэш Технологийн хувьд бид вэб дээр урьдынх шигээ олон CSS спрайтыг олж хардаггүй ... хэдий ч энэ нь маш сайн стратеги хэвээр байна. Хэрэв та олон тооны жижиг зургуудыг харуулсан хуудастай бол энэ нь ялангуяа ашигтай байдаг.

CSS Sprite жишээ

CSS спрайтуудыг ашиглахын тулд бид CSS ашиглан спрайт зургийн файл доторх зураг бүрийн байрлалыг тодорхойлох хэрэгтэй. Үүнийг ихэвчлэн тохируулах замаар хийдэг background-image болон background-position спрайт дүрсийг ашигладаг вэб хуудасны элемент бүрийн шинж чанарууд. Спрайт доторх зургийн x ба y координатыг зааж өгснөөр бид тус тусад нь зургийг хуудсан дээр тусад нь элемент болгон харуулах боломжтой. Энд жишээ дурдъя… нэг зургийн файлд бидэнд хоёр товчлуур байна:

CSS 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 Sprite

Үүний нэг сонирхолтой хэрэглээ бол гэрэл ба харанхуй горим юм. Магадгүй танд бараан дэвсгэр дээр харагдахгүй бараан тексттэй лого эсвэл зураг байгаа байх. Би гэрлийн горимд зориулсан цагаан төв, харанхуй горимд зориулсан харанхуй төвтэй товчлуурын жишээг хийсэн.

css sprite цайвар бараан

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 хувьсагчдыг дэмждэггүй бөгөөд үүнийг миний үзүүлсэн жишээн дээр гэрэл ба бараан горимын хооронд сэлгэх зорилгоор ашигладаг. Энэ нь янз бүрийн өнгөний схемд зориулж спрайт зургийн өөр хувилбаруудын хооронд шилжихийн тулд өөр техник ашиглах шаардлагатай гэсэн үг юм.

Өөр нэг хязгаарлалт нь зарим имэйл клиентүүд CSS sprite-д түгээмэл хэрэглэгддэг CSS шинж чанаруудыг дэмждэггүй. background-position. Энэ нь спрайт зургийн файл дотор тус тусдаа зургийг байрлуулахад хүндрэл учруулж болзошгүй.

Douglas Karr

Douglas Karr нь CMO юм OpenINSIGHTS болон үүсгэн байгуулагч Martech Zone. Дуглас олон арван амжилттай MarTech стартапуудад тусалж, Martech-ийн худалдан авалт, хөрөнгө оруулалтад 5 тэрбум гаруй долларын зохих шалгалт хийхэд тусалсан бөгөөд компаниудад борлуулалт, маркетингийн стратегиа хэрэгжүүлэх, автоматжуулахад нь тусалсаар байна. Дуглас бол олон улсад хүлээн зөвшөөрөгдсөн дижитал хувиргалт, MarTech мэргэжилтэн, илтгэгч юм. Дуглас бол Даммигийн гарын авлага, бизнесийн манлайллын номыг хэвлүүлсэн зохиолч юм.

холбоотой зүйл

Дээшээ буцах товч
Хаах

Adblock илэрсэн

Martech Zone Бид зар сурталчилгааны орлого, түншлэлийн холбоос, ивээн тэтгэгчээр дамжуулан сайтаа мөнгөжүүлдэг учраас энэ агуулгыг танд ямар ч үнэгүйгээр өгөх боломжтой. Та манай сайтыг үзэж байхдаа зар хориглогчоо устгавал бид талархах болно.