Html variable in div

Основные варианты использования CSS-переменных (Custom Properties)

CSS Variables или CSS Custom Properties уже давно используются в разработке и поддерживаются большинством популярных браузеров. Если у вас нет обязательного требования разрабатывать под IE, то вполне вероятно, вы уже успели оценить их преимущества.

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

Варианты использования

1. Определение переменных

Начнём с базовых вещей, а именно: как определять переменные. Стоит помнить, что их можно определить как в корневом элементе :root (переменные будут доступны по всему приложению), так и внутри любого селектора (будут доступны только для выбранного элемента и его дочерних элементов):

2. Переопределение переменных

В примере показан кейс, когда при наведении на элемент, должен меняться цвет. Для этого мы переопределяем переменную —color по событию :hover :

Второй пример показывает переопределение переменной в @media выражении. К сожалению, мы не можем вынести 1024px в переменную и использовать ее в @media — это является одним из ограничений CSS переменных.

:root < --color: green; >body < background-color: var(--color); >@media (max-width: 1024px) < :root < --color: red; >>

3. Локальный fallback

Представьте, что вы вызываете переменную —color-green , а ее не существует. Страшного не случится, но заданное CCS-свойство не отработает. Для подстраховки можно задать резервное значение вторым аргументом. Это значение также может быть CSS-переменной:

4. Привязка переменных

При объявлении переменных могут использоваться другие переменные:

5. Переменные в calc()

В calc() можно перемножать числа со значениями в единицах измерения, н-р: px .

На выходе получим результирующее значение в той единице измерения, на которую умножили.

В примере показано, как перемножается 2 на 10px и в итоге получается 20px. Не важно, используем мы для этого обычные значения или CSS-переменные — результат будет одинаковый:

К примеру, у нас есть переменная —font: 20 . Но без указания единицы измерения мы не сможем ее корректно использовать в font-size .

Это можно решить с помощью calc() . Для преобразования числа в px , к примеру, достаточно умножить число на 1px в calc() :

6. Прозрачность в цветовых функциях

Задания цвета — самый распространенный кейс использования переменных.

Вот стандартный пример по использованию hex-цвета для определения значения переменной:

Часто бывает, что для цвета нужно задавать различную прозрачность. В CSS для этого есть:

Использование rgba()

При использовании переменных, удобнее это делать функцией rgba() , которая принимает 4 числовых значения для:

1. Красного цвета
2. Зеленого цвета
3. Синего цвета
4. Альфа-канала для задания прозрачности

На самом деле, внутри CSS допускается использовать практически всё (за небольшим исключением), даже код на JavaScript!

Поэтому, задание в переменной значения цветов для Red, Green, Blue — вполне допустимо.

Вызовем функцию rgba() с переменной —color-blue—rgb . Для rgba() не хватает четвертого аргумента задающего прозрачность — добавим его через запятую:

На выходе собираются аргументы для rgba() : значения из переменной и альфа-канала.

Использование hsla()

Кроме rgba() можно использовать и hsla() . Это не так удобно, но как вариант, можно попробовать.

1. Определяем переменные с базовыми значениями для основных параметров hsla(): —hue , —saturation , —lightness , —opacity .
2. При использовании, указываем все базовые параметры в селекторе.
3. Меняем один / несколько переменных в селекторе (изменения коснутся только данного селектора и его дочерних элементов).

7. Переменные в SVG

С помощь переменных мы также можем изменять цвет внутри SVG: fill или stroke . Сложность заключается в том, что изображение SVG должно быть инлайново встроено на страницу, но при использовании сборщиков — это не проблема.

Итак, имеем SVG-элемент на странице, у которого в fill указана переменная —color :

И саму переменную —color в CSS:

Значение переменной можно переопределять при необходимых условиях: например, при событии hover на SVG:

Использование с JavaScript. API CSS Style Declaration

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

Рассмотрим, как можно работать с CSS переменными через JavaScript:

В CSS у нас есть 2 переменные:

// Получаем корневой элемент в DOM const root = document.querySelector(':root'); // Получаем "Вычисленные свойства" const rootStyles = getComputedStyle(root); // Получаем значение переменной по ее названию const color = rootStyles.getPropertyValue('--color'); // => 'green' // Изменяем значение переменной root.style.setProperty('--color', '#88d8b0'); // Удаляем CSS переменную root.style.removeProperty('--color');

Для примера, я показал все возможные действия с переменными: чтение, изменение, удаление. Использовать операции можно по необходимости.

Вычисленные свойства

В коде выше я затронул тему «Вычисленных свойств». Рассмотрим подробнее: для этого создадим небольшой пример:

Единицы измерения можно подразделить на абсолютные и относительные:

• Абсолютные — это пиксели ( px ), которые привязываются к разрешению экрана.
• Относительные (н-р: rem ) формируются относительно заданного параметра.

Для отображения, относительные единицы измерения должны быть преобразованы в абсолютные. Если мы откроем инспектор объектов в Google Chrome (или другом браузере) на вкладке «Elements», то сможем увидеть это преобразование:

• В секции Styles — значения в том виде, в котором мы их указали в CSS (относительные).
• В секции Computed — значения, приведенные к абсолютным единицам измерения. Функцией getComputedStyle в JavaScript мы как раз таки и получаем эти вычисленные значения.

Так для чего же может понадобиться работать с CSS-переменными через JavaScript? Самый распространенный кейс — это задание цветовой схемы: при переключении схемы мы обращаемся к CSS-переменной и просто изменяем ее значение. Все значения, где используется эта переменная, будут обновлены.

