Вміст Маркетинг

Як використовувати спрайти 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 може надати вам цей вміст безкоштовно, оскільки ми монетизуємо наш сайт за рахунок доходів від реклами, партнерських посилань і спонсорства. Ми будемо вдячні, якщо ви видалите блокувальник реклами під час перегляду нашого сайту.