Переменные css поддержка браузерами

Использование переменных в 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.

Источник

Переменные css поддержка браузерами

Permits the declaration and usage of cascading variables in stylesheets.

Chrome

1. 4 — 47 : Not supported
2. 48 : Disabled by default
3. 49 — 114 : Supported
4. 115 : Supported
5. 116 — 118 : Supported

Edge

1. 12 — 14 : Not supported
2. 15 : Partial support
3. 16 — 114 : Supported
4. 115 : Supported

Safari

1. 3.1 — 9 : Not supported
2. 9.1 : Partial support
3. 10 — 16.4 : Supported
4. 16.5 : Supported
5. 16.6 — TP : Supported

Firefox

1. 2 — 30 : Not supported
2. 31 — 114 : Supported
3. 115 : Supported
4. 116 — 117 : Supported

Opera

1. 9 — 34 : Not supported
2. 35 : Disabled by default
3. 36 — 99 : Supported
4. 100 : Supported

IE

Chrome for Android

Safari on iOS

1. 3.2 — 9.2 : Not supported
2. 9.3 : Partial support
3. 10 — 16.4 : Supported
4. 16.5 : Supported
5. 16.6 — 17 : Supported

Samsung Internet

Opera Mini

Opera Mobile

UC Browser for Android

Android Browser

Firefox for Android

QQ Browser

Baidu Browser

KaiOS Browser

Can I use.

Browser support tables for modern web technologies

Created & maintained by @Fyrd, design by @Lensco.

Support data contributions by the GitHub community.

Usage share statistics by StatCounter GlobalStats for June, 2023

Location detection provided by ipinfo.io.

Support via Patreon

Become a caniuse Patron to support the site for only $1/month!

Site links

Legend

• Green = Supported
• Red = Not supported
• Greenish yellow = Partial support
• Gray = Support unknown

Источник

Зачем нужны переменные в CSS

В проекте с колесом фортуны мы использовали переменные в CSS-файле, но толком не объяснили, как это всё работает. А вот как.

В чём идея

В каждом языке программирования есть переменные. В них программы хранят промежуточные данные. Но в CSS исторически переменных не было — это же был просто язык оформления документов.

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

👉 Переменные и раньше можно было использовать при программировании CSS-файлов, например, используя препроцессоры SASS и LESS. Но потом всё равно нужно было скомпилировать SASS- или LESS-файл в чистый CSS, и там никаких переменных не было.

Преимущество родных CSS-переменных в том, что они даже на готовой странице остаются переменными.

Как использовать

Чтобы объявить переменную в CSS, достаточно придумать для неё имя, поставить перед ним два дефиса, а после имени — двоеточие и значение переменной:

Теперь эту переменную можно использовать вместо значений в свойствах стилей. Для этого пишем var(), а в скобках — название переменной. Когда браузер встретит такую конструкцию, он подставит вместо неё значение переменной.

body —font-s: 20px;
font-size: var(—font-s);
>

Значение по умолчанию

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

Использовать эту конструкцию можно так:

Когда браузер встретит этот фрагмент, он попробует найти переменную —font-s и взять её значение. Если такой переменной не будет или она пустая, то браузер вместо неё будет использовать значение 14px.

Область видимости

Переменные видны в том блоке, в которых их объявляют.

Ещё переменные действуют во всех вложенных элементах внутри этого блока: если мы объявим переменную внутри блока body <> или html <>, то она будет действовать для всех элементов на странице, потому что они находятся внутри этих блоков.

👉 Если нужна глобальная CSS-переменная, с которой нужно работать из любого места, её можно объявить внутри псевдокласса :root <>

Также переменные действуют внутри дочерних элементов: если мы объявим переменную для описания CSS-свойства класса, то и, например, абзацы с этим классом будут поддерживать эту переменную:

.alert —alert-color: #ff6f69;
>
.alert p color: var(—alert-color);
border: 1px solid var(—alert-color);
>

Зачем это нужно

Допустим, у нас есть фрагмент кода с определением оформления для двух тегов и одного класса:

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

Какие браузеры поддерживают

Переменные в CSS поддерживают все современные браузеры, кроме Internet Explorer (но он не современный, вместо него Edge, который это поддерживает), поэтому эту технику можно использовать в любых новых проектах.

Апскиллинг — это, например, переход с уровня junior на уровень middle, а потом — senior. У «Яндекс Практикума» есть курсы ровно для этого: от алгоритмов и типов данных до модных фреймворков.

В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.

Источник