Небольшую демку по изменению цветовой схемы можно посмотреть здесь.

Проверка поддержки переменных

@supports ( (--a: 0) ) < /* Стили с поддержкой переменных */ >@supports ( not (--a: 0) ) < /* Стили без поддержки переменных */ >

if (window.CSS && window.CSS.supports && window.CSS.supports('--a', 0)) < // Сценарии с поддержкой переменных >else < // Сценарии без поддержки переменных >

Достоинства и ограничения

• Работают в runtime, в отличие от переменных препроцессоров
• Можно обратиться из JavaScript

• В именах обычных свойств CSS: var(—side): 10px
• В значениях media-запросов: @media screen and (min-width: var(—desktop))
• В подстановке URL: url(var(—image))

Заключение

Использование CSS-переменных еще один шаг к отказу от препроцессоров. Ждем реализации миксинов @apply на CSS и CSS Nesting Module!

Источник

Использование переменных в CSS

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

CSS переменные (пользовательские CSS-свойства) это сущности, определяемые автором CSS, хранящие конкретные значения, которые можно повторно использовать в документе. Они устанавливаются с использованием custom property нотации (например. —main-color: black; ) и доступны через функцию var() (например. color: var(—main-color); ) .

Сложные веб-сайты имеют очень большое количество CSS, часто с множеством повторяющихся значений. Например, один и тот же цвет может использоваться в сотнях разных мест, что требует глобального поиска и замены, если этот цвет необходимо изменить. CSS переменные позволяют сохранять значение в одном месте, а затем многократно использовать его в любом другом месте. Дополнительным преимуществом являются семантические идентификаторы. Для примера: запись —main-text-color более понятна, чем #00ff00 , особенно если этот же цвет используется и в другом контексте.

CSS переменные подчиняются каскаду и наследуют значения от своих родителей.

Основное использование

element  --main-bg-color: brown; > 

element  background-color: var(--main-bg-color); > 

Примечание: В более ранней спецификации префикс для переменных был var- , но позже был изменён на — . Firefox 31 и выше следуют новой спецификации.(баг 985838)

Первый шаг с CSS Переменными

Начнём с этого простого CSS, который окрасит элементы разных классов одинаковым цветом:

.one  color: white; background-color: brown; margin: 10px; width: 50px; height: 50px; display: inline-block; > .two  color: white; background-color: black; margin: 10px; width: 150px; height: 70px; display: inline-block; > .three  color: white; background-color: brown; margin: 10px; width: 75px; > .four  color: white; background-color: brown; margin: 10px; width: 100px; > .five  background-color: brown; > 

Мы применим его к этому HTML:

div> div class="one">div> div class="two">Text span class="five">- more textspan>div> input class="three"> textarea class="four">Lorem Ipsumtextarea> div> 

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

:root  --main-bg-color: brown; > .one  color: white; background-color: var(--main-bg-color); margin: 10px; width: 50px; height: 50px; display: inline-block; > .two  color: white; background-color: black; margin: 10px; width: 150px; height: 70px; display: inline-block; > .three  color: white; background-color: var(--main-bg-color); margin: 10px; width: 75px; > .four  color: white; background-color: var(--main-bg-color); margin: 10px; width: 100px; > .five  background-color: var(--main-bg-color); > 

div> div class="one">div> div class="two">Text span class="five">- more textspan>div> input class="three"> textarea class="four">Lorem Ipsumtextarea> div> 

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

Наследование переменных в CSS и возвращаемые значения

Пользовательские свойства могут наследоваться. Это означает, что если не установлено никакого значения для пользовательского свойства на данном элементе, то используется свойство его родителя:

div class="one"> div class="two"> div class="three">div> div class="four">div> div> div> 

.two  --test: 10px; > .three  --test: 2em; > 

В результате var(—test) будет:

• для элемента с классом class=»two» : 10px
• для элемента с классом class=»three» : 2em
• для элемента с классом class=»four» : 10px (унаследовано от родителя)
• для элемента с классом class=»one» : недопустимое значение, что является значением по умолчанию для любого пользовательского свойства.

Используя var() вы можете объявить множество возвращаемых значений когда данная переменная не определена, это может быть полезно при работе с Custom Elements и Shadow DOM.

Первый аргумент функции это имя пользовательского свойства. Второй аргумент функции, если имеется, это возвращаемое значение, который используется в качестве замещающего значения, когда пользовательское свойство является не действительным. Например:

.two  color: var(--my-var, red); /* red если --my-var не определена */ > .three  background-color: var(--my-var, var(--my-background, pink)); /* pink если --my-var и --my-background не определены */ > .three  background-color: var(--my-var, --my-background, pink); /* "--my-background, pink" будет воспринят как значение в случае, если --my-var не определена */ > 

Примечание: В замещаемых значениях можно использовать запятые по аналогии с пользовательскими свойствами. Например, var(—foo, red, blue) определить red, blue как замещающее значение (от первой запятой и до конца определения функции)

Примечание: Данный метод также вызывает проблемы с производительностью. Он отображает страницу медленнее чем обычно, т.к. требует время на разбор.

Обоснованность и полезность

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

К сожалению, эти значения могут использоваться через функциональную запись var() , в контексте где они, возможно, не имеют смысла. Свойства и пользовательские переменные могут привести к невалидным выражениям CSS, что приводит к новой концепции валидности во время исполнения.

Совместимость с браузерами

BCD tables only load in the browser

Found a content problem with this page?

This page was last modified on 7 нояб. 2022 г. by MDN contributors.

Your blueprint for a better internet.

Источник