Обновление смягченного синтаксиса вложенности CSS

Упреждающее вложение включено в Chrome 120.

Adam Argyle

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

Поддержка браузера

• 120
• 120
• 117
• 17.2

Источник

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

Вложенные имена тегов элементов

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

.card {
  h1 {
    /* this is now valid! */
  }
}

/* the same as */
.card {
  & h1 {
    /* this is now valid! */
  }
}

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

dl {
  dt {
    /* dl dt styles */
  }

  dd {
    /* dl dd styles */
  }
}

Что изменилось, чтобы разрешить такое вложение?

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

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

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