Разница между currentColor и пользовательскими свойствами

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

Моя подруга пыталась установить тему для контейнера и применить цвет к границе заголовка и телу тексту. Что-то вроде этого:

Ей хотелось сохранить все простым с минимальным количеством CSS и идеально настроить тему, применяя только один класс в HTML.

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

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

Поскольку для border-color в классе .theme значение не установлено, используется значение по умолчанию. Значение по умолчанию для border-color — currentColor и в контексте .theme значения currentColor в этом примере #2378a3. Это значение, которое я ожидал получить при наследовании от .theme-heading.

Возможно, вам интересно, что именно произошло? Ответ заключается в том, что это не ошибка, и значение по-прежнему наследуется от родительского элемента. Оказывается, когда мы наследуем currentColor, мы не извлекаем разрешенное значение этого свойства из родителя. Вместо этого мы наследуем само ключевое слово, и вычисляемое значение будет обработано в локальном контексте. И, следовательно, в этом примере цвет границы будет черным.

Разумеется, решение состоит в том, чтобы установить значение border-color, как и color в селекторе .theme:

Теперь мы больше не наследуем динамическое свойство, а цвет границы будет таким, как ожидалось — #2378a3. И мы все еще устанавливаем значения цвета только в классе .theme.

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

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

В этой ситуации border-color из .theme-heading наследуется в пользовательское свойство —theme-color от родительского элемента. Тем не менее, несмотря на то, что для —theme-color значение установлено локально — черный, его цвет границы не будет использовать это локальное значение таким же образом, как currentColor.

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

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

Ключевое различие здесь: Ключевое слово currentColor не разрешено при вычислении значении, но является ссылкой на используемое значение локального свойства color.

Поскольку я узнал о пользовательских свойствах, я начал думать, что currentColor, как динамическое свойство, очень похоже на пользовательские свойства. Оказывается, есть некоторые фундаментальные различия, которые имеют реальные последствия, о которых мы должны знать. И опять же, этот пример показывает, как различные пользовательские свойства отличаются от переменных препроцессоров.

Источник: //www.madebymike.com.au/

Редакция: Команда webformyself.

Комментарии Вконтакте: