От автора: есть несколько интересных различий между тем, как работают current Color и пользовательские свойства. Оба являются примерами динамических свойств в CSS, но способы их реализации различаются некоторыми очень важными деталями. Недавно я натолкнулся на пример этого, который заставил меня немного почесать голову.
Моя подруга пыталась установить тему для контейнера и применить цвет к границе заголовка и телу тексту. Что-то вроде этого:
Ей хотелось сохранить все простым с минимальным количеством CSS и идеально настроить тему, применяя только один класс в HTML.
Поскольку мы хотели изменить цвет больше, чем просто для абзацев основного текста, имело смысл начать с установки свойства color для элемента контейнера. Это позволит всем элементам внутри контейнера наследовать цвет темы, и мы могли бы просто установить для заголовков обратно черный цвет.
Поскольку мы хотели установить цвет только в одном месте, я предложил установить значение border-color в заголовках для наследования. Это приведет к тому, что элемент заголовка будет иметь то же значение border-color, что и его родительский элемент. К моему удивлению, цвет границы был черным. Мой CSS был примерно так:
.theme { color: #2378a3;
}
.theme-heading { color: black; border-color: inherit;
}Поскольку для border-color в классе .theme значение не установлено, используется значение по умолчанию. Значение по умолчанию для border-color — currentColor и в контексте .theme значения currentColor в этом примере #2378a3. Это значение, которое я ожидал получить при наследовании от .theme-heading.
Возможно, вам интересно, что именно произошло? Ответ заключается в том, что это не ошибка, и значение по-прежнему наследуется от родительского элемента. Оказывается, когда мы наследуем currentColor, мы не извлекаем разрешенное значение этого свойства из родителя. Вместо этого мы наследуем само ключевое слово, и вычисляемое значение будет обработано в локальном контексте. И, следовательно, в этом примере цвет границы будет черным.
Разумеется, решение состоит в том, чтобы установить значение border-color, как и color в селекторе .theme:
.theme { color: #2378a3; border-color: #2378a3;
} .theme-heading { color: black; border-color: inherit;
}Теперь мы больше не наследуем динамическое свойство, а цвет границы будет таким, как ожидалось — #2378a3. И мы все еще устанавливаем значения цвета только в классе .theme.
Возможно, это то, чего вы ожидали. Возможно, причина, по которой я этого не делал, заключается в том, что я недавно работал с пользовательскими свойствами, и хотя оба эти элемента являются динамическими, пользовательские свойства не будут работать, как currentColor в той же ситуации.
Пример, эквивалентный пользовательским свойствам, будет выглядеть примерно так:
.theme { --theme-color: #2378a3; color: var(--theme-color); border-color: var(--theme-color);
} .theme-heading { --theme-color: black; color: var(--theme-color); border-color: inherit; }В этой ситуации border-color из .theme-heading наследуется в пользовательское свойство —theme-color от родительского элемента. Тем не менее, несмотря на то, что для —theme-color значение установлено локально — черный, его цвет границы не будет использовать это локальное значение таким же образом, как currentColor.
Наследование значения, заданного пользовательским свойством, всегда будет соответствовать разрешенному значению родительского.
Примечание. Свойство color в этом примере примет локальное значение, потому что оно не наследуется.
Ключевое различие здесь: Ключевое слово currentColor не разрешено при вычислении значении, но является ссылкой на используемое значение локального свойства color.
Поскольку я узнал о пользовательских свойствах, я начал думать, что currentColor, как динамическое свойство, очень похоже на пользовательские свойства. Оказывается, есть некоторые фундаментальные различия, которые имеют реальные последствия, о которых мы должны знать. И опять же, этот пример показывает, как различные пользовательские свойства отличаются от переменных препроцессоров.
Источник: https://www.madebymike.com.au/
Редакция: Команда webformyself.