Как использовать спрайты CSS со светлым и темным режимом
CSS спрайты — это метод, используемый в веб-разработке для уменьшения количества HTTP запросы, сделанные веб-страницей. Они включают в себя объединение нескольких небольших изображений в один файл большего размера, а затем использование CSS для отображения определенных частей этого изображения в виде отдельных элементов на веб-странице.
Основное преимущество использования спрайтов CSS заключается в том, что они могут помочь сократить время загрузки страницы веб-сайта. Каждый раз, когда изображение загружается на веб-страницу, требуется отдельный HTTP-запрос, что может замедлить процесс загрузки. Объединив несколько изображений в один спрайт, мы можем уменьшить количество HTTP-запросов, необходимых для загрузки страницы. Это может привести к более быстрому и быстрому отклику веб-сайта, особенно для сайтов с большим количеством небольших изображений, таких как значки и кнопки.
Использование спрайтов CSS также позволяет нам использовать кеширование браузера. Когда пользователь посещает веб-сайт, его браузер кэширует изображение спрайта после первого запроса. Это означает, что последующие запросы к отдельным элементам на веб-странице, использующим изображение спрайта, будут выполняться намного быстрее, поскольку браузер уже будет иметь изображение в своем кеше.
CSS-спрайты уже не так популярны, как раньше
Спрайты CSS по-прежнему широко используются для повышения скорости сайта, хотя они могут быть не такими популярными, как раньше. Из-за высокой пропускной способности, WebP форматы, сжатие изображения, сети доставки контента (CDN), ленивая загрузкакачества сильное кэширование технологии, мы не видим столько спрайтов CSS, как раньше в Интернете… хотя это все еще отличная стратегия. Это особенно полезно, если у вас есть страница, которая ссылается на множество небольших изображений.
Пример CSS-спрайта
Чтобы использовать спрайты CSS, нам нужно определить положение каждого отдельного изображения в файле изображения спрайта с помощью CSS. Обычно это делается путем установки background-image
до background-position
свойства для каждого элемента на веб-странице, использующего изображение спрайта. Указав координаты x и y изображения внутри спрайта, мы можем отображать отдельные изображения как отдельные элементы на странице. Вот пример… у нас есть две кнопки в одном файле изображения:
Если мы хотим, чтобы отображалось изображение слева, мы можем предоставить 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, я могу отобразить соответствующий фон изображения в зависимости от того, использует ли пользователь светлый или темный режим:
: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
. Это может затруднить размещение отдельных изображений в файле изображения спрайта.