Главная » Css live » Первый публичный черновик CSS-каскада 5 уровня

Первый публичный черновик CSS-каскада 5 уровня

Рабочая группа CSS опубликовала первый публичный черновик модуля каскада и наследования 5 уровня. Главная его новинка по сравнению с текущим, 4 уровнем — так называемые «слои» стилей, добавочный критерий каскада, позволяющий задавать приоритет целой группе стилей и гарантирующий, что стили одного «слоя» всегда перекроют стили другого независимо от их специфичности и порядка в коде. Например, стили темы оформления всегда будут перекрывать стили сайта по умолчанию, и для этого не понадобится наращивать специфичность или следить за порядком подключения CSS-файлов. Идея и проработка этого механизма — заслуга Мириам Сьюзен, которая специально для этого присоединилась к команде редакторов в качестве приглашенного эксперта W3C.

«Слои» стилей создаются ключевым словом @layer. Есть два варианта синтаксиса — в виде блока, внутри которого записываются обычные правила с селекторами (как @media), и в виде ссылки на отдельный CSS-файл (как @import). Стили из блоков (и файлов) с одинаковым именем слоя попадают в один и тот же слой. Блоки @layer могут быть вложенными. Приоритет слоёв задается порядком их объявления, причем можно объявить его «заранее», в самом начале CSS-кода, и лишь потом «распределять» стили по этим слоям:

/* объявляем заранее 3 слоя в порядке возрастания приоритета */
@layer default, theme, components; /* стили из theme.css попадут в слой 'theme' */
@layer theme url(theme.css); /* Стили ниже попадут в слой 'default' (базовые). Они всегда будут перекрываться стилями из 'theme', несмотря на то, что ниже в коде, и даже при более высокой специфичности */
@layer default url(headings.css); @layer default { audio[controls] { display: block; }
}

Теперь дело за браузерами, чтобы это реализовать. Как видите, и в 2021 году CSS остается каскадными таблицами стилей, но «стихия» каскада становится всё более управляемой. Так что не упустите возможность подчинить себе всю мощь этой стихии (а не «бороться» с ней). Тем более, что W3C вступает в 2021 год не только с новым рабочим процессом (теперь спецификации будут реже «прыгать» туда-обратно между статусами черновика и кандидата в рекомендации, а на устаревших спецификациях будет специальная пометка, и ориентироваться в них станет проще), но и с новым официальным определением CSS (восьмым по счету), кучей новых возможностей для работы с текстом и цветами, гридами, незаметно «доросшими» аж до 3 уровня (именно туда вошел черновик стандарта Masonry-раскладки), и множеством других полезных мелочей. Следите за новинками вместе с нами!

P.S. Это тоже может быть интересно: