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

  Опросы
  Статьи

Сетевая инфраструктура  

Как удаленная работа меняет подход к сетевой инфраструктуре?

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

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

Мониторинг  

Какой мониторинг нужен сегодня?

По мнению экспертов ГК InfoWatch, действия сотрудников – самая распространенная причина инцидентов

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

Книжная полка  

Руководство для тех, кто увлечен ИИ, программированием. И дизайном

Накануне лета издательство «БХВ» выпустило книжные новинки, от которых любителям чтения будет

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

Мобильные приложения  

Искусственный интеллект в мобильных приложениях: возможности и перспективы

Обзор современных применений ИИ в мобильных приложениях, анализ перспектив развития этой технологии,

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

ИТ-образование  

Как сделать ИТ-образование эффективным?

Эксперты ИТ-отрасли отвечают на вопросы «СА». Обсуждаем ключевые аспекты для улучшения образовательных

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

Work-life balance  

Как айтишнику найти баланс между работой и личной жизнью?

Обсуждаем инструменты для эффективного управления временем, снижения уровня стресса и достижения гармонии. На

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

Книжная полка  

Всё самое нужное – под одной обложкой

Отличительная черта книжных новинок, выпущенных недавно издательством «БХВ» – это их универсальность. Не просто

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

ИТ-инфраструктура  

Системы мониторинга ИТ-инфраструктуры-2025

Без мониторинга ИТ-инфраструктуры не обходится ни одна компания, хотя бы потому, что

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

Открытое ПО  

Безопасность Open Source: рискуем или контролируем?

Компания «Кросс технолоджис» изучила, как используется ПО с открытым кодом в компаниях

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

Работа с нейросетью  

Скажи, есть ли у тебя AI, и я скажу, кто ты

Недавно сервис по поиску работы SuperJob выяснил, что каждый второй россиянин уже

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

Опрос  

Защита личных и клиентских данных: как мошенники используют ИИ и как защититься?

По данным RED Security, общее число кибератак на российские компании в 2024

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

Опрос  

Облачные инструменты для разработчиков

Эксперты ИТ-отрасли отвечают на вопросы «Системного администратора» > Как с помощью облака сделать

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

Опрос  

Рынок мобильных приложений: что будет актуальным в 2025 году?

Эксперты ИТ-отрасли отвечают на вопросы «Системного администратора» > Ваши прогнозы: чего ожидать от

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

Рынок труда  

Как успешно пройти все этапы собеседования на ИТ-должность?

По оценкам государства, дефицит ИТ-специалистов составляет от 740 тысяч до 1 миллиона

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

1001 и 1 книга  
19.03.2018г.
Просмотров: 8138
Комментарии: 0
Машинное обучение с использованием библиотеки Н2О

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

12.03.2018г.
Просмотров: 8396
Комментарии: 0
Особенности киберпреступлений в России: инструменты нападения и защита информации

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

12.03.2018г.
Просмотров: 5726
Комментарии: 0
Глубокое обучение с точки зрения практика

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

12.03.2018г.
Просмотров: 3602
Комментарии: 0
Изучаем pandas

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

12.03.2018г.
Просмотров: 4388
Комментарии: 0
Программирование на языке Rust (Цветное издание)

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

19.12.2017г.
Просмотров: 4397
Комментарии: 0
Глубокое обучение

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

19.12.2017г.
Просмотров: 6947
Комментарии: 0
Анализ социальных медиа на Python

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

19.12.2017г.
Просмотров: 3743
Комментарии: 0
Основы блокчейна

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

19.12.2017г.
Просмотров: 4015
Комментарии: 0
Java 9. Полный обзор нововведений

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

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

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

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

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

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

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

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

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

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

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

12.02.2014г.
Просмотров: 7652
Комментарии: 0
Рисуем наши мысли

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

10.02.2014г.
Просмотров: 5942
Комментарии: 4
Страна в цифрах

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

18.12.2013г.
Просмотров: 5122
Комментарии: 0
Большие данные меняют нашу жизнь

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

18.12.2013г.
Просмотров: 3966
Комментарии: 0
Компьютерные технологии – корень зла для точки роста

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

04.12.2013г.
Просмотров: 3669
Комментарии: 0
Паутина в облаках

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

03.12.2013г.
Просмотров: 3894
Комментарии: 1
Рецензия на книгу «MongoDB в действии»

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

Друзья сайта  

 Переменные в 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-45
E-mail: sa@samag.ru