В media queries нельзя использовать CSS свойства, но есть обходные пути через container queries

@property --inline-size-s {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 100vi;
}

:root {
  --breakpoint-s: 48em;
  --inline-size-s: min(var(--breakpoint-s), 100vi);
}

body {
  background-color: var(--bg-color);

  --bg-color: oklch(0.94 0.01 99);
  
  @container style(--inline-size-s: var(--breakpoint-s)) {
    --bg-color: oklch(0.87 0.21 95.82);
  }
}

#css

В проекте число иконок перевалило за 150, а их объем в JS бандле занимает пятую часть.

Поэтому задумался, как оптимизировать это дело. Стандартных решений не нашел. Решил вынести все иконки для кэширования через service worker. SVG спрайт слишком тяжелый для клиента, поэтому засунул всё в JSON, который считываю в JS и делаю Map по HTML кодам иконок.

На первой загрузке сайта получается лишний запрос. Потом норм.

Есть что-то более оптимальное?

#svg #optimization