Поделиться
doctor Brain
мир глазами веб-разработчика
CSS: currentColor для svg
возможности использования ключевого слова currentColor для svg-изображений
время чтения 3 мин.
fill для SVG
Допустим, есть монохромное svg-изображение, и Вы хотите, чтобы оно было одинакового цвета с основным текстом.
Возьмем картинку с деревом (
Например, цвет текста на сайте “темно-угольный” (#272727), если Вы хотите, чтобы svg-изображение было такого же цвета, нужно задать соответствующее значение цвета для атрибута fill тега path :
Динамический цвет для SVG
Вышеприведенный подход несомненно работает. Но как поступить, если возникнет необходимость добавить такую картинку в параграф с текстом другого цвета например, зеленого.
Это мой зеленый текст
В данном случае цвет текста #009900. Вам придется еще раз изменить значение параметра fill для изображения:
Теперь картинка и текст одного цвета. А что делать, если это будет ссылка: при наведении цвета опять не будут совпадать.
Именно в таких случаях ключевое слово currentColor будет Вашим спасением. Его можно использовать в качестве значения атрибута fill : цвет svg-картинки будет соответствовать цвету текста:
Это очень хороший и, что важно, очень востребованный трюк.
Когда не нужно использовать currentColor
В некоторых случаях использование значения currentColor для атрибута fill неуместно. Например, если изображение является логотипом и должно сохранять свой специфический цвет независимо от контекста и действий, совершаемых на сайте.
Делаем CSS короче с помощью currentColor
Дата публикации: 2015-02-03
От автора: Оказывается, что currentColor появился уже достаточно давно, но я впервые услышал о нем только несколько месяцев назад, когда прочел заметку от Дадли Стори (Dudley Storey). Он утверждает, что данное ключевое слово имеет хорошую браузерную поддержку (IE9+). И для меня этого было вполне достаточно, чтобы начать использовать его в реальных проектах. Я был очень удивлен, когда выяснил, насколько полезным может быть данное ключевое слово: оно позволяет сделать ваш CSS код короче и умнее.
Прежде чем мы начнем углубляться в рассмотрение практических примеров, приведу небольшой кусочек теории. Вот как currentColor описывается на сайте MDN:
Ключевое слово currentColor представляет вычисленное значение свойства color у конкретного элемента. Оно позволяет сделать так, чтобы свойства цвета были унаследованы другими свойствами цвета или свойствами дочернего элемента, который не унаследовал данное свойство по умолчанию.
Это мой любимый случай. Возьмем очень распространенный пример в Интернете — кнопка с SVG иконкой и названием внутри кнопки. У меня тоже есть такие на моем сайте:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Конечно, вы очень ответственный веб-дизайнер, поэтому мы продумываете стили для разных состояний элемента, т.е. :hover, :focus, :active, чтобы улучшить взаимодействие с пользователем. Вот как обычно выглядит ваш код:
Currentcolor css что это
Тип CSS data type предоставляет цвет в цветовом спектре sRGB. В может включать значения прозрачности Альфа-канала (alpha-channel), указывающие, как цвет сочетается с его фоном.
В может быть определена любым из следующих способов can.
Синтаксис
Для типа данных задаётся с помощью одного из следующих параметров.
Примечание: значения точно определены, их фактический внешний вид может отличаться (иногда значительно) от устройства к устройству. Это связано с тем что большинство устройств не откалиброваны, а некоторые браузеры не поддерживают цветовые профили устройств вывода.
Ключевые цвета
Есть несколько предостережений, которые следует учитывать при использовании ключевых слов цвета:
Примечание: Список принятых ключевых слов претерпел много изменений в ходе эволюции CSS:
| Спецификация | Эквивалент RGB | Ключевое слово | RGB hex значение | Видео сайта |
|---|---|---|---|---|
| CSS Level 1 | black | #000000 | ||
| silver | #c0c0c0 | |||
| gray | #808080 | |||
| white | #ffffff | |||
| maroon | #800000 | |||
| red | #ff0000 | |||
| purple | #800080 | |||
| fuchsia | #ff00ff | |||
| green | #008000 | |||
| lime | #00ff00 | |||
| olive | #808000 | |||
| yellow | #ffff00 | |||
| navy | #000080 | |||
| blue | #0000ff | |||
| teal | #008080 | |||
| aqua | #00ffff | |||
| CSS Level 2 (Revision 1) | orange | #ffa500 | ||
| CSS Color Module Level 3 | aliceblue | #f0f8ff | ||
| antiquewhite | #faebd7 | |||
| aquamarine | #7fffd4 | |||
| azure | #f0ffff | |||
| beige | #f5f5dc | |||
| bisque | #ffe4c4 | |||
| blanchedalmond | #ffebcd | |||
| blueviolet | #8a2be2 | |||
| brown | #a52a2a | |||
| burlywood | #deb887 | |||
| cadetblue | #5f9ea0 | |||
| chartreuse | #7fff00 | |||
| chocolate | #d2691e | |||
| coral | #ff7f50 | |||
| cornflowerblue | #6495ed | |||
| cornsilk | #fff8dc | |||
| crimson | #dc143c | |||
| cyan (synonym of aqua ) | #00ffff | |||
| darkblue | #00008b | |||
| darkcyan | #008b8b | |||
| darkgoldenrod | #b8860b | |||
| darkgray | #a9a9a9 | |||
| darkgreen | #006400 | |||
| darkgrey | #a9a9a9 | |||
| darkkhaki | #bdb76b | |||
| darkmagenta | #8b008b | |||
| darkolivegreen | #556b2f | |||
| darkorange | #ff8c00 | |||
| darkorchid | #9932cc | |||
| darkred | #8b0000 | |||
| darksalmon | #e9967a | |||
| darkseagreen | #8fbc8f | |||
| darkslateblue | #483d8b | |||
| darkslategray | #2f4f4f | |||
| darkslategrey | #2f4f4f | |||
| darkturquoise | #00ced1 | |||
| darkviolet | #9400d3 | |||
| deeppink | #ff1493 | |||
| deepskyblue | #00bfff | |||
| dimgray | #696969 | |||
| dimgrey | #696969 | |||
| dodgerblue | #1e90ff | |||
| firebrick | #b22222 | |||
| floralwhite | #fffaf0 | |||
| forestgreen | #228b22 | |||
| gainsboro | #dcdcdc | |||
| ghostwhite | #f8f8ff | |||
| gold | #ffd700 | |||
| goldenrod | #daa520 | |||
| greenyellow | #adff2f | |||
| grey | #808080 | |||
| honeydew | #f0fff0 | |||
| hotpink | #ff69b4 | |||
| indianred | #cd5c5c | |||
| indigo | #4b0082 | |||
| ivory | #fffff0 | |||
| khaki | #f0e68c | |||
| lavender | #e6e6fa | |||
| lavenderblush | #fff0f5 | |||
| lawngreen | #7cfc00 | |||
| lemonchiffon | #fffacd | |||
| lightblue | #add8e6 | |||
| lightcoral | #f08080 | |||
| lightcyan | #e0ffff | |||
| lightgoldenrodyellow | #fafad2 | |||
| lightgray | #d3d3d3 | |||
| lightgreen | #90ee90 | |||
| lightgrey | #d3d3d3 | |||
| lightpink | #ffb6c1 | |||
| lightsalmon | #ffa07a | |||
| lightseagreen | #20b2aa | |||
| lightskyblue | #87cefa | |||
| lightslategray | #778899 | |||
| lightslategrey | #778899 | |||
| lightsteelblue | #b0c4de | |||
| lightyellow | #ffffe0 | |||
| limegreen | #32cd32 | |||
| linen | #faf0e6 | |||
| magenta (synonym of fuchsia ) | #ff00ff | |||
| mediumaquamarine | #66cdaa | |||
| mediumblue | #0000cd | |||
| mediumorchid | #ba55d3 | |||
| mediumpurple | #9370db | |||
| mediumseagreen | #3cb371 | |||
| mediumslateblue | #7b68ee | |||
| mediumspringgreen | #00fa9a | |||
| mediumturquoise | #48d1cc | |||
| mediumvioletred | #c71585 | |||
| midnightblue | #191970 | |||
| mintcream | #f5fffa | |||
| mistyrose | #ffe4e1 | |||
| moccasin | #ffe4b5 | |||
| navajowhite | #ffdead | |||
| oldlace | #fdf5e6 | |||
| olivedrab | #6b8e23 | |||
| orangered | #ff4500 | |||
| orchid | #da70d6 | |||
| palegoldenrod | #eee8aa | |||
| palegreen | #98fb98 | |||
| paleturquoise | #afeeee | |||
| palevioletred | #db7093 | |||
| papayawhip | #ffefd5 | |||
| peachpuff | #ffdab9 | |||
| peru | #cd853f | |||
| pink | #ffc0cb | |||
| plum | #dda0dd | |||
| powderblue | #b0e0e6 | |||
| rosybrown | #bc8f8f | |||
| royalblue | #4169e1 | |||
| saddlebrown | #8b4513 | |||
| salmon | #fa8072 | |||
| sandybrown | #f4a460 | |||
| seagreen | #2e8b57 | |||
| seashell | #fff5ee | |||
| sienna | #a0522d | |||
| skyblue | #87ceeb | |||
| slateblue | #6a5acd | |||
| slategray | #708090 | |||
| slategrey | #708090 | |||
| snow | #fffafa | |||
| springgreen | #00ff7f | |||
| steelblue | #4682b4 | |||
| tan | #d2b48c | |||
| thistle | #d8bfd8 | |||
| tomato | #ff6347 | |||
| turquoise | #40e0d0 | |||
| violet | #ee82ee | |||
| wheat | #f5deb3 | |||
| whitesmoke | #f5f5f5 | |||
| yellowgreen | #9acd32 | |||
| CSS Color Module Level 4 | rebeccapurple | #663399 |
Прозрачное ключевое слово
currentColor ключевое слово
currentColor пример
RGB цвет
Цветовая модель RGB определяет заданный цвет в соответствии с его красными, зелёными и синими компонентами. Дополнительный Альфа-компонент представляет прозрачность цвета.
Синтаксис
, где число 1 соответствует 100% (полная непрозрачность). Функциональная нотация: rgb(R G B[ A]) or rgba(R G B A) CSS Colors Level 4 добавляет поддержку разделённых пробелами значений в функциональной нотации.
Пример
RGB варианты синтаксиса
В этом примере показано множество способов создания одного цвета с помощью различных цветовых синтаксисов RGB.
RGB вариации прозрачности
Цвет HSL
Цветовая модель HSL определяет заданный цвет в соответствии с его компонентами оттенка, насыщенности и яркости. Дополнительный Альфа-компонент представляет прозрачность цвета.
Многие дизайнеры считают HSL более интуитивным, чем RGB, поскольку он позволяет независимо регулировать оттенок, насыщенность и лёгкость. HSL также может упростить создание набора подходящих цветов (например, когда вы хотите несколько оттенков одного оттенка).
Синтаксис
, где число 1 соответствует 100% (полная непрозрачность). Функциональная нотация: hsl(H S L[ A]) or hsla(H S L A) CSS Colors Level 4 добавляет поддержку разделённых пробелами значений в функциональной нотации.
Examples
HSL варианты синтаксиса
Полностью насыщенные цвета
| Нотация | Описание: | Итог |
|---|---|---|
| hsl(0, 100%, 50%) | red | |
| hsl(30, 100%, 50%) | orange | |
| hsl(60, 100%, 50%) | yellow | |
| hsl(90, 100%, 50%) | lime green | |
| hsl(120, 100%, 50%) | green | |
| hsl(150, 100%, 50%) | blue-green | |
| hsl(180, 100%, 50%) | cyan | |
| hsl(210, 100%, 50%) | sky blue | |
| hsl(240, 100%, 50%) | blue | |
| hsl(270, 100%, 50%) | purple | |
| hsl(300, 100%, 50%) | magenta | |
| hsl(330, 100%, 50%) | pink | |
| hsl(360, 100%, 50%) | red |
Более светлая и более тёмная зелень
| Нотация | Описание: | Итог |
|---|---|---|
| hsl(120, 100%, 0%) | black | |
| hsl(120, 100%, 20%) | ||
| hsl(120, 100%, 40%) | ||
| hsl(120, 100%, 60%) | ||
| hsl(120, 100%, 80%) | ||
| hsl(120, 100%, 100%) | white |
Насыщенная и ненасыщенная зелень
| Нотация | Описание: | Итог |
|---|---|---|
| hsl(120, 100%, 50%) | green | |
| hsl(120, 80%, 50%) | ||
| hsl(120, 60%, 50%) | ||
| hsl(120, 40%, 50%) | ||
| hsl(120, 20%, 50%) | ||
| hsl(120, 0%, 50%) | gray |
Вариации прозрачности HSL
Системный цвет
Не все системные цвета поддерживаются на всех системах. для использования на общедоступных веб-страницах.
Расширенные Цвета Системы Mozilla
Расширения Цветовых Предпочтений Mozilla
Интерполяция
В анимации и градиентах значения интерполируются на каждый из их красных, зелёных и синих компонентов. Каждый компонент интерполируется как реальное число с плавающей запятой. Обратите внимание, что интерполяция цветов происходит в Альфа-предварительно умноженном цветовом пространстве rgba, чтобы предотвратить появление неожиданных серых цветов. В анимации, скорость интерполяции определяется функцией времени.
Соображения доступности
Некоторые люди с трудом различают цвета. Рекомендация WCAG 2.0 настоятельно рекомендует не использовать цвет в качестве единственного средства передачи определённого сообщения, действия или результата. Дополнительную информацию см. В разделе цвет и цветовой контраст.
currentColor
Take your JavaScript to the next level at Frontend Masters.
CSS variables are always a hot topic when “the future of CSS” is discussed. They are actually coming natively, but using them in production (without a CSS preprocessor framework) is a long way off. However there is a feature that actually has some browser support now that has a CSS variable feel to it, and that’s the currentColor value.
It works like this:
I learned about this from a panel at SXSW 2011 on CSS3 with Stephanie & Greg Rewis, Estelle Weyl, and Christopher Schmitt. Googling it turned up Divya Manian’s article who says:
…you can use this value to indicate you want to use the value of color for other properties that accept a color value: borders, box shadows, outlines, or backgrounds.
This value was first supported by Opera in 2009, since then, Firefox 3.5+, Chrome 1+, and Safari 4+.
It will follow the cascade
Let’s say you wanted to exploit the variable quality to it, but then reset the color for the actual text… this won’t work:
Everything will be black.
Need front-end development training?
Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack.
Need front-end development training?
Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack.
Comments
Chris: Would you happen to know if this is different in any way from simply not specifying the color value of the border at all (as seen below)? I’ve been doing it like that for a long time now, not really reflecting over it – it simply works.
That still works as you know. There was just no way to explicitly declare this behavior, and I think currentColor is a reaction to that.
Yeah, if you check out the comments in this post, people mention a number of elements that will ‘inherit’ color from the color property. Basically, anything in the foreground will do this, which includes borders, text, list markers, alt text on images (if the image isn’t there), and even the HR element will take the value from the color property. I assumed it would also have effect on elements drawn on a canvas, but I think that was taking my assumptions a little too far. 🙂
This basically seems to be how currentColor works, as Chris mentions– a ‘reaction’ to that already existing behaviour. So now I guess it’s not just limited to the foreground elements, but anything that accepts a color value.
Understanding the currentColor Keyword in CSS
Published on September 1, 2020
While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It’s on our list, and we’re working on it! You can help us out by using the «report an issue» button at the bottom of the tutorial.
Usage
currentColor is useful when you want a certain color to be consistent in an element. For example, if you want an element to have a border color that’s the same as the element’s text color, using currentColor makes a lot of sense because then if you decide the main text color you can change the value at only one place.
An Example
Words are all well and good, but nothing beats an example! Let’s make use of currentColor at a few different places in a simple example. You’ll see how currentColor can also be really useful as the value for the fill properties of SVGs.
Here’s what our final example looks like (hover over it if you can):
As you can see, there’s nothing fancy going on with the markup, just an outer div and a simple SVG graphic in it.
The magic ✨ happens in the CSS styles:
What’s more, the value for color can just a well be a CSS variable and currentColor will still end up with our expected value:
The markup is basically the same, except for an additional class on the outer circle:
