Как и когда использовать правило !important в CSS
Когда вы смотрите Каскадную таблицу стилей (CSS) веб-страницы, первое, что вы заметите в коде, это !important. Это ключевое слово влияет на приоритетную обработку внутри таблицы стилей.
Каскадная таблица стилей на самом деле является каскадной. Это означает, что стили расположены в особом порядке. Стили обычно применяются в том порядке, в каком читает их браузер. Примените первый стиль, потом второй и т. д.
Поэтому, если нам встречается стиль наверху таблицы стилей, а потом опускается вниз внутри файла, тогда второй сценарий этого стиля это сценарий, примененный в последующих экземплярах, а не в первом. В сущности последний перечисленный используется, если две стили указывают одно и то же (т. е. они имеют одинаковый уровень специфики).
Давайте представим, что таблица стилей содержит следующие стили:
p < color: green; > p < color: black; >Несмотря на то, что к первому параграфу применен зеленый цвет, текст параграфа будет отображен в черном цвете. Причиной этому является то, что значение «black» применяется вторым. Так как CSS читается сверху вниз, завершением является «black».
В продолжении расскажем, как правило !important меняет приоритетность.
Как применить правило !important в CSS?
CSS правило !important дает больше значимости, чем любое другое свойство. В CSS !important означает, что “это важно” (this is important), все последующие правила игнорируются и применяется правило !important . Это правило должно быть указано в конце строки, сразу после точки с запятой.
p < color: green !important; >Для баланса декларация !important (символ-разделитель «!» и ключевое слово «important» находятся после декларации) имеет преимущество над обычной декларацией. Авторские и пользовательские таблицы стилей могут содержать декларации !important , но пользовательские правила !important переопределяют авторские правила !important . Эта CSS функция улучшает доступность документов, давая пользователям c особыми требованиями (большой шрифт, цветовые комбинации и др.) контроль над отображением.
Объявление, чтобы сокращенное свойство (например, color) было !important, эквивалентно объявлению, чтобы все подсвойства были !important . В результате, !important используется для переопределения стилей, которые раньше были представлены в другом стилевом источнике.
Давайте рассмотрим пример:
Пример
html> html> head> title>Заголовок документа title> style> body < background-color: #1c87c9 !important; background-color: #ffcc00; > h2 < color: #8ebf42 ; > h2 < color: #eeeeee !important; > style> head> body> h2>W3docs h2> p>W3docs дает возможность бесплатно изучить материалы таких языков программирования, как HTML, CSS, Java Script, PHP и др. p> body> html>В данном примере фон имеет синий цвет вместо желтого, а заголовок имеет серый цвет вместо зеленого. Причиной является то, что применено правило !important .
Когда использовать правило !important
При тестировании и отладки веб-страницы !important является эффективным. Если вы не уверены, почему применятся стиль, и думаете, что это может быть конфликтом специфики, добавьте !important к вашему стилю. Если таким образом проблема решается, измените порядок селекторов и удалите директивы !important из вашего кода.
В результате у вас будет таблица стилей, загруженная стилями !important , если вы слишком много опирались на !important для достижения желаемых стилей. Вы можете изменить обработку CSS страницы в значительной степени.
Используйте !important для проверки или в некоторых случаях для переопределения встроенного стиля, который является частью оформления или шаблонов фреймворка. Даже в таких случаях рекомендуется использовать эту технику редко.
Где использовать правило !important ?
Использование правила !important может быть нормальным в следующих случаях:
- Переопределение стилей в пользовательском таблице стилей
Главным образом правило !important было создано, чтобы предоставить пользователю возможность переопределить стили веб-страниц. Оно часто используется программой чтения экрана, средствами блокирования рекламы и т. д.
- Переопределение исходного кода и встроенных стилей.
Как разработчик вы должны стремиться иметь как можно больше контроля над вашим кодом. но бывают случаи. когда нет другого выбора кроме как работать с тем. что имеете. Используйте !important редко.
Наверное лучшим способом является использование utility-классов. Рассмотрим кнопки. Если на вашей веб-странице есть название класса подобно .button и неважно, какой элемент вы поместите, вам необходимо, чтобы этот элемент имел вид кнопки (с конкретным шрифтом, круглыми углами, особым фоном и границами), можете попробовать следующее:
Пример
html> html> head> title>Заголовок документа title> style> .button < background: #1c87c9; color: white; font-weight: bold; padding: 5px; border-radius: 4px; border: 1px solid #666; text-decoration: none; > style> head> body> a href="#" class="button">BUTTON a> body> html>Здесь спецификой является 0,0,1,0. Если есть и другие селекторы с высокой спецификой, которые влияют на элемент, у вас могут быть проблемы в таком виде:
Пример
html> html> head> title>Заголовок документа title> style> #mybutton a < border-bottom: 3px dashed #8ebf42; > .button < background: #1c87c9; color: white; font-weight: bold; padding: 5px; border-radius: 4px; border: 3px solid #666; text-decoration: none; > style> head> body> section id="mybutton"> p>This is a a href="#" class="button">BUTTON a> p> section> body> html>Как видите, кнопки с особым дизайном имеют нижнюю пунктирную границу в зеленом цвете, но мы ожидали другое. Довольно просто и иногда полностью подходяще установить CSS селектор со значением выше 0,0,1,0.
Будет более эффективно добавление правила !important к значениям. Рассмотрим пример, где к кнопкам применено правило !important .
Пример
html> html> head> title>Заголовок документа title> style> #mybutton a < border-bottom: 3px dashed #8ebf42; > .button < background: #1c87c9 !important; color: white !important; font-weight: bold !important; padding: 5px !important; border-radius: 4px !important; border: 3px solid #666 !important; text-decoration: none !important; > style> head> body> section id="mybutton"> p>This is a a href="#" class="button">BUTTON a> p> section> body> html>Пользовательские таблицы стилей
Эта директива была введена, чтобы помочь пользователям веб-страниц справиться с таблицами стилей, которые представляют для них трудность при использовании или чтении страниц.
Если кто-то определяет таблицу стилей для просмотра веб-страниц, то эта таблица будет переопределена таблицей стилей автора страницы. Если пользователь указывает стиль подобно !important, этот стиль переопределяет таблицу стилей автора веб-страницы, даже если автор выбирает такое правило, как !important .
Эта структура полезна для тех пользователей, кто каким-нибудь образом должен установить стили. Например на всех используемых ими веб-страницах слабовидящему читателю понадобится увеличить размер шрифта по умолчанию. С помощью использования директивы !important при разработке страниц, вы обеспечиваете индивидуальные требования ваших пользователей.
Не рекомендуется использовать правило !important слишком часто, так как единственное, что может переопределить !important — это другое правило !important. Один раз используя его, у вас получится CSS файл, полный правилами !important , и это не очень хорошо.
Так когда же всё таки можно использовать !important?
Любая фича в «кривых» руках становится плохой. Импортант — не исключение. Плохо не то, что он умеет, а то, как его используют.
Как работает !important
В CSS для определения приоритета стилей мы пользуемся механизмом специфичности. Мы пишем каскады или сложные селекторы, повышаем вес селектора, таким образом указываем браузеру приоритетность одних стилей над другими.
.content .title < color: red; >.title
В этом случае, несмотря на то, что синий цвет применяется к заголовку после красного, в результате мы получим все же красный заголовок. Потому, что первый селектор является более специфичным (если вдруг вы с этим не знакомы, не читайте дальше — будет только хуже, лучше вот сюда и учите специфичность).
Так вот, используя этот же пример, но с !important, мы вдруг узнаём, что ему «плевать» на вашу специфичность.
.content .title < color: red; >.title
Заголовок будет синим! Это свойство нарушает естественный поток написанных нами правил и менее приоритетным стилям даёт наибольший приоритет.
Ну хотя, как «плевать»… Не совсем уж и плевать. Допишем ещё один импортант.
.content .title < color: red !important; >.title
И заголовок снова красный. Потому что у нас конфликтуют два !important и решается этот конфликт сравнением весов селекторов.
Импортант — это плохо, когда так:
.title
«Хм, я же написал “красный”, почему мой заголовок не красный? А если так?»
.title
«Отлично! Красный!» А точно ли отлично?
Такой подход плох как минимум потому, что вы переопределяете стили не разобравшись, почему они не применялись без импортанта. Скорее всего, вес селектора, которым вы воспользовались, оказался просто недостаточным и, написав чуть более точный и «тяжелый» селектор, вы бы решили свою проблему, а так вы жестко переопределили стили, и хорошо, если вы знаете и проверили все места, где использовался этот класс, но если это не так, то вы подчинили элемент в одном месте и, вероятно, сломали в другом.
Инструмент для hotfix
Очень часто, когда я задаю кому-то вопрос про импортанты, я слышу ответ в стиле: «Я использую important тогда, когда мне нужно быстро пофиксить проблему и некогда разбираться в коде, который писал не я и который написан очень плохо».
Да, но только задачи всегда «срочные», такие задачи, как правило, никто и никогда не доделает, так это и оставив. Вы и сами не заметили, как сделали «плохой чужой код» ещё хуже.
Что значит «быстро»? Разве узнать необходимый вес селектора для переопределения так сложно и долго? Мы очень активно используем DevTools при разработке, и для решения этой задачи ответ у нас есть там же.
Инспектируем элемент, который хотим изменить. Его текущий цвет — черный. Смотрим, по какому же селектору был назначен этот цвет?
Используем этот же селектор для назначения нового цвета или для повышения веса, и дело в шляпе, какой бы сложности не был этот селектор.
Разве это долго? Мне кажется, по времени это мало отличается от того, чтобы дописать !important, однако намного правильнее и безопаснее.
Сторонние решения и чужой код
Второй по популярности ответ на вопрос про необходимость использования импортантов: «Я использую !important, когда переопределяю стили сторонних библиотек и плагинов или CMS-ок».
Этот ответ чуть ближе к правде, но только если его чуть более точно сформулировать. Именно в такой форме он неправильный, потому как стили сторонних файлов можно перезаписывать точно так же, как и свои, просто дописывая их после подключения чужих стилей и повышая вес селектора.
Однако в некоторых случаях этот ответ «попадает» в вопрос. Например, если вы подключили слайдер к своей странице, который реализован так, что при переключении слайда JavaScript-ом перезаписываются значения некоторых свойств в CSS.
А вам почему-то надо переопределить эти свойства, проигнорировав изменения самого плагина.
JS может переназначать значения свойств только с помощью inline-стилей. То есть фактически любые свойства, изменённые у элемента с помощью JavaScript, будут просто записаны в атрибут style. С точки зрения механизма специфичности, эти стили более приоритетные, и как бы вы ни повышали вес селектора, вы не сможете перезаписать их.
Это именно тот первый случай, в котором нам просто не обойтись без important.
Если нам нужно переопределить инлайновые стили, то нам поможет только important.
Приоритетность стилей с импортантом выше, чем приоритетность инлайн-стилей, и если у вас почему-то появилась необходимость перезаписывать инлайновые стили, то у вас нет вариантов, кроме как использовать !important.
Important во благо
Рассмотрим ещё один случай, который иногда применяют в коде различных библиотек и плагинов.
Если вы откроете исходный CSS-код библиотеки Bootstrap, то увидите, что там разработчики библиотеки очень часто прибегают к использованию импортантов. Возможно, им тоже просто нужно было быстро пофиксить, и они так поступили (сарказм), но вообще этому есть более подходящее объяснение. В этом случае important-ы используются «во благо». Таким образом разработчики Bootstrap «защищают» свой код.
Дело в том, что вы, подключая к своему сайту эту библиотеку, можете переопределять её исходные стили. Таким образом, разработчики перестраховались, и сломать поведение их кода будет сложнее, если вы не знаете, как работает специфичность. Но если вы понимаете, как работает механизм специфичности в CSS, то можете переопределить их импортант, записав свои стили тоже с импортантом, но с более «тяжелым» селектором.
Тем самым мы приходим к второму случаю, когда без импортанта нельзя.
Если вам нужно переопределить important (ваш или из сторонней библиотеки), то вам поможет только !important.
Именно поэтому некорректно говорить: «Я использую импортанты, когда мне нужно переопределить стили сторонних библиотек», правильнее будет сказать: «Я использую импортанты, когда мне нужно переопределить inline-стили или другие !important». И совсем не важно откуда эти стили: из ваших файлов или из сторонних.
Хелперы
В предыдущем абзаце, по сути, описаны все случаи, когда использование импортантов будет нормальным и правильным. Это те случаи, в которых применение импортантов будет неизбежным. Но существуют ещё случаи, в которых использование импортантов будет допустимым, хоть, возможно, уже и не совсем уместным.
Иногда нам необходимы вспомогательные универсальные классы, которые мы используем в своём коде с целью повторного использования кода и некоторого упрощения.
Например, мы создаём какой-то класс .warning, который будем применять к различным элементам на странице, тем самым обозначая их важность.
.warning
И мы хотим, чтобы, применяя этот класс к любому элементу, мы точно делали текст в этом элементе красным. Но ведь у элемента могут быть более приоритетные стили, записанные по более точному селектору, и тогда наш цвет из класса .warning перетрется. В таком случае, добавив important в наш классхелпер, мы делаем его более универсальным, потому что цвет, применяемый в этом классе, будет более приоритетным. Однако сказать, что это хорошо, я не могу. Ведь это делает стили класса более приоритетными, но все равно не гарантирует вам стопроцентной работы, поскольку этот хелпер может столкнуться с другим important, и все равно всё пойдёт не по плану. А потом, когда окажется, что все же в определенном случае этот класс должен делать текст «не таким уж и красным», то вы сразу же «родите» новый селектор с повторением импортанта.
Когда всё таки можно
Правильно и нормально использовать !important, когда вам нужно переопределить inline-стили или другие !important.
Если следовать этому правилу, то выходит, что в обычной верстке, особенно если вы верстаете страницу с нуля, у вас не возникает необходимости использовать импортант вплоть до того момента, пока вы не начинаете подключать сторонние решения к своей странице, но даже это, как мы разобрались выше, не обязательно приводит к их использованию.
Современные методологии вроде БЭМ тоже диктуют свои правила, в которых использование инлайновых стилей или импортантов будет неуместным.
Импортант вам не нужен не потому, что он какой-то загадочный и ужасный, а просто потому, что в большинстве случаев можно обойтись без него.
Все исключения, которые я определил для себя, как правило, сводятся к не очень типичным случаям. Например, у вас может появиться необходимость использовать это, когда вы разрабатываете собственную библиотеку, плагин или браузерное расширение и вам нужно какое-то более приоритетное поведение конкретных стилей. Однако это далеко не про типичное регулярное использование.
Как использовать CSS ::before и ::after для создания пользовательских анимаций и переходов
Как сделать плавный анимированный переход на сайте без использования специальных библиотек? Урок использования псевдоэлементов CSS для создания эффектов: от анимированной кнопки до карточки профиля. Подходит новичкам.
Чтобы применить на практике методы из статьи, нужно:
- Базовое понимание HTML.
- Базовое понимание CSS.
- Редактор кода и браузер.
Что такое псевдоэлементы
Псевдоэлементы — это селекторы CSS , которые используют для вставки содержимого, которого нет в исходном коде, их используют для стилизации определённой части выбранного элемента. Начинаются они с двойного двоеточия: ::before , ::after , ::placeholder , ::first-letter . В этой статье речь пойдёт только про использование ::before и ::after .
Псевдоэлемент ::before вставляет содержимое перед элементом.
h1::before
Псевдоэлемент ::after вставляет содержимое после элемента.
h1::after
В чём разница между псевдоэлементом и псевдоклассом?
Псевдоэлементы и псевдоклассы иногда путают, потому что звучат они похоже, хотя по факту — совершенно разные явления.
Псевдоэлементы добавляют содержимое. В отличие от них, псевдоклассы — это селекторы, которые выбирают элементы, находящиеся в определённом состоянии. Пример — псевдокласс :hover , который позволяет применить правила CSS к элементу только при наведении курсора на элемент.
Синтаксически псевдокласс начинается с двоеточия, а псевдоэлемент — с двойного двоеточия.
Как создать анимацию при помощи псевдоэлементов
Скорее всего, вы уже знакомы со многими свойствами CSS. На всякий случай здесь мы сначала рассмотрим некоторые из них.
- transform
- translate
- rotate
- scale
- skew
Если вы и так знаете о них достаточно, переходите сразу к инструкции.
Transform и Transition
В этом проекте мы используем свойства transform и transition , так что нужно понимать, что они делают и для чего нужны.
Transform изначально позволяет двигать, поворачивать, масштабировать и наклонять элемент.
.box-1 < transform: translate(100px, 100px); >.box-2 < transform: rotate(60deg); >.box-3 < transform: scale(2); >.box-4
Свойство transition устанавливает продолжительность изменений, чтобы анимация была плавной.
Позиционирование с помощью relative и absolute
Существует несколько свойство CSS, которые помогают контролировать поток документа и положение элемента в документе. В этой статье нам будут интересны только relative и absolute .
Значение relative
Relative позволяет контролировать позицию элемента относительно себя в потоке документа. Например, можно перемещать объект, используя его изначальное положение в качестве точки отсчёта:
.box-2
Как видите, второй бокс сдвигается вправо на 150 пикселей от изначального положения, но это не влияет на поток документа, поскольку пространство, заданное в макете, не меняется.
Значение absolute
Когда мы задаём элементу значение absolute, CSS удаляет элемент из обычного потока документа, перекрывая другие элементы. Элемент со значением absolute располагается относительно блока со значением позиционирования relative — родительского контейнера.
Когда такого блока рядом нет, в качестве точки отсчёта используется тело документа.
.parent-container < position: relative; >.box-1 < position: absolute; left: 20px; top: 20px; >.box-2
Контроль Controlling the stacking order of elements using z-index
Свойство z-index позволяет накладывать элементы один на другой и менять порядок наложения. Если элемент находится выше по порядку наложения, он появится раньше элемента с низким значением:
.box-1 < z-index: 1; >.box-2 < z-index: 2; >.box-3 < z-index: 3; >.box-4
Z-index работает только с элементами, которые были позиционированы с помощью свойства position . Если у двух элементов одинаковый z-index , сверху будет тот, который стоит последним в разметке HTML.
Создаём анимацию с помощью псевдоэлементов
Начнём первый проект с создания простой анимированной кнопки, чтобы понять, как использовать псевдоэлементы для анимации.
Создаём тег привязки, который позже применим к кнопке.
Переходим к файлу CSS и стилизуем ссылку, чтобы она выглядела, как кнопка.
Код должен готовить сам за себя — убрали дефолтное подчёркивание, добавили двухпиксельную рамку и перекрасили кнопку в цвет текста. Ещё добавили отступы, чтобы отделить текст от рамки, и скруглили края кнопки при помощи радиуса границы. Добавили длительность перехода — 1 секунду. То есть любое изменение кнопки будет длиться в течение секунда, плавно. Наконец, установили значение relative , потому что внутри кнопки расположим псевдоэлемент. Кнопка станет родительским контейнером, относительно которого будет меняться положение элемента со значением absolute . Вот что получится:
Пора создать в кнопке псевдоэлемент.
.btn::before
Мы создали псевдоэлемент с пустым свойством content , то есть внутри ничего нет. Позиционирование у него со значением absolute , что удаляет элемент из обычного потока документов так, что он перекрывает кнопку, и устанавливает координаты top и left равными нулю. Так пустой псевдоэлемент прикрепляется к кнопке именно в этих местах.
После устанавливаем ширину и высоту пустого элемента равными 100 % родительского элемента — кнопки.
В итоге мы перекрасили фон псевдоэлемента в цвет кнопки и ещё раз добавили секундный переход. Вот что получится:
Как видим, псевдоэлемент перекрывает кнопку — из-за значения absolute свойства position .
Решим эту задачу, используя z-index , чтобы изменить контекст наложения. Расположим псевдоэлемент за кнопкой при помощи отрицательного значения z-index . Затем используем translate , чтобы передвинуть псевдоэлемент влево на -100%.
.btn::before < /*. previous code */ z-index: -1; transform: translateX(-100%); >Вот что получается:
Теперь анимируем псевдоэлемент, чтобы он возвращался в исходное положение, когда пользователь наводит курсор на кнопку. Используем псевдокласс :hover .
.btn:hover::before
По сути, когда на кнопку наводят курсор, псевдоэлемент возвращается к позиции absolute . Вот результат:
.btn:hover
Поскольку мы добавили translate к самой кнопке, изменения пройдут плавно.
Последний шаг: применим overflow: hidden к кнопке, чтобы скрыть любой элемент, выходящий за пределы контейнера. Свойство скроет псевдоэлемент, мы увидим его, когда он вернётся в начальную позицию.
Итак, мы создали анимированную кнопку с помощью псевдоэлемента. Полный код тут.
Создаём продвинутую анимацию для профиля с помощью множества псевдоэлементов
Теперь усложним задачу и сделаем более сложную анимированную карточку профиля, используя уже четыре псевдоэлемента. Сделаем интересный эффект при наведении курсора. Вот что будет в разметке.
John Doe
Ceo / Founder
Мы создали простую карточку div с данными пользователя: именем и должностью.
Переходим к CSS и изменяем стиль карточки.
.profile-card < width: 300px; height: 400px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); display: grid; place-items: center; position: relative; background: url("/image.jpg") no-repeat center center/cover; >Мы создали карточку с фиксированной шириной и высотой, поместили содержимое внутрь и расположили его по центру с помощью CSS Grid. Добавили тень по краям, чтобы всё выглядело реалистичнее. Потом установили карточке значение relative , чтобы превратить её в родительский контейнер для псевдоэлементов. В конце добавили по центру фоновую картинку.
Переходим к созданию псевдоэлементов. Это непросто. Нужно использовать четыре псевдоэлемента, но у элемента может быть только один псевдоэлемент ::before и один псевдоэлемент ::after . Чтобы обойти это ограничение, используем саму карточку, чтобы сделать два псевдоэлемента, а потом блок info div внутри карточки, чтобы сделать ещё два. Начнём с info div .
.info::before
Поскольку у блока info div нет фиксированной ширины и высоты, псевдоэлемент принимает ширину и высоту родительской карточки.
Затем мы наклоняем его на 30 градусов и сдвигаем на 100%. Блок сдвигается вправо. Отрицательный индекс гарантирует, что он останется за текстом. Делаем блок полупрозрачным.
Переходим к следующему псевдоэлементу:
.info::after
Сделали примерно то же, что и раньше, только изменили направление наклона на противоположное и добавили тень блока, чтобы имитировать 3D.
Теперь сделаем так, чтобы при наведении курсора на карточку псевдоэлементы двигались внутрь карточки. Добавим transition для плавной анимации.
.profile-card:hover .info::before < transform: skew(30deg) translateX(50%); >.profile-card:hover .info::after
Вот что получится:
Теперь делаем псевдоэлементы для самой карточки.
.profile-card::before
Всё уже понятно из кода. Повторяем всё то же, что уже делали, просто передвигаем псевдоэлемент ::before вправо на 85 процентов. Затем создаём последний псевдоэлемент и наклоняем его в другую сторону.
.profile-card::after
Как вы уже догадались, при наведении курсора псевдоэлементы сдвигаются внутрь. Но в этот раз траектория будет больше.
.profile-card:hover:before < transform: skew(30deg) translateX(30%); >.profile-card:hover:after
Карточка почти готова. Установим свойство overflow как hidden , чтобы спрятать всё, что выходит за края.
.profile-card < /*. previous code. */ overflow: hidden; >Меняем цвет текста на белый и делаем его прозрачным. Когда курсор на карточке, прозрачность убираем, чтобы текст стал видимым.
.info h2, .info p < color: #fff; opacity: 0; transition: all 0.6s; >.profile-card:hover .info h2, .profile-card:hover .info p
Пока всё. Как видим, псевдоэлементы ::before и ::after помогают разработать анимацию.
Зачем нужны переменные в 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);
>Зачем это нужно
Допустим, у нас есть фрагмент кода с определением оформления для двух тегов и одного класса:
p < font-size: 20px; color: #32590a; >a < font-size: 20px; color: #32590a; >.tags
Если нам понадобится поменять везде размер шрифта и активный цвет, то придётся перебирать вручную все стили и смотреть, не забыли ли мы чего сделать. Вместо этого можно использовать переменные — так мы можем поменять значение в одном месте, и оно сразу будет использоваться во всех местах:
:root < --font-s: 20px; --color-f: #32590a; >p < font-size: var(--font-s); color: var(--color-f); >a < font-size: var(--font-s); color: var(--color-f); >.tags
Какие браузеры поддерживают
Переменные в CSS поддерживают все современные браузеры, кроме Internet Explorer (но он не современный, вместо него Edge, который это поддерживает), поэтому эту технику можно использовать в любых новых проектах.
Апскиллинг, как говорится
Апскиллинг — это, например, переход с уровня junior на уровень middle, а потом — senior. У «Яндекс Практикума» есть курсы ровно для этого: от алгоритмов и типов данных до модных фреймворков.
Получите ИТ-профессию
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.