Нативный CSS-скоупинг: как изолировать стили без сборщиков
Если вы работали с Vue или Svelte, то наверняка любите их локальные стили (scoping) — это когда код компонента заперт внутри него и не ломает верстку в других частях сайта. Раньше для этого приходилось настраивать CSS Modules или плагины для Webpack/Vite. Теперь браузеры учатся делать это сами.
В Safari появилась интересная фича — контейнеры только по имени (Name-Only Containers).
Обычно директива @container проверяет размеры экрана (например, «если родитель шире 500px»). Но если убрать условие размера и оставить только имя, мы получаем отличный инструмент для изоляции стилей:
CSS
/* Обозначаем границы нашего компонента карточки */
.my-card {
container-name: card-container;
}
/* Пишем стили, которые будут работать ТОЛЬКО внутри этой карточки */
@container card-container {
.title { color: royalblue; }
}
Теперь, даже если на сайте есть другие элементы с классом .title, наш цвет применится только внутри .my-card.
👉 @seniorFront
Если вы работали с Vue или Svelte, то наверняка любите их локальные стили (scoping) — это когда код компонента заперт внутри него и не ломает верстку в других частях сайта. Раньше для этого приходилось настраивать CSS Modules или плагины для Webpack/Vite. Теперь браузеры учатся делать это сами.
В Safari появилась интересная фича — контейнеры только по имени (Name-Only Containers).
Обычно директива @container проверяет размеры экрана (например, «если родитель шире 500px»). Но если убрать условие размера и оставить только имя, мы получаем отличный инструмент для изоляции стилей:
CSS
/* Обозначаем границы нашего компонента карточки */
.my-card {
container-name: card-container;
}
/* Пишем стили, которые будут работать ТОЛЬКО внутри этой карточки */
@container card-container {
.title { color: royalblue; }
}
Теперь, даже если на сайте есть другие элементы с классом .title, наш цвет применится только внутри .my-card.
👉 @seniorFront