Автор курса Нетологии «HTML-верстка» Стас Мельников рассказал о нюансах, которые могут усложнить работу с пользовательскими CSS-свойствами.

Обучение в онлайн-университете: курс «Старт в программировании»

Правила синтаксиса названий пользовательских свойств

Мы привыкли, что встроенные CSS-свойства нечувствительны к регистру. Поэтому следующие способы объявления свойства border дадут одинаковый результат:

button {

BORDER: 2px solid #800080,

}

button {

border: 2px solid #800080,

}

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

button {

NOPK NETOLOGY-BRAND-COLOR: #800080,

nopk netology-brand-color: #27ae60,

border: 2px solid var(NOPK NETOLOGY-BRAND-COLOR),

color: var(nopk netology-brand-color),

}

Подводные камни пользовательских CSS-свойств

Теперь рамка стала цветом #800080 (фиолетовый), а цвет текста — #27ae60 (зеленый).

Допустимые значения для пользовательских свойств

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

.element::before {

color: rgba(0, 0, 0, 1),

hex: #000000,

value: 20px,

number: 3,

text: Hey, whats up?,

keyword: currentColor,

}

Для примера зададим рамку с цветом #800080 для кнопки:

button {

nopk netologyBrandColor: #800080,

border-width: 2px,

border-style: solid,

border-color: var(nopk netologyBrandColor),

}

Подводные камни пользовательских CSS-свойств

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

button {

nopk netologyBrandColor: #800080,

buttonBorderColor: var(nopk netologyBrandColor),

border-width: 2px,

border-style: solid,

border-color: var(buttonBorderColor),

}

Результат ничем отличается от предыдущего, и у кнопки все так же рамка с цветом #800080.

Если у пользовательского свойства nopk netologyBrandColor будет некорректное значение для свойства border-color, например 18px, то рамка станет черной.

button {

nopk netologyBrandColor: 18px,

buttonBorderColor: var(nopk netologyBrandColor),

border-width: 2px,

border-style: solid,

border-color: var(buttonBorderColor),

}

Подводные камни пользовательских CSS-свойств

Дело в том, что прежде чем браузер применит значение пользовательского свойства для встроенного свойства, он проверит его на корректность. Если значение доступно для встроенного свойства, то браузер применит его. А если нет, то установит для встроенного свойства значение по умолчанию.

В нашем случае 18px некорректное значение для встроенного свойства border-color, и поэтому браузер установит значение по умолчанию, т.е currentColor. Это очень легко проверить, задав для свойства color значение #800080:

button {

nopk netologyBrandColor: 18px,

buttonBorderColor: var(nopk netologyBrandColor),

border-width: 2px,

border-style: solid,

border-color: var(buttonBorderColor),

color: #800080,

}

Подводные камни пользовательских CSS-свойств

Как видим, браузер применил значение #800080 для рамки. В этом примере я использовал полный синтаксис, чтобы установить рамку. Но мы можем использовать краткий, а именно свойство border.

button {

nopk netologyBrandColor: 18px,

buttonBorderColor: var(nopk netologyBrandColor),

border: 2px solid var(buttonBorderColor),

color: #800080,

}

Подводные камни пользовательских CSS-свойств

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

В нашем примере у встроенного свойства border в качестве одного из значений установлено пользовательское свойство buttonBorderColor с некорректным значением 18px. Согласно описанному алгоритму, браузер просто проигнорировал свойство border, поэтому у элемента пропала рамка.

Значение по умолчанию для пользовательских свойств

Когда мы рассматривали пример с функцией var, то использовали только один параметр — название пользовательского свойства.

button {

nopk netologyBrandColor: #800080,

border: 2px solid var(nopk netologyBrandColor),

color: var(nopk netologyBrandColor),

}

button:hover {

nopk netologyBrandColor: #27ae60,

}

Но кроме него, функция var может принимать и второй — значение по умолчанию. Для объявления значения по умолчанию нужно после названия пользовательского свойства поставить запятую и написать само значение.

Подводные камни пользовательских CSS-свойств

Когда браузер поймет, что разработчик не объявил значение для пользовательского свойства, то использует значение по умолчанию. Например значение #800080 (фиолетовый) для пользовательского свойства nopk netologyBrandColor.

