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

Сегодня предстоит познакомиться с так называемыми переменными CSS. Такие компоненты встречаются в программных кодах страниц достаточно часто. Они значительно упрощают дальнейшую работу над проектом. Далее нужно разобраться не только в том, что собой представляют переменные CSS, но и ознакомиться с их ключевыми особенностями. Также будут приведены несколько примеров, позволяющих лучше разобраться в принципах использования рассматриваемого компонента.

Представленная информация подойдет для изучения как обычными пользователями, заинтересованными веб-версткой, так и верстальщикам, которые уже знакомы с CSS.

Структура сайта и CSS

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

Структура определяется такими свойствами как:

1. Float. Это свойство, которое является базовым, как и все остальные параметры, задающие основную структуру сайта/сервиса. Оно определяет, по какой стороне выравнивается тот или иной элемент: по правой или левой. Пользоваться таким элементом удобно для обтекания картинок текстом.
2. Flexbox. Элемент, который пришел на смену float. Он появился в 2011 году. Преимуществом такого свойства стало то, что блоки оказались более гибкими. Элементы могли растягиваться, заполняя все пространство, а также предусматривали выравнивание по вертикали или горизонтали.
3. Grid. Свойство, помогающее решать самые разные задачи верстки. Речь идет о расположении компонентов относительно нескольких осей – по горизонтали и вертикали. С помощью grid можно растянуть элемент на несколько строк или столбцов, присваивая каждому значения a, b, c, d и так далее. Далее – нужно использовать template-areas и указать в CSS-коде, как правильно растягивать элементы. Вместе с grid подобные операции выполняются буквально в несколько строк. Использовать нестандартные методы больше не приходится.

Теперь, когда с основной структурой сайта, сделанного при помощи CSS, удалось ознакомиться, можно начать более глубокое изучение переменных.

Определение

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

Упомянутые компоненты носят название пользовательских свойств, а также каскадных переменных. Они представляют собой мощную функцию, дающую разработчику определять многократно используемые значения в таблицах стилей. За счет применения таких переменных можно значительно увеличить удобство и эффективность повторного применения кодового фрагмента в проекте и его сопровождение. Также переменные дают возможность формировать динамические стили для веб-проектов.

Объявление

Для работы с пользовательскими переменными используется специальная функция. Она называется в CSS var. Используется данная «команда» для вставки значения переменной языка верстки.

Синтаксис функции var() будет следующим:

Здесь:

1. Name – это имя. Око является обязательным компонентом. Должно начинаться со специального символа, сформированного двумя дефисами (—).
2. Value – значение. Данный компонент является необязательным. Рассматривается в качестве резервного значения. Соответствующий параметр будет использован системой, если переменная не найдена.

При формировании имени var нужно помнить, что оно обязательно начинается с двух дефисов. Также name является чувствительным к регистру.

Принцип работы

Var в CSS могут быть разными. В зависимости от типа используемой переменной будет меняться принцип ее функционирования. Область действия изучаемых компонентов бывает локальной и глобальной.

Глобальные переменные могут быть доступны и использованы во всем документе. Для их создания нужно объявить переменную CSS внутри root селектора. Он соответствует корневому элементу HTML-документа. Все остальные элементы и документы – это потомки html. Они будут наследовать соответствующую var. Данный принцип осуществляется за счет того, что переменные – это пользовательские свойства, которые подчиняются каскаду.

Локальные var – это переменные, которые могут быть использованы только внутри селектора, где они ранее были объявлены. Для создания такого пользовательского свойства нужно всего лишь объявить его в селекторе, который будет использовать его.

Глобальные переменные

Глобальные var отлично подходят для присваивания значений, которые должны оставаться неизменными во всем сформированном проекте. Сюда можно отнести цвета темы, значения интервалов или типографских шкал. Этот прием позволяет добиваться некоторой согласованности, положительно сказывающейся на дальнейшей разработке проекта. Ниже – пример кода с объявлением глобальной var.

Здесь:

