www.samag.ru
     
Поиск  
              
 www.samag.ru    Web  0 товаров , сумма 0 руб.
E-mail
Пароль  
 Запомнить меня
Регистрация | Забыли пароль?
Сетевой агент
О журнале
Журнал «БИТ»
Информация для ВАК
Звезды «СА»
Подписка
Где купить
Авторам
Рекламодателям
Магазин
Архив номеров
Мероприятия
Форум
Опросы
Ищу/Предлагаю работу
Спроси юриста
Игры
Контакты
   
Слайд шоу  
Представляем работы Виктора Чумачева
Виктор Чумачев – известный московский художник, который сотрудничает с «Системным администратором» уже несколько лет. Именно его забавные и воздушные, как ИТ, иллюстрации украшают многие серьезные статьи в журнале. Работы Виктора Чумачева хорошо знакомы читателям в России («Комсомольская правда», «Известия», «Московские новости», Коммерсант и др.) и за рубежом (США, Германия). Каждый раз, получая новый рисунок Виктора, мы в редакции улыбаемся. А улыбка, как известно, смягчает душу. Поэтому смотрите на его рисунки – и пусть у вас будет хорошее настроение!

  Опросы
Дискуссии  
17.09.2014г.
Просмотров: 14827
Комментарии: 3
Красть или не красть? О пиратском ПО как о российском феномене

Тема контрафактного ПО и защиты авторских прав сегодня актуальна как никогда. Мы представляем ...

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

03.03.2014г.
Просмотров: 18764
Комментарии: 1
Жизнь под дамокловым мечом

Политические события как катализатор возникновения уязвимости Законодательная инициатива Государственной Думы и силовых структур, ...

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

23.01.2014г.
Просмотров: 26805
Комментарии: 3
ИТ-специалист будущего. Кто он?

Так уж устроен человек, что взгляд его обращен чаще всего в Будущее, ...

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

1001 и 1 книга  
16.02.2017г.
Просмотров: 3974
Комментарии: 0
Опоздавших не бывает, или книга о стеке

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

17.05.2016г.
Просмотров: 6806
Комментарии: 0
Теория вычислений для программистов

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

30.03.2015г.
Просмотров: 8910
Комментарии: 0
От математики к обобщенному программированию

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

18.02.2014г.
Просмотров: 10508
Комментарии: 0
Рецензия на книгу «Читаем Тьюринга»

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

13.02.2014г.
Просмотров: 7325
Комментарии: 0
Читайте, размышляйте, действуйте

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

Друзья сайта  

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

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