Можно ли закэшировать через CSS

«Можно ли закэшировать через CSS» — вопрос из категории CSS, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Да, CSS можно использовать для кэширования некоторых ресурсов, но не напрямую. Вот основные способы:

  1. Использование :visited - можно кэшировать стили для посещённых ссылок:
a:visited {
  color: purple;
}
  1. Кэширование шрифтов - при правильном объявлении шрифты кэшируются браузером:
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap;
}
  1. CSS-спрайты - объединение изображений в один файл уменьшает количество запросов:
.icon {
  background-image: url('sprites.png');
  background-position: -10px -20px;
}

Важно: сам CSS-файл кэшируется браузером при правильных HTTP-заголовках (Cache-Control, Expires). Для полноценного кэширования данных лучше использовать Service Workers или localStorage.