1. Root – это специальный селектор. Он представляет собой корень документа HTML. В соответствующем блоке задается несколько глобальных var для типографики, интервалов, а также цветов темы. Эти CSS-переменные поддерживают префикс, сформированный двумя дефисами. Данная запись указывает на то, что они относятся к пользовательским свойствам.
2. Параметры —primary-color, —secondary-color, —accent-color, —text-color и –background-color – это пользовательские var для цветов темы. Они получают те или иные значения цветов.
3. Параметры —spacing-small, —spacing-large и –spacing-medium – пользовательские var для отступов. Они получают числовые значения, выраженные пикселями.
4. —font-family, —font-size-small, —font-size-large, —font-size-medium – это CSS-переменные, задействованные для типографики. Они позволяют задать семейство, а также размер шрифта для тех или иных компонентов.
5. .theme-element – это класс, который использует var для цветов темы. Он присваивает для text-color свойство color, которое будет преобразовано в значение —text-color. Точно также устанавливается свойство background-color.
6. .spacer – класс, работающий с var для отступов.
7. .custom-text – класс, позволяющий использовать CSS-переменные для типографики.

В предложенном примере можно увидеть 4 разных класса, каждый из которых демонстрирует использование var для цвета темы, интервала, а также шрифтов. Свойства, заданные в блоке root, применяются к соответствующим элементам и обеспечивают согласованность исходного кода, а также многократное применение стилей по всему HTML-документу.

Локальные переменные

Локальные CSS-переменные – это полезные компоненты для работы со специфическими стилями. Они могут пригодиться тогда, когда в разных частях проекта нужно задействовать различные значения. Данный пример позволит избежать непредвиденных последствий и «побочных эффектов» в процессе изменения глобальных var. Ниже можно увидеть наглядный пример реализации локальных CSS-свойств.

Здесь локальные CSS variables используются для конкретных компонентов. Они определяют пользовательские свойства внутри класса .component-container. Каждый компонент может предусматривать свои собственные локальные переменные для настройки его дальнейшего внешнего вида.

Класс .component-button внутри .component-container задействует соответствующие локальные CSS-переменные для формирования цвета фона и текста. Они будут уникальными для каждой составляющей на странице. Это приводит к тому, что изменение локальных пользовательских свойств затрагивает только стили соответствующего элемента и никак не влияет на другие компоненты и глобальные стили.

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

Работая с переменными CSS, нужно помнить об их совместимости с браузерами. Var широко поддерживается Интернет-обозревателями, причем совместимость распространяется на современные версии наиболее известных программ. Для работы каскадных свойств с более старыми браузерами, нужно проверять конкретные поддерживаемые версии. Особенно важно проводить проверку для Internet Explorer.

Var поддерживается следующими версиями браузеров (указаны их первые версии, работающие с рассматриваемым компонентом):

• Chrome – 49.0;
• Safari – 9.1;
• Opera –36.0;
• Mozilla Firefox – 31.0.

Более старые версии этих браузеров с var не работают. Это нужно учесть при формировании веб-страницы.

Преимущества

Функция var – очень полезная «команда» верстальщика. Она поможет раскрыть потенциал пользовательских свойств CSS. Дает возможность использовать ранее сохраненные значения переменных во всей таблице стилей. За счет var разработчик/верстальщик сможет ссылаться на значение пользовательского свойства везде, где это действительно нужно. Данный прием позволяет добиваться согласованности и обновления значений в рамках всего действующего проекта.

К преимуществам работы с var можно отнести:

1. Возможность повторного использования кодового блока. При помощи переменных в CSS разработчики смогут повторно задействовать одно и то же значение пользовательского свойства в нескольких местах таблицы стилей. Этот прием снижает избыточность проекта и повышает удобство его дальнейшего сопровождения.
2. Глобальные изменения. Пользовательские свойства могут определяться глобально. Именно поэтому изменение значений CSS-переменных может мгновенно привести к изменениям всех элементов, работающих с пользовательским свойством.
3. Динамический стиль. Если комбинировать var с другими функциями и выражениями, программисты и верстальщики смогут создавать динамические и адаптивные стили. Они будут меняться в зависимости от дальнейшего взаимодействия с пользователем, а также размеров области просмотра и других условий.

Теперь можно рассмотреть некоторые аспекты применения var более детально. С синтаксисом этой функции разобраться получилось. Далее ее нужно научиться правильно применять на практике.

Поддержка чистоты таблицы стилей и конфликты имен

Var – функция, имя которой является чувствительным к регистру. Для CSS-переменных рекомендуется использовать описательные «названия». Этот прием поможет избежать конфликта имен с существующими или будущими свойствами. Также рекомендуется документировать назначение каждого var. Данный прием позволит добиться ясности для всех, кто планирует дальнейшую работу с таблицей стилей.

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

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

Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в Otus!