CSS variables

Константы в ЦСС (которые почему-то называются «переменными») — прекрасная штука, особенно в сочетании с вычисляемыми выражениями (calc). Я рад, что браузеры постепенно внедряют эксперементальную поддержку, с нынешними темпами обновшения есть надежда начать это использовать уже очень скоро (calc я уже использую, его ограниченно поддерживает даже IE9).

Идея замечательная — если у вас есть какая-то общая для многих элементов характеристика, можно её вынести в переменную и менять из одного места. Этого настолько нехватает, что появилась целая куча предпроцессоров, которые расцвели вокруг этой проблемы, как ряска на стоячей воде. Справедливости ради, это не единственная проблема, которой они кормятся, но самая важная, на мой взгляд.

В 31-м Файерфоксе (он пока ещё в бете) синтаксис констант сменился и теперь будет включен по-умолчанию. Выглядит это так:

:root {
  --bgcolor: #000; 
}

body {
  background-color: var(--bgcolor);
}

Как видите, префикс «var» сменился на два минуса в полном соответствии с изменениями в стандарте. Чем не устроил предыдущий синтаксис мне не интересно, но этот префикс набирать определённо быстрее — всего-то надо нажать одну клавишу два раза.

Поделиться
Отправить
4 комментария
Никита Баксаляр (n-baksalyar.ya.ru)

Странный выбор для обозначения переменной/константы — по-моему, «@» по аналогии с LESS/Sass смотрелся бы лучше.

Евгений Степанищев (bolknote.ru)

Комментарий для n-baksalyar.ya.ru:

Они исходят ещё и из допустимого в CSS синтаксиса — обратная совместимость не должна ломаться. Возможно «собака» её ломает.

Игорь

Хорошо, конечно — константы в CSS, но какой смысл, если это поддерживыает только Файерфокс

Евгений Степанищев (bolknote.ru)

Комментарий для Игорь:

Как обычно — сначала один браузер, потом остальные. Чему тут удивляться? Это обычный процесс.

Популярное