Переменные в CSS без препроцессоров::Журнал СА 06.2016
www.samag.ru
     
Поиск   
              
 www.samag.ru    Web  0 товаров , сумма 0 руб.
E-mail
Пароль  
 Запомнить меня
Регистрация | Забыли пароль?
О журнале
Журнал «БИТ»
Информация для ВАК
Звезды «СА»
Подписка
Где купить
Авторам
Рекламодателям
Магазин
Архив номеров
Вакансии
Игры
Контакты
   

  Опросы

Какие курсы вы бы выбрали для себя?  

Очные
Онлайновые
Платные
Бесплатные
Я и так все знаю

 Читать далее...

1001 и 1 книга  
24.12.2018г.
Просмотров: 837
Комментарии: 0
Python. Разработка на основе тестирования

 Читать далее...

24.12.2018г.
Просмотров: 624
Комментарии: 0
Скрапинг веб-сайтов с помощью Python

 Читать далее...

24.12.2018г.
Просмотров: 558
Комментарии: 0
Смарт-карты и информационная безопасность

 Читать далее...

24.12.2018г.
Просмотров: 559
Комментарии: 0
Идеи машинного обучения

 Читать далее...

22.11.2018г.
Просмотров: 853
Комментарии: 0
MySQL 8 для больших данных

 Читать далее...

Друзья сайта  

Форум системных администраторов  

sysadmins.ru

 Переменные в CSS без препроцессоров

Архив номеров / 2016 / Выпуск №6 (163) / Переменные в CSS без препроцессоров

Рубрика: Разработка /  Особенности языка

Александр Майоров АЛЕКСАНДР МАЙОРОВ, Tutu.ru, руководитель отдела Frontend-разработки, alexander@majorov.su

Переменные в CSS без препроцессоров

В статье рассмотрим новый механизм нативных переменных в CSS или, как правильнее, пользовательских свойств. Как они работают, какие особенности, примеры использования

Чего всегда остро не хватало в каскадных таблицах стилей, так это возможности выносить повторяющиеся блоки в переменные. Хотя, помимо этого, много чего еще не хватает, особенно программистам, но переменные – это же основа основ.

Справиться с этим недостатком мир веб-разработки смог с помощью препроцессоров. Но все-таки нам не хватало родных нативных переменных. И вот свершилось – в CSS можно писать переменные (пользовательские свойства). Подробнее об этом мы и поговорим.

Переменные или свойства?

Официально они называются «Custom properties». Но также используется активно название «Native variables». Если вы программист, то точно хорошо знакомы с переменными и неможете себе представить жизнь без них. По определению переменная – это временное хранилище, которое содержит некое значение величины или информации. Переменной можно присвоить значение. Переменными можно оперировать и получать новые значения, которые, в свою очередь, присваиваются новой переменной.

Идея использовать переменные для таблицы стилей была одной из тех причин, по которым появились препроцессоры LESSS, SASS, Compas… CSS-препроцессоры – замечательные инструменты, облегчающие работу верстальщиков, позволяя разбивать CSS на модули, задавать переменные и описывать пространства имен. Но переменные в них статичны, а навыходе препроцессора мы получаем все тот же статичный CSS с множеством повторяющихся кодов.

К тому же переменные препроцессоров не каскадируются. А мы же работаем с каскадом стилей. При использовании переменных рано или поздно встает вопрос области видимости. Должна ли конкретная переменная быть глобальной, должна ли она ограничиваться своим файлом, модулем или блоком? Поскольку CSS оформляет HTML, то выходит, что лучший способ ограничивать область видимости – это на уровне DOM-элемента. А так как препроцессоры работают не в браузере и никогда не видят разметки, то им это недоступно.

Нативные CSS-переменные – совсем другой вид переменных. Главное их преимущество – они динамические, а их видимость привязана к DOM. Название «переменные» привычно для программистов, но оно сбивает с толку. На самом деле это CSS-свойства, что дает им совершенно другой спектр возможностей и позволяет им решать совсем другие задачи.

Пользовательские CSS-свойства – такие же CSS-свойства, как и другие, и ведут себя они точно так же (с тем исключением, что они не применяют никакого оформления).

Как и обычные CSS-свойства, пользовательские свойства динамичны:

  • можно менять во время выполнения;
  • можно обновлять в медиавыражении;
  • можно обновлять при добавлении нового класса в DOM
  • можно задавать inline;
  • можно перекрывать, пользуясь всеми правилами каскада;
  • они наследуются.

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

Статью целиком читайте в журнале «Системный администратор», №06 за 2016 г. на страницах 62-63.

PDF-версию данного номера можно приобрести в нашем магазине.


Комментарии отсутствуют

Добавить комментарий

Комментарии могут оставлять только зарегистрированные пользователи

               Copyright © Системный администратор

Яндекс.Метрика
Tel.: (499) 277-12-41
Fax: (499) 277-12-45
E-mail: sa@samag.ru