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

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

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

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

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

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

Комментарии Facebook:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree