От автора: большинство языков программирования поддерживают переменные. Но, к сожалению, CSS не нуждался в поддержке родных переменных с самого начала. Вы пишете CSS? Тогда для вас нет переменных. Ну, кроме тех случаев, когда вы использовали такой препроцессор, как Sass. Такие препроцессоры подают использование переменных в качестве большого дополнения. И знаете что? Это довольно веская причина их использовать. Веб быстро развивается. И я рад сообщить, что теперь использование переменных в CSS стало реальным. Хотя препроцессоры поддерживают намного больше функций, всё же добавление переменных CSS это отлично. Это двигает сеть ещё ближе к будущему. В этом руководстве я покажу вам, как изначально работают переменные в CSS, и как можно использовать их, чтобы сделать жизнь намного проще.
Чему вы научитесь
Сначала я расскажу вам об основах CSS-переменных. Я считаю, что любая попытка понять переменные CSS должна начинаться отсюда.
Изучить основы — это круто. Но еще круче — применять эти основы для создания реальных приложений.
Поэтому я расскажу вам, как создать 3 проекта, которые демонстрируют переменные CSS и их простоту использования. Вот превью этих трех проектов.
Проект 1: Создание вариаций компонентов с использованием переменных CSS
Сегодня уже есть возможность создавать вариации компонентов. Если вы используете React, Angular или Vue, переменные CSS сделают этот процесс проще.
Проверьте проект на Codepen.
Проект 2: Стили темы с переменными CSS
Вероятно, вы сталкивались уже с этим. Я покажу, как легко переменные CSS создают темы стилей на веб-узле.
Проверьте проект на Codepen.
Проект 3: построение таблицы переменной CSS
Это последний проект. Не обращайте внимание на его названия, я не смог придумать ничего лучше.
Обратите внимание, что цвета ящиков динамически обновляются и изменяются как вращающаяся в трехмерном пространстве коробка при изменении диапазона ввода.
Этот проект демонстрирует простоту обновления CSS-переменных с помощью JavaScript и реактивные лакомства, которые вы получаете с ним.
Будет весело!
Проведите некоторое время с удовольствием на Codepen.
Примечание. В статье предполагается, что вы хорошо разбираетесь в CSS.
Почему переменные настолько важны
Если вы новичок в переменных препроцессоров или родном CSS, вот несколько причин, по которым переменные важны.
Причина №1: Более читаемый код
Я не стану говорить о том, что вы сами можете быстро рассказать, как читаемые и поддерживаемые переменные делают любую базу кода.
Причина № 2: Простота изменений в крупных документах</p>
Если у вас есть все ваши константы, сохраненные в отдельном файле, вам не нужно перепрыгивать через тысячи строк кода, когда вы хотите внести изменения в переменную.
Всё становится проще некуда. Просто измените в одном месте, и вуаля.
Причина № 3: быстрое обнаружение опечаток
Жизнь-боль, когда ищешь строки кода, пытаясь обнаружить ошибку. Ёще более раздражает, если ошибка связана с простой опечаткой. Их трудно обнаружить. Правильное использование переменных устраняет эти неприятности.
Читабельность и ремонтопригодность здесь — большой выигрыш.
Благодаря переменным CSS, теперь у нас есть свой собственный CSS.
Определение переменных CSS
Позвольте мне начать с того, что вы уже знаете: переменные в JavaScript.
Простая переменная JavaScript может быть объявлена следующим образом:
var amAwesome;
Теперь вы можете присвоить ей некоторое значение:
amAwesome = "awesome string"
В CSS переменная CSS — это любое «свойство», имя которого начинается с двух тире.
/*can you spot the variable here? */
.block { color: #8cacea;
--color: blue
}
Определение области видимости переменных CSS
Есть ещё кое-что, на что нужно обратить внимание. Помните, что в JavaScript переменные имеют область видимости. Они могут иметь global или local охват. То же самое можно сказать и о переменных CSS. Рассмотрим пример:
:root { --main-color: red }
Селектор :root позволяет настроить таргетинг на элемент самого высокого уровня в DOM или на дерево документов. Переменные, объявленные таким образом, относятся к глобальной области видимости. Понятно?
Пример 1
Предполагая, что вы хотели создать переменную CSS, которая сохранила основной цвет темы сайта. Как бы вы это сделали?
1. Вы создаете селектор диапазона. Используйте :root для переменной «global»
:root { }
2. Определите переменную
:root { --primary-color: red }
Помните, что переменная CSS — это любое свойство, имя которого начинается с двух тире, например —color. Это было просто.
Использование переменных CSS
Как только переменная определена и ей присвоено значение, можно использовать её в пределах значения свойства. Есть ещё кое-что. Если вы пришли из мира препроцессоров, вы можете использовать эту переменную, просто ссылаясь на ее имя. Например:
$font-size: 20px .test { font-size: $font-size
}
С родными переменными CSS, все немного иначе. Вы ссылаетесь на переменную с помощью функции var(). В приведенном выше примере использование переменных CSS приведет к следующему:
:root { --font-size: 20px
} .test { font-size: var(--font-size)
}
Довольно отличается.
Как только вы это осознаете, вы начнете любить переменные CSS! Еще одно важное замечание состоит в том, что, в отличие от переменных в Sass (или других препроцессорах) — где вы можете использовать переменные во многих местах и выполнять вычисления, как вы хотите, вам нужно быть осторожным с переменными CSS. В основном устанавливать их нужно как значения свойств.
/*this is wrong*/
.margin {
--side: margin-top;
var(--side): 20px;
}
Вы также не можете заниматься вычислениями. Для этого вам нужна функция CSS calc() . Я расскажу о примерах, когда мы продолжим.
/*this is wrong */
.margin {
--space: 20px * 2;
font-size: var(--space); //not 40px
}
Если выполнить вычисления, используйте функцию calc () следующим образом:
.margin {
--space: calc(20px * 2);
font-size: var(--space); /*equals 40px*/
}
Свойства достойные упоминания
Вот некоторые примеры, которые стоит упомянуть.
1. Пользовательские свойства — это обычные свойства, поэтому они могут быть объявлены на любом элементе.
Объявите их в элементе абзаца, разделе, в корне или даже псевдоэлементах. Они будут работать, как надо.
2. Переменные CSS разрешаются с помощью нормального наследования и каскадных правил
Рассмотрим блок кода:
div { --color: red;
} div.test { color: var(--color)
} div.ew { color: var(--color)
}
Как и для обычных переменных, значение —color будет наследоваться div.
3. Переменные CSS могут быть сделаны условными с @media и другими условными правилами
Как и в других свойствах, вы можете изменить значение переменной CSS в блоке @media или других условных правилах. Например, следующий код изменяет значение переменной, разделяет на больших устройствах.
:root { --gutter: 10px } @media screen and (min-width: 768px) { --gutter: 30px }
4. Переменные CSS могут использоваться в атрибуте стиля HTML.
Вы можете установить значение встроенных переменных в переменную, и они все равно будут работать, как следует.
<!--HTML--> <html style=" --color: red "> <!--CSS--> body { color: var(--color) }
Переменные CSS зависят от регистра. Будьте осторожны с этим. Я облегчил себе задачу и записываю переменные в нижнем регистре. Ваш способ может отличаться.
/*these are two different variables*/ :root { --color : blue; --COLOR : red; }
Разрешение нескольких объявлений
Как и в других свойствах, множественные объявления разрешаются стандартным каскадом. Рассмотрим пример:
/*define the variables*/
:root { --color: blue; }
div { --color: green; }
#alert { --color: red; } /*use the variable */
* { color: var(--color); }
С объявленными выше переменными, какими будут цвета следующих элементов?
<p>What's my color?</p> <div>and me?</div> <div id='alert'> What's my color too? <p>color?</p> </div>
Понимаете? Первый абзац будет blue. На селекторе p нет прямого определения —color, поэтому он наследует значение от :root
:root { --color: blue; }
Первый div будет green. Это ясно. На div набор прямых переменных
div { --color: green; }
div с идентификатором alert не будет зеленым. Он будет red
#alert { --color: red; }
Идентификатор имеет прямую переменную. Таким образом, значение с определением переопределяет все остальные. Селектор #alert более конкретный.
Наконец, p внутри #alert будет … red
В элементе абзаца нет объявления переменных. И вы, возможно, ожидали, что цвет будет blue из-за объявления в :root элементе.
:root { --color: blue; }
Как и в других свойствах, переменные CSS наследуются. Значение наследуется от родителя, #alert
#alert { --color: red; }
Разрешение циклических зависимостей
Циклическая зависимость происходит следующими способами:
Когда переменная зависит от самой себя. То есть, она использует var(), который ссылается на себя же.
:root { --m: var(--m) } body { margin: var(--m) }
Когда две или более переменные ссылаются друг на друга.
:root { --one : calc( var(--two) + 10px); --two : calc( var(--one) - 10px); }
Будьте внимательны, чтобы не создавать циклические зависимости внутри вашего кода.
Что происходит с неверными переменными?
Синтаксические ошибки отбрасываются, а недействительные замены var() заменяются по умолчанию либо исходным, либо унаследованным значением соответствующего свойства.
Рассмотрим следующее:
:root { --color: 20px ; } p { background-color: red; } p { background-color : var(--color) ; }
Как и ожидалось, —color заменяется на var() но значение свойства background-color: 20px недействительно после замены. Поскольку backgroud-color не является наследуемым свойством, значение по умолчанию будет равным его initial значению transparent.
Обратите внимание, что? если бы вы написали backgroud-color: 20px без каких-либо переменных-заменителей, конкретная backgroud-color: 20px была бы недействительной. В этом случае будет использовано предыдущее объявление.
Будьте осторожны при создании одиночных токенов
Когда вы устанавливаете значение свойства, как указано ниже, 20px интерпретируется как одиночный токен.
font-size: 20px
Простым способом здесь является то, что значение 20px рассматривается как единый «объект». Вы должны быть осторожны при создании одиночных токенов с переменными CSS. Рассмотрим следующий блок кода для примера:
:root { --size: 20 } div { font-size: var(--size)px /*WRONG*/ }
Возможно, вы ожидали, что значение font-size даст 20px, но это не так. Браузер интерпретирует это как 20 px. Обратите внимание на пробел после 20
Таким образом, если вы должны создать одиночные токены, переменная будет представлять весь токен. Например, —size: 20px, или используйте функцию calc например calc(var(—size) * 1px) где — —size равен 20
Не беспокойтесь, если вы чего-то не поняли. Я объясню это более подробно в следующем примере. Давайте делать вещи! Это та часть статьи, которую вы ждали! Я проведу вас через практическое применение концепций, путем создания нескольких полезных проектов.
Приступим:
Проект 1: Создание вариаций компонентов с использованием переменных CSS
Рассмотрим случай, когда вам нужно создать две разные кнопки. Те же базовые стили, просто разные.
В этом случае отличительными свойствами вариантов являются background-color иborder-color. Итак, как бы вы это сделали? Вот типичное решение. Создайте базовый класс, скажем .btn и добавьте варианты классов.Вот пример разметки:
<button class="btn" >Hello</button> <button class="btn red" >Hello</button>
.btn будет содержать базовые стили на кнопке. Например:
.btn { padding: 2rem 4rem; border: 2px solid black; background: transparent; font-size: 0.6em; border-radius: 2px;
} /*on hover */
.btn:hover { cursor: pointer; background: black; color: white;
}
Итак, где мы поместим наш вариант? Здесь:
/* variations */ .btn.red { border-color: red } .btn.red:hover { background: red }
Видите, как мы дублируем код здесь и там? Это, конечно, здорово, но мы могли бы улучшить его с помощью переменных CSS. Каков наш первый шаг? Заменить разные цвета на переменные CSS и добавить для них значения по умолчанию!
.btn { padding: 2rem 4rem; border: 2px solid var(--color, black); background: transparent; font-size: 0.6em; border-radius: 2px; } /*on hover*/ .btn:hover { cursor: pointer; background: var(--color, black); color: white; }
Когда вы сделаете: background: var(—color, black), установите фон в значение переменной —color . Однако, если переменной не существует, используйте значение по умолчанию black
И как же устанавливать значения переменных по умолчанию? Так же, как в JavaScript или любом другом языке программирования. Вот полезная часть. С вариантами вы просто указываете новое значение переменной CSS как:
.btn.red { --color: red }
Это все. Теперь, когда использован .red класс, браузер отмечает различное значение переменной .red и сразу же обновляет внешний вид кнопки. Это действительно полезно, если вы тратите кучу времени на создание многоразовых компонентов. Сравните сами:
И если у вас было больше вариантов, вы просто избавили себя от лишнего набора текста.
Проект 2: Сайты с темами с переменными CSS
Я уверен, что вы сталкивались с ними раньше. Тематические сайты дают пользователю ощущение управления. Как будто они находятся под контролем. Ниже приведен основной пример, который мы рассмотрим.
Итак, насколько переменные CSS сделают это легче? Посмотрим. Перед этим я хотел бы упомянуть, что этот пример очень важен. В нём я представлю концепцию обновления переменных CSS с помощью JavaScript.
Это весело! Вам понравится. Что мы действительно хотим сделать.
Красота переменных CSS — их реактивный характер. Как только они обновляются, любое свойство, имеющее значение переменной CSS, также обновляется. Вот изображение, которое объясняет процесс в отношении данного примера.
Итак, нам нужен JavaScript для прослушивателя кликов. В этом простом примере фон и цвет текста всей страницы основаны на переменных CSS.
Когда вы нажимаете любую из кнопок выше, они устанавливают переменную CSS для другого цвета. В результате этого обновляется фон страницы.
Вот и всё. И ещё кое-что. Когда я говорю, что переменная CSS установлена на какое-то другое значение, как это сделано?
Переменные CSS будут вступать в силу, даже если они установлены в строке. С JavaScript мы получаем корневой документ, и мы устанавливаем внутрь новое значение для переменной CSS.
Понимаете? Слишком много разговоров — перейдём к делу.
Начальная разметка
Необходима начальная разметка.
<div class="theme"> <button value="dark">dark</button> <button value="calm">calm</button> <button value="light">light</button> </div> <article> ... </article>
Разметка состоит из трех кнопок в родительском элементе .theme .Чтобы всё было в порядке, я усекал содержимое внутри элемента article. Внутри article элемента — содержимое страницы.
Создание стиля страницы
Успех проекта начинается с оформления страницы. Трюк прост. Вместо того, чтобы просто устанавливать background-color и color страницы, мы будем устанавливать их на основе переменных. Вот что я имею в виду.
body { background-color: var(--bg, white) ; color: var(--bg-text, black) }
Причина этого очевидна. Всякий раз, когда нажимается кнопка, внутри документа меняется значение обеих переменных. После этих изменений будет обновлен общий стиль страницы. Очень просто.
Итак, давайте перейдем к обновлению с JavaScript.
Вход в JavaScript
Я пойду вперед и выверну весь JavaScript, необходимый для этого проекта.
const root = document.documentElement const themeBtns = document.querySelectorAll('.theme > button') themeBtns.forEach((btn) => { btn.addEventListener('click', handleThemeUpdate)
}) function handleThemeUpdate(e) { switch(e.target.value) { case 'dark': root.style.setProperty('--bg', 'black') root.style.setProperty('--bg-text', 'white') break case 'calm': root.style.setProperty('--bg', '#B3E5FC') root.style.setProperty('--bg-text', '#37474F') break case 'light': root.style.setProperty('--bg', 'white') root.style.setProperty('--bg-text', 'black') break }
}
Не пугайтесь. Это намного проще, чем вы думаете. Прежде всего, держите ссылку на корневой элемент, const root = document.documentElement
Корневым элементом здесь является элемент HTML. Вы поймете, почему это важно. Если вам интересно, необходимо установить новые значения переменных CSS.
Кроме того, ссылку на кнопки тоже сохраняйте, const themeBtns = document.querySelectorAll(‘.theme > button’)
querySelectorAll дает querySelectorAll структуру данных, которую мы можем перебрать. Перейдите по каждой из кнопок и добавьте к ним прослушиватель событий.
themeBtns.forEach((btn) => { btn.addEventListener('click', handleThemeUpdate)
})
Где функция handleThemeUpdate? Я расскажу это дальше.
Каждая handleThemeUpdate кнопка будет иметь handleThemeUpdate в качестве функции обратного вызова. Важно отметить, какая кнопка была нажата, а затем выполнить правильную операцию.
В свете этого используется переключатель operator, и некоторые операции выполняются на основе значения нажатой кнопки. Перейдем к рассмотрению блока кода JavaScript. Теперь вы лучше сможете это понять.
Проект 3: построение каскадной таблицы CSS
Если вы это пропустили, вот что мы будем строить:
Помните, что цвет ящиков динамически обновляется и что контейнер поворачивается в трехмерном пространстве при изменении ввода диапазона.
Вы можете опробовать это на Codepen.
Это превосходный пример реактивности обновления переменных CSS с JavaScript, которая приходит с ними. Давайте посмотрим, как это делается.
Разметка
Вот необходимые компоненты.
Входной сигнал диапазона
Контейнер для хранения инструкций
Раздел для хранения списка других полей, каждый из которых содержит поля ввода
Разметка получается простой. Вот:
<main class="booth"> <aside class="slider"> <label>Move this</label> <input class="booth-slider" type="range" min="-50" max="50" value="-50" step="5"/> </aside> <section class="color-boxes"> <div class="color-box" id="1"><input value="red"/></div> <div class="color-box" id="2"><input/></div> <div class="color-box" id="3"><input/></div> <div class="color-box" id="4"><input/></div> <div class="color-box" id="5"><input/></div> <div class="color-box" id="6"><input/></div> </section> <footer class="instructions"> Move the slider<br/> Write any color in the red boxes </footer> </main>
Вот несколько вещей, на которые нужно обратить внимание.
Входной сигнал диапазона представляет значения от -50 до 50 с шагом 5. Кроме того, значение входного сигнала диапазона является минимальным значением -50
Если вы не знаете, как работает вход диапазона, проверьте его на w3schools
Обратите внимание, что раздел с классами .color-boxes содержит другие контейнеры .color-box . Внутри этих контейнеров есть поля ввода.
Возможно, стоит упомянуть, что первый вход имеет значение по умолчанию red.
Поняв структуру документа, продолжайте и создайте его так:
Возьмите контейнеры .slider и .instructions из потока документов. Точно расположите их.
Дайте элементу body цвет фона восхода и украсьте фон цветком в нижнем левом углу
Поместите контейнер color-boxes в центр
Стилизуйте контейнер color-boxes
Давай их уроним. Ниже будет исправлено первое задание.
/* Slider */ .slider, .instructions { position: absolute; background: rgba(0,0,0,0.4); padding: 1rem 2rem; border-radius: 5px } .slider { right: 10px; top: 10px; } .slider > * { display: block; } /* Instructions */ .instructions { text-align: center; bottom: 0; background: initial; color: black; }
Фрагмент кода не такой сложный, как вы думаете. Надеюсь, вы сможете прочитать и понять. Если нет, оставьте комментарий или твит. Стилизация body немного сложней. Надеюсь, вы хорошо разбираетесь в CSS.
Поскольку мы стремимся стилизовать элемент с фоновым цветом и фоновым изображением, возможно, лучше всего использовать свойство сокращенного background для установки нескольких фонов.
body { margin: 0; color: rgba(255,255,255,0.9); background: url('http://bit.ly/2FiPrRA') 0 100%/340px no-repeat, var(--primary-color); font-family: 'Shadows Into Light Two', cursive; }
Бит url — это ссылка на подсолнух. Следующий набор свойств 0 100% представляет фоновое положение изображения. Вот иллюстрация того, как работает фоновая позиционирование CSS:
Другой бит после прямой косой черты представляет собой background-size Это значение было задано на 340px Если вы уменьшили размер, изображение будет меньше. no-repeat предотвращает повторение фона.
Наконец, все, что приходит после запятой, является вторым фоновым объявлением. На этот раз мы установили только background-color вvar(primary-color)
Ой, это переменная. Следствием этого является то, что вы должны определить переменную. Вот каким образом:
:root { --primary-color : rgba(241,196,15 ,1) }
Основной цвет — желтый цвет восхода солнца. Ничего страшного. В ближайшее время мы добавим еще несколько переменных. Теперь давайте сосредоточимся на color-boxes
main.booth { min-height: 100vh; display: flex; justify-content: center; align-items: center;
}
Основной контейнер действует как гибкий контейнер и правильно позиционирует дочерний директ в центре страницы. Это наш любимый контейнер с color-box
Давайте сделаем контейнер цветных ящиков и его дочерние элементы красивыми. Во-первых, дочерние элементы:
.color-box { padding: 1rem 3.5rem; margin-bottom: 0.5rem; border: 1px solid rgba(255,255,255,0.2); border-radius: 0.3rem; box-shadow: 10px 10px 30px rgba(0,0,0,0.4); }
Это сделает нам вот что: будет добавлена красивая тень и появятся некоторые интересные эффекты. Это еще не все. Давайте создадим контейнер container-boxes:
/* Color Boxes */
.color-boxes { background: var(--secondary-color); box-shadow: 10px 10px 30px rgba(0,0,0,0.4); border-radius: 0.3rem; transform: perspective(500px) rotateY( calc(var(--slider) * 1deg)); transition: transform 0.3s
}
О, боже! Там много всего. Давайте закончим с этим. Вот простой бит:
.color-boxes { background: var(--secondary-color); box-shadow: 10px 10px 30px rgba(0,0,0,0.4); border-radius: 0.3rem;
}
Вы знаете, что это даёт, да? Там есть новая переменная. Это нужно сделать, добавив его в корневой селектор.
:root { --primary-color: rgba(241,196,15 ,1); --secondary-color: red;
}
Вторичный цвет красный. Это придаст контейнеру красный фон. Вернёмся к той части, которая, вероятно, смутила вас:
/* Color Boxes */
.color-boxes { transform: perspective(500px) rotateY( calc(var(--slider) * 1deg)); transition: transform 0.3s
}
На мгновение мы могли бы упростить значение свойства преобразования выше.
Например:
transform: perspective(500px) rotateY( 30deg);
Сокращение преобразования применяется к двум различным функциям. Одна, перспектива и другая — вращение вдоль оси Y.
Хм, так что же с perspective и функциями rotateY?
Функция perspective() применяется к элементу, который преобразуется в трехмерном пространстве. Он активирует трехмерное пространство и дает глубину элемента вдоль оси z.
Больше о функции перспективы можно узнать на codrops. Функция rotateY , с чем она связана? При активации 3d-пространства элемент имеет плоскости x, y, z. Функция rotateY вращает элемент вдоль плоскости Y. Диаграмма из codrops действительно полезна для визуализации примера.
Надеюсь, это позволило вам немного расслабиться. Вернёмся к тому, с чего мы начали.
Знаете ли вы, какая функция влияет на поворот .container-box, когда вы перемещаете ползунок? Вызывается функция rotateY. Коробка поворачивается вдоль оси Y. Поскольку значение, переданное в функцию rotateY, будет обновляться через JavaScript, значение представлено переменной.
Итак, зачем умножать переменную на 1deg? Как правило, и для облегчения задачи рекомендуется, чтобы при создании отдельных токенов вы сохраняли значения своих переменных без единиц. Вы можете конвертировать их в любое подразделение, которое хотите, выполнив умножение с помощью функции calc.
Это позволяет вам делать «что угодно» с этими значениями, когда они у вас есть. Хотите преобразовать в deg или отнести к пользовательскому видовому vw, ваше право. В этом случае мы преобразуем число, чтобы иметь степень, умножая значение «числа» на 1deg
Поскольку CSS не понимает математику, вам необходимо передать эту вычисления в функцию calc, где они будут правильно оценены CSS.
Как только это будет сделано, всё встанет на свои места. Значение этой переменной может быть обновлено в JavaScript столько раз, сколько нам захочется. Теперь осталось только один бит CSS.
/* Handle colors for each color box */
.color-box:nth-child(1) { background: var(--bg-1)
}
.color-box:nth-child(2) { background: var(--bg-2)
}
.color-box:nth-child(3) { background: var(--bg-3)
}
.color-box:nth-child(4) { background: var(--bg-4)
}
.color-box:nth-child(5) { background: var(--bg-5)
}
.color-box:nth-child(6) { background: var(--bg-6)
}
Итак, что это за вуду? Во-первых, селектор nth-child выбирает каждый из дочерних блоков.
Здесь нужно немного предусмотрительности. Мы знаем, что мы будем обновлять цвет фона каждого окна. Мы также знаем, что этот цвет фона должен быть представлен переменной, поэтому он доступен через JavaScript. Правильно?
Мы могли бы продолжить и сделать так:
.color-box:nth-child(1) { background: var(--bg-1) }
Легко. Однако есть одна проблема. Что происходит, если эта переменная отсутствует? Нам нужен резерв.
.color-box:nth-child(1) { background: var(--bg-1, red) }
Конкретно в этом случае я выбрал НЕ предоставлять какие-либо резервные копии.
Если переменная, используемая в пределах значения свойства, недействительна, свойство примет начальное значение.
Следовательно, когда —bg-1 недействителен или НЕ доступен, фон по умолчанию будет иметь начальное значение transparent.
Начальные значения относятся к значениям свойства, если они не заданы. Например, если вы не задаете background-color элемента, он будет по умолчанию transparent
Начальные значения являются значениями значений свойств по умолчанию.
Будем писать JavaScript
Нам совсем немного нужно сделать со стороны JavaScript. Сначала давайте обработаем ползунок. Для этого нужно всего 5 строк!
const root = document.documentElement const range = document.querySelector('.booth-slider') //as slider range's value changes, do something range.addEventListener('input', handleSlider) function handleSlider (e) { let value = e.target.value root.style.setProperty('--slider', value) }
Это было легко, да? Во-первых, держите ссылку на элемент слайдера, const range = document.querySelector(‘.booth-slider’)
Настройте прослушиватель событий, когда изменяется значение диапазона входа, range.addEventListener(‘input’, handleSlider)
Напишите обратный вызов, handleSlider
function handleSlider (e) { let value = e.target.value root.style.setProperty('--slider', value) }
root.style.setProperty(‘—slider’, value) получает root элемент (HTML), захватывает его стиль и устанавливает на нем свойство.
Обработка изменений цвета
Это так же просто, как обработка изменения ползунка. Вот как:
const inputs = document.querySelectorAll('.color-box > input') //as the value in the input changes, do something.
inputs.forEach(input => { input.addEventListener('input', handleInputChange)
}) function handleInputChange (e) { let value = e.target.value let inputId = e.target.parentNode.id let inputBg = `--bg-${inputId}` root.style.setProperty(inputBg, value)
}
Содержите ссылку на все текстовые входы, const inputs = document.querySelectorAll(‘.color-box > input’)
Настройте прослушиватель событий на всех входах:
inputs.forEach(input => { input.addEventListener('input', handleInputChange)
})
Напишите функцию handleInputChange:
function handleInputChange (e) { let value = e.target.value let inputId = e.target.parentNode.id let inputBg = `--bg-${inputId}` root.style.setProperty(inputBg, value)
}
Уф … Это оно! Проект выполнен.
Как я сделал это?
Я выполнил и отредактировал первоначальный проект этой статьи, когда заметил, что нигде не упоминаю поддержку браузера. Итак, позвольте мне исправить свой беспорядок.
Поддержка браузера для переменных CSS (ака пользовательских свойств) неплохая. Это довольно хорошо, с приличной поддержкой во всех современных браузерах (более 87% на момент написания этой статьи).
Итак, можете ли вы использовать переменные CSS в производстве сегодня? Я скажу «да»!
С другой стороны, вы можете использовать препроцессор, такой как Myth. Он будет препроцитировать ваш «будущий» CSS во что-то, что вы используете сегодня. Здорово, правда?
Примечание: я не проверял, как делают смайлики в полимере , но я вижу много переменных CSS, используемых с многоразовыми полимерными компонентами. Вот и все.
Автор: Ohans Emmanuel
Источник: https://medium.freecodecamp.org/
Редакция: Команда webformyself.
