Планируемые новшества в CSS

Tab Atkins, член рабочей группы CSS и команды Google Chrome, опубликовал слайды презентации, которую он проводил в прошлую среду.

Эта презентация демонстрирует четыре относительно новых концепта:

Переменные
Объявляя переменную через конструкцию var, указав ее имя, значение, и все что-угодно от цвета до длины, вращений и функций, она может быть доступна для всего CSS, используемого на странице.

Поддержка локальных переменных также будет присутствовать, через конструкцию local

@var paragraph-size length 12px;
@var paragraph-color color rgba(0,0,0,0);
p {
  color: var(paragraph-color);
  font-size: var(paragraph-size);
}

Примеси
Примеси дают возможность расширить правило необходимыми свойствами с возможностью установки значений по умолчанию.

@mixin error {
  background: #fdd;
  color: red;
  font-weight: bold;
}
div.error {
  border: thick solid red;
  padding: .5em;
  @mixin error;
}
span.error {
  text-decoration: underline;
  @mixin error;
}

Вложения правил
Текущие вложения в CSS, особенно без использования классов или id, являются болезненными. Конструкция this преставлена для упрощения этого. Она будет применяться к потомкам действующего правила, наследуя его имя. Теперь можно будет сделать более ясной такую структуру:

header {
  color: red;
  @this a {
    color: blue;
  }
}

Модули
Нет, не те модули, которые составляют CSS 3. Модули — это обычные пространства имен для переменных и примесей. Переменные и примеси могут быть определены через прописание имени модуля в начало собственного имени, либо используя конструкцию use.

@module foo {
  @var bar color red;
  @mixin baz { color: blue; }
}
.foo {
  color: var(bar); // Не работает
}
.bar {
  @use foo;
  color: var(bar); // Работает
}
.baz {
  @mixin foo|baz;  // Работает
}

Хотя текущий код доступен всего на нескольких машинах в Сиднее, Гугл планирует опубликовать начальную спецификацию в этом квартале и реализовать новшества до конца года. Учитывая, что ни эти планы переменных, ни планы примесей не были распространены в почтовой подписке www-style, будет интересно увидеть, как изменения будут приняты остальными браузерами. Похожие обсуждения, несколько лет назад показали, что это довольно спорные вопросы с очень разными мнениями.

Слайды презентации