Обновление синтаксиса CSS вложенности

В начале этого года в Chrome 112 появилась вложенность CSS, и теперь она есть во всех основных браузерах.

Однако в синтаксис было внесено одно строгое и потенциально неожиданное требование, указанное первым в разделе Недопустимые примеры вложения статьи Вложенность CSS. В этой статье мы расскажем, что изменилось в спецификации и в Chrome 120.

Вложенность имён тегов элементов

Одним из наиболее удивительных ограничений в первом релизе синтаксиса CSS вложенности был запрет вложения имён тегов элементов без & или :is(). Это было устранено, что сделало допустимыми следующие CSS вложения:

.card {
  h1 {
    /* теперь это работает! */
  }
}

/* то же самое, что */
.card {
  & h1 {
    /* теперь это теперь это работает! */
  }
}

Это становится действительно удобным при вложении упорядоченных, неупорядоченных списков или списков определений:

dl {
  dt {
    /* стили dl dt */
  }

  dd {
    /* стили dl dd */
  }
}

Какие изменения привели к появлению возможности такой вложенности

Во многом это стало возможным благодаря исследованиям и созданию прототипов инженерами Chrome в сочетании с желанием сообщества и CSS Working Group.

Существовали большие сомнения в том, что парсер CSS можно научить отличать имя тега (div) от имени свойства (visibility), поскольку в настоящее время парсер не имеет понятия, что нужно заглядывать вперёд. Чтобы понять, что лексема является свойством, браузеру необходимо заглянуть вперёд и посмотреть, не следует ли за неизвестной лексемой символ :. Поэтому в первоначальной спецификации символ & использовался для указания браузеру на то, что следующее за ним свойство является вложенным, а не обычным CSS свойством и значением.

К счастью, инженер обнаружил, что если парсеру не удалось разобрать вложенный селектор как свойство при обычном проходе, то его можно перезапустить в режиме, предполагающем наличие селектора вместо свойства. Парсинг возобновляется, подтверждая вложенность как вложенность селектора. Это достаточно быстро и достаточно надёжно, чтобы быть достаточным для релиза синтаксиса.