button {

border: 2px solid var(nopk netologyBrandColor, #800080),

color: var(nopk netologyBrandColor, #800080),

}

button:hover {

nopk netologyBrandColor: #27ae60,

}

Подводные камни пользовательских CSS-свойствПодводные камни пользовательских CSS-свойств

Мы видим, что рамка и текст стали фиолетовыми. Но если навести на кнопку, то они станут зелеными. Это говорит о том, что браузер применил значение #27ae60 для пользовательского свойства, тем самым заменив значение по умолчанию.

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

Но можно сделать по-другому. Функция var позволяет передавать другую функцию var, поэтому в качестве значения по умолчанию можно задать другое пользовательское свойство. Я перепишу предыдущий пример с использованием пользовательского свойства defaultButtonColor:

button {

defaultButtonColor: #800080,

border: 2px solid var(nopk netologyBrandColor, var(defaultButtonColor)),

color: var(nopk netologyBrandColor, var(defaultButtonColor)),

}

button:hover {

nopk netologyBrandColor: #27ae60,

}

Внешне результат не изменится. Но теперь для изменения значения по умолчанию нужно сделать это только в одном месте, а не в нескольких, как раньше.

Наследование пользовательских свойств

В CSS работает механизм наследования, который позволяет элементам наследовать свойства у родительских элементов. В этом плане пользовательские свойства ничем не отличаются от них. Для примера я напишу код, в котором пользовательское свойство nopk netologyBrandColor наследуется от родительского элемента body.

body {

nopk netologyBrandColor: #800080,

}

button {

border: 2px solid var(nopk netologyBrandColor),

color: var(nopk netologyBrandColor),

}

Подводные камни пользовательских CSS-свойств

Посмотрев в инспектор, можно заметить надпись “Inherited from body”, которая показывает нам, что пользовательское свойство было взято из элемента body. Но если для элемента button добавить пользовательское свойство nopk netologyBrandColor, то оно уже перекроет свойство из элемента body.

body {

nopk netologyBrandColor: #800080,

}

button {

nopk netologyBrandColor: #27ae60,

border: 2px solid var(nopk netologyBrandColor),

color: var(nopk netologyBrandColor),

}

Подводные камни пользовательских CSS-свойств

В инспекторе видно, что пользовательское свойство nopk netologyBrandColor у элемента button переопределило свойство nopk netologyBrandColor, которое мы указали для элемента body.

Глобальные значения

В стандарте CSS Custom Properties ввели особенный псевдокласс root, который позволяет указать пользовательские свойства, которые применяются к корневому элементу документа. Например, в HTML-документе к элементу html.

:root {

nopk netologyBrandColor: #800080,

}

button {

border: 2px solid var(nopk netologyBrandColor),

color: var(nopk netologyBrandColor),

}

Подводные камни пользовательских CSS-свойств

В инспекторе мы можем увидеть, что объявленное пользовательское свойство применяется к элементу html. Но, кроме HTML-документа, псевдокласс root работает в SVG-документах. Например, я объявлю пользовательские свойства в теге style.

<,svg xmlns=http://www.w3.org/2000/svg viewBox=0 0 26 28 width=50 height=50>,

<,style>,

:root{

iconColor: #ffcc00,

iconStroke: #000000,

iconStrokeWidth: 2px,

}

<,/style>,

<,path stroke=var(iconStroke)

stroke-width=var(iconStrokeWidth)

fill=var(iconColor)

d=M26 10.109c0 .281-.203.547-.406.75l-5.672 5.531 1.344 7.812c.016.109.016.203.016.313 0 .406-.187.781-.641.781a1.27 1.27 0 0 1-.625-.187L13 21.422l-7.016 3.687c-.203.109-.406.187-.625.187-.453 0-.656-.375-.656-.781 0-.109.016-.203.031-.313l1.344-7.812L.39 10.859c-.187-.203-.391-.469-.391-.75 0-.469.484-.656.875-.719l7.844-1.141 3.516-7.109c.141-.297.406-.641.766-.641s.625.344.766.641l3.516 7.109 7.844 1.141c.375.063.875.25.875.719z/>,

<,/svg>,

Подводные камни пользовательских CSS-свойств

И здесь мы видим, что у корневого элемента SVG добавился псевдокласс root. Соответственно, это доказывает, что псевдокласс root применяется не только к тегу html, а к любому корневому элементу.

Заключение

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

Читать еще: «Введение в пользовательские CSS-свойства»

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации. Чтобы быть в курсе всех новостей и читать новые статьи, присоединяйтесь к Телеграм-каналу Нетологии.

Оцените статью

Средняя оценка 0 / 5. Всего проголосовало 0

Телеграм Нетологии
 

Добавить комментарий


Помогла статья? Оцените её!
0 из 5. Общее количество голосов - 0