Tarkib Marketing

Yorug'lik va qorong'u rejimda CSS spritlaridan qanday foydalanish kerak

CSS spritlar sonini kamaytirish uchun veb-ishlab chiqishda qo'llaniladigan texnikadir HTTP veb-sahifa orqali qilingan so'rovlar. Ular bir nechta kichik tasvirlarni bitta kattaroq rasm fayliga birlashtirishni va keyin ushbu tasvirning muayyan bo'limlarini veb-sahifada alohida elementlar sifatida ko'rsatish uchun CSS-dan foydalanishni o'z ichiga oladi.

CSS spritlaridan foydalanishning asosiy afzalligi shundaki, ular veb-sayt uchun sahifa yuklash vaqtini yaxshilashga yordam beradi. Tasvir har safar veb-sahifaga yuklanganda, u alohida HTTP so'rovini talab qiladi, bu yuklash jarayonini sekinlashtirishi mumkin. Bir nechta tasvirni bitta sprite tasvirga birlashtirib, biz sahifani yuklash uchun zarur bo'lgan HTTP so'rovlari sonini kamaytirishimiz mumkin. Bu, ayniqsa, piktogramma va tugmalar kabi ko'plab kichik tasvirlarga ega saytlar uchun tezroq va sezgirroq veb-saytga olib kelishi mumkin.

CSS spritlaridan foydalanish, shuningdek, brauzer keshlash imkoniyatlaridan foydalanishga imkon beradi. Foydalanuvchi veb-saytga tashrif buyurganida, ularning brauzeri birinchi so'rovdan keyin sprite tasvirni keshlaydi. Bu shuni anglatadiki, veb-sahifadagi sprite tasviridan foydalanadigan alohida elementlarga keyingi so'rovlar tezroq bo'ladi, chunki brauzer allaqachon keshda tasvirga ega bo'ladi.

CSS spritlari avvalgidek mashhur emas

CSS spritlari hanuzgacha sayt tezligini oshirish uchun ishlatiladi, garchi ular avvalgidek mashhur bo'lmasa ham. Yuqori tarmoqli kengligi tufayli, veb-sahifa formatlar, tasvirni siqish, kontent yetkazib berish tarmoqlari (CDN), dangasa yuklashva kuchli keshlash texnologiyalar, biz internetda avvalgidek ko'p CSS spritlarini ko'rmayapmiz… garchi bu hali ham ajoyib strategiya. Agar sizda ko'plab kichik rasmlarga havola qilingan sahifangiz bo'lsa, bu ayniqsa foydalidir.

CSS Sprite misoli

CSS spritlaridan foydalanish uchun biz CSS-dan foydalanib, har bir alohida tasvirning sprite tasvir faylidagi o'rnini aniqlashimiz kerak. Bu odatda sozlash orqali amalga oshiriladi background-image va background-position sprite tasviridan foydalanadigan veb-sahifadagi har bir element uchun xususiyatlar. Sprite ichidagi tasvirning x va y koordinatalarini belgilash orqali biz alohida tasvirlarni sahifada alohida elementlar sifatida ko'rsatishimiz mumkin. Mana bir misol... bitta rasm faylida ikkita tugma mavjud:

CSS Sprite misoli

Agar chapdagi rasm ko'rsatilishini istasak, biz divni taqdim etishimiz mumkin arrow-left sinf sifatida koordinatalar faqat shu tomonni ko'rsatadi:

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

Va agar biz o'ng o'qni ko'rsatishni xohlasak, biz div uchun sinfni o'rnatamiz arrow-right.

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

Yorug'lik va qorong'u rejim uchun CSS Sprite

Buning qiziqarli foydalanishlaridan biri yorug'lik va qorong'i rejimlardir. Ehtimol, sizda qorong'u fonda ko'rinmaydigan qora matnli logotip yoki rasmingiz bor. Men yorug'lik rejimi uchun oq markaz va qorong'u rejim uchun qorong'u markazga ega bo'lgan tugmachaning misolini qildim.

css sprite ochiq qorong'i

CSS-dan foydalanib, foydalanuvchi yorug'lik rejimi yoki qorong'i rejimdan foydalanayotganiga qarab tegishli rasm fonini ko'rsatishim mumkin:

: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);
}

Istisno: Elektron pochta mijozlari buni qo'llab-quvvatlamasligi mumkin

Gmail kabi ba'zi elektron pochta mijozlari CSS o'zgaruvchilarini qo'llab-quvvatlamaydi, ular men taqdim etgan misolda yorug'lik va qorong'i rejimlarni almashtirish uchun ishlatiladi. Bu shuni anglatadiki, siz turli xil rang sxemalari uchun sprite tasvirining turli versiyalari o'rtasida almashish uchun muqobil usullardan foydalanishingiz kerak bo'lishi mumkin.

Yana bir cheklov shundaki, ba'zi elektron pochta mijozlari CSS spritlarida tez-tez ishlatiladigan ba'zi CSS xususiyatlarini qo'llab-quvvatlamaydi, masalan background-position. Bu sprite tasvir faylida alohida tasvirlarni joylashtirishni qiyinlashtirishi mumkin.

Douglas Karr

Douglas Karr ning CMO hisoblanadi OpenINSIGHTS va asoschisi Martech Zone. Duglas o'nlab muvaffaqiyatli MarTech startaplariga yordam berdi, Martechni sotib olish va investitsiyalarida 5 milliard dollardan ortiq mablag'ni sinchkovlik bilan tekshirishda yordam berdi va kompaniyalarga savdo va marketing strategiyalarini amalga oshirish va avtomatlashtirishda yordam berishda davom etmoqda. Duglas xalqaro miqyosda tan olingan raqamli transformatsiya va MarTech mutaxassisi va ma'ruzachisi. Duglas, shuningdek, Dummie's qo'llanmasi va biznes rahbariyati kitobining nashr etilgan muallifi.

Haqida Maqolalar

Yuqoriga qaytish tugmasi
yaqin

Adblock aniqlandi

Martech Zone Sizga ushbu kontentni hech qanday to'lovsiz taqdim eta oladi, chunki biz saytimizni reklama daromadlari, sheriklik havolalari va homiylik orqali monetizatsiya qilamiz. Saytimizni ko'rayotganingizda reklama blokeringizni olib tashlasangiz, biz juda minnatdormiz.