Содержание маркетинга

Как использовать спрайты 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 является директором по маркетингу OpenINSIGHTS и основатель компании Martech Zone. Дуглас помог десяткам успешных стартапов MarTech, помог в комплексной проверке приобретений и инвестиций Martech на сумму более 5 миллиардов долларов, а также продолжает помогать компаниям во внедрении и автоматизации их стратегий продаж и маркетинга. Дуглас — международно признанный эксперт по цифровой трансформации, а также эксперт в области MarTech и спикер. Дуглас также является автором опубликованного руководства для чайников и книги по бизнес-лидерству.

Статьи по теме

Вернуться к началу кнопки
Закрыть

Adblock обнаружен

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