Статьи

Переменные CSS попадают в Firefox 31

Январь 25, 2019

Firefox 31 был выпущен 22 июля 2014 года. Возможно, он у вас уже есть, но если нет, откройте диалоговое окно « О Firefox » из меню или перейдите на Firefox.com, чтобы загрузить свежую копию.

Не ожидайте слишком много сюрпризов. Существует несколько новых настроек языка и инструментов разработчика, но есть только одно важное дополнение: переменные CSS. Firefox 31 — первый основной браузер, который поддерживает собственные переменные CSS без необходимости включать экспериментальные функции.

Переменный синтаксис CSS

Я впервые написал о переменных CSS в сентябре 2012 года. Мы ждали немало времени, и вы должны заметить, что синтаксис изменился.

Чтобы объявить переменную CSS: 

element {
  --my-variable: #c00;
}

где:

  • Элемент является селектором. Значение переменной доступно для всех стилей, которые наследуются от этого селектора. Используйте :root
  • Моя переменная — это имя переменной. Он должен начинаться с двух дефисов, за которыми следует имя по вашему выбору. Соглашения об именах кажутся довольно свободными, и вы можете использовать большинство символов, за исключением тех, которые требуются синтаксисом CSS, то есть:; {} Тем не менее, я бы рекомендовал держать их простыми и придерживаться буквенно-цифровых символов.
  • Наконец, вы устанавливаете значение после двоеточия. Любой тип может быть определен и использован в другом месте, например, цвета, шрифты, размеры, параметры перехода и т. Д.

Пример: 

 :root {
  --my-font: arial, helvetica, sans-serif;
  --my-color: #333;
  --my-background: #fff;
  --page-width: 80%;
  --max-page-width: 50em;
}

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

 body {
  font-family: var(--my-font);
  color: var(--my-color);
  background-color: var(--my-background);
}

main {
  width: var(--page-width);
  max-width: var(--max-page-width);
}

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

Переменные CSS имеют спецификацию рабочего проекта W3C, но их поддержка ограничена Firefox 31 и выше. Другие поставщики не сделали ни того, ни другого, поэтому на данный момент вам, вероятно, следует избегать использования собственных переменных CSS, если только вы не ориентированы на аудиторию только для Firefox.

Слишком маленький, слишком поздно?

Собственные CSS-переменные произвели бы революцию в нашей рабочей жизни, если бы они были внедрены десять лет назад. Сегодня, если вы хотите использовать переменные в ваших таблицах стилей, вы, вероятно, уже это сделали. Препроцессоры, такие как Sass , Less и Stylus, предоставляют переменную функциональность со многими другими преимуществами:

  1. Нет проблем с поддержкой браузера.
  2. Переменный синтаксис проще, например, $my-variable
  3. Переменные предварительно обрабатываются один раз, а не каждый раз, когда страница отображается.
  4. Неверный синтаксис сообщается препроцессором.
  5. Вы можете воспользоваться возможностями, подобными языку программирования, такими как: включение, вложение, смешивание, функции, условия, циклы и многое другое.

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

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

35
Share: