CSS @scope
Мириам Сюзанн объясняет, в чём разница между обычным сложным селектором и относительно новой директивой
- Специфичность псевдокласса
- При этом вложенные в
- При помощи синтаксиса
- Чем ближе
-
Жду, когда эта крутая фича станет доступна не только в Chromium, но для демок в докладах пока хватает.
https://12daysofweb.dev/2023/css-scope/
Мириам Сюзанн объясняет, в чём разница между обычным сложным селектором и относительно новой директивой
@scope в CSS. Напомню, в CSS теперь можно задать область применения CSS-правил относительно какого-то родителя. И если раньше мы это делали банальным перечислением классов, то сейчас есть другой способ.- Специфичность псевдокласса
:scope, который позволяет обратиться к тому самому ограничивающему элементу, всегда равна [0, 1, 0].- При этом вложенные в
@scope селекторы не увеличивают свою специфичность. Это позволяет решить ту проблему, которую долгое время помогал решать БЭМ — борьба со специфичностью в проекте.- При помощи синтаксиса
@scope (.from) to (.to) можно задать «бублик» применения стилей. То есть стили начнут применяться по дереву внутри .from, но не будут залазить внутрь .to. Это вполне себе полезно для различных сложных компонентов со слотовой структурой.- Чем ближе
@scope по DOM-дереву, тем значимее стиль. Ещё раз, при нескольких @scope на странице, применимых к одному блоку применится не тот, что ниже в CSS-файле, а тот, что ближе к элементу по DOM-дереву. Это принципиально другой подход к стилизации.-
<style>@scope {...}</style> — гига-фича, позволяющая привязать стили к родительскому над style элементу. Я таким образом демки для слайдов начал собирать, чтобы не париться с iframe. Никаким наследованием такое не сделать. Как CSS-модули, только нативное и без предобработки.Жду, когда эта крутая фича станет доступна не только в Chromium, но для демок в докладах пока хватает.
https://12daysofweb.dev/2023/css-scope/