Content Marketing

Как да използвате CSS спрайтове със светъл и тъмен режим

CSS спрайтовете са техника, използвана в уеб разработката за намаляване на броя на HTTP заявки, направени от уеб страница. Те включват комбиниране на множество малки изображения в един по-голям графичен файл и след това използване на CSS за показване на конкретни секции от това изображение като отделни елементи на уеб страницата.

Основната полза от използването на CSS спрайтове е, че те могат да помогнат за подобряване на времето за зареждане на страницата за уебсайт. Всеки път, когато изображение се зарежда на уеб страница, то изисква отделна HTTP заявка, което може да забави процеса на зареждане. Чрез комбиниране на множество изображения в едно изображение на спрайт, можем да намалим броя на HTTP заявките, необходими за зареждане на страницата. Това може да доведе до по-бърз и по-отзивчив уебсайт, особено за сайтове с много малки изображения като икони и бутони.

Използването на CSS спрайтове също ни позволява да се възползваме от кеширането на браузъра. Когато потребител посети уебсайт, неговият браузър ще кешира изображението на спрайт след първата заявка. Това означава, че последващите заявки за отделни елементи на уеб страницата, които използват изображението на спрайта, ще бъдат много по-бързи, тъй като браузърът вече ще има изображението в своя кеш.

CSS спрайтовете не са толкова популярни, колкото бяха

CSS спрайтовете все още се използват често за подобряване на скоростта на сайта, въпреки че може да не са толкова популярни, колкото бяха преди. Поради високата честотна лента, WebP формати, компресия на изображения, мрежи за доставка на съдържание (CDN), мързеливо зареждане, и силно кеширане технологии, не виждаме толкова много CSS спрайтове, колкото преди в мрежата... въпреки че все още е страхотна стратегия. Това е особено полезно, ако имате страница, която препраща към множество малки изображения.

Пример за CSS спрайт

За да използваме CSS спрайтове, трябва да дефинираме позицията на всяко отделно изображение във файла със спрайт изображение с помощта на CSS. Това обикновено се прави чрез настройка на background-image намлява background-position свойства за всеки елемент на уеб страницата, който използва изображението на спрайта. Като посочим координатите x и y на изображението в рамките на спрайта, можем да покажем отделни изображения като отделни елементи на страницата. Ето един пример... имаме два бутона в един файл с изображение:

Пример за CSS спрайт

Ако искаме да се покаже изображението отляво, можем да предоставим на 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 спрайт светъл тъмен

Използвайки 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 свойства, които обикновено се използват в CSS спрайтове, като напр. background-position. Това може да затрудни позиционирането на отделни изображения във файла с изображение на спрайт.

Douglas Karr

Douglas Karr е CMO на OpenINSIGHTS и основателят на Martech Zone. Дъглас е помогнал на десетки успешни стартъпи на MarTech, съдействал е за надлежна проверка на над $5 милиарда в придобивания и инвестиции на Martech и продължава да помага на компаниите при прилагането и автоматизирането на техните стратегии за продажби и маркетинг. Дъглас е международно признат експерт и лектор по дигитална трансформация и MarTech. Дъглас също е публикуван автор на ръководство за манекени и книга за бизнес лидерство.

Свързани статии

Бутон "Нагоре" горе
Близо

Открит е рекламен блок

Martech Zone е в състояние да ви предостави това съдържание безплатно, тъй като осигуряваме приходи от нашия сайт чрез приходи от реклами, партньорски връзки и спонсорство. Ще сме благодарни, ако премахнете блокера си за реклами, докато разглеждате нашия сайт.