Кратко
СкопированоКлючевое слово current
можно использовать в качестве значения для CSS-свойства, принимающего цвет. Например, background
. Браузер подставит вместо current
текущее значение свойства color
.
Пример
СкопированоВозьмём небольшой кусочек текста, зададим ему нужный цвет текста и добавим тень. В месте, где нужно задавать цвет тени, используем ключевое слово current
:
.element { color: darkblue; box-shadow: 0 0 5px currentColor;}
.element { color: darkblue; box-shadow: 0 0 5px currentColor; }
Тень рисуется тем же цветом, что и текст элемента.
Как понять
СкопированоПринцип работы очень похож на кастомные свойства в CSS: берём переменную, присваиваем значение и используем в нужных нам местах. Отличие только в том, что мы не создаём отдельную переменную, а используем готовое ключевое слово.
Если кастомные свойства вам не знакомы, то есть другая хорошая аналогия — ключевое слово inherit
. Используем его в качестве значения нужного свойства и при изменении этого стиля у родителя стиль изменится сразу и в потомке. Недостаток такого подхода в том, что мы можем подставить это значение только в то свойство, которое нужно наследовать, а не в несколько.
Есть момент, о котором не нужно забывать. Если вы указали цвет текста и несколько свойств, где используется current
, и потом переопределили color
, то ко всем свойствам применится именно последний указанный цвет.
.element { color: red; border: 3px solid currentColor; box-shadow: 0 0 5px currentColor; color: black;}
.element { color: red; border: 3px solid currentColor; box-shadow: 0 0 5px currentColor; color: black; }
Всё будет черным цветом.
Тут работает всё тот же принцип каскада — правила, написанные ниже переопределяют написанное выше.
На практике
Скопированосоветует Скопировано
🛠 Есть очень хороший пример использования current
. Допустим, есть кнопка с текстом и поясняющей иконкой внутри.
<button> <span>Удалить</span> <svg>...</svg></button>
<button> <span>Удалить</span> <svg>...</svg> </button>
Мы можем применить current
для окрашивания иконки в такой же цвет, как и текст. В итоге, просто меняя свойство color
, мы стилизуем оба элемента внутри кнопки.
button { color: #0d47a1;}svg { fill: currentColor;}
button { color: #0d47a1; } svg { fill: currentColor; }
Попробуйте сами, очень легко!