Ele não é um atributo, o currentColor
é uma palavra chave que é usada nos atributos CSS, desde o CSS1 e CSS2 é possível usar em bordas (em border-color
), o que ele faz é que a propriedade setada receba a mesma cor de fonte definida no elemento ou em um elemento pai.
Um exemplo:
.foo { color: blue; }
.bar { color: red; }
.baz { color: orange; }
.box {
border: 5px dotted currentColor;
margin-bottom: 15px;
}
<div class="foo">
<div class="box">olá mundo!</div>
</div>
<div class="bar">
<div class="box">olá mundo!</div>
</div>
<div class="baz">
<div class="box">olá mundo!</div>
</div>
Veja que as bordas assumem a mesma cor usada nas fontes.
Note que me border
você pode omitir a cor, que o CSS irá assumir que esta usando currentColor
, exemplo:
.foo { color: blue; }
.bar { color: red; }
.baz { color: orange; }
.box {
border: 5px dotted;
margin-bottom: 15px;
}
<div class="foo">
<div class="box">olá mundo!</div>
</div>
<div class="bar">
<div class="box">olá mundo!</div>
</div>
<div class="baz">
<div class="box">olá mundo!</div>
</div>
Fonte: https://www.w3.org/TR/2018/REC-css-color-3-20180619/#currentcolor
Claro que hoje outras propriedades suportam o currentColor
, por exemplo, você pode usar para aplicar a mesma cor de fonte e um box-shadow
ou text-shadow
, exemplos:
box-shadow
.foo { color: blue; }
.bar { color: red; }
.baz { color: orange; }
.box {
box-shadow: 3px 3px 3px currentColor;
margin-bottom: 15px;
}
<div class="foo"> <div class="box">olá mundo!</div> </div>
<div class="bar"> <div class="box">olá mundo!</div> </div>
<div class="baz"> <div class="box">olá mundo!</div> </div>
text-shadow
.foo { color: blue; }
.bar { color: red; }
.baz { color: orange; }
.foo span, .bar span, .baz span {
text-shadow: 1px 3px 2px currentColor;
}
<div class="foo"> olá <span>mundo!</span> </div>
<div class="bar"> olá <span>mundo!</span> </div>
<div class="baz"> olá <span>mundo!</span> </div>
Um exemplo interessante que adotei em meu "framework" é para criar/simular setinhas (arrows) para menus dropdowns para navbars ou combobox simulados como border:
, ficou assim (só vou trazer a parte que é relevante para aprendizado mesmo):
[class^="v-arrow-"], [class*=" v-arrow-"] {
display: inline-block;
width: 0;
height: 0;
border: .3em solid transparent;
}
.v-arrow-left {
border-right: .3em solid currentColor; /*pode omitir o currentColor que terá o mesmo efeito*/
border-left: 0;
}
.v-arrow-right {
border-left: .3em solid currentColor; /*pode omitir o currentColor que terá o mesmo efeito*/
border-right: 0;
}
.v-arrow-up, .v-arrow-down {
vertical-align: .15em;
border-top: .3em solid currentColor; /*pode omitir o currentColor que terá o mesmo efeito*/
border-bottom: 0;
}
.v-arrow-up {
border-bottom: .3em solid currentColor; /*pode omitir o currentColor que terá o mesmo efeito*/
border-top: 0;
}
/*-- cores nos elementos "pais" --*/
.foo1 { color: red; }
.foo2 { color: pink; }
.foo3 { color: orange; }
Seta/arrow para cima: <i class="v-arrow-up"></i><br>
Seta/arrow para baixo: <i class="v-arrow-down"></i><br>
Seta/arrow para esquerda: <i class="v-arrow-left"></i><br>
Seta/arrow para direita: <i class="v-arrow-right"></i>
<div class="foo1">
Seta/arrow para cima: <i class="v-arrow-up"></i><br>
Seta/arrow para baixo: <i class="v-arrow-down"></i><br>
Seta/arrow para esquerda: <i class="v-arrow-left"></i><br>
Seta/arrow para direita: <i class="v-arrow-right"></i>
</div>
<div class="foo2">
Seta/arrow para cima: <i class="v-arrow-up"></i><br>
Seta/arrow para baixo: <i class="v-arrow-down"></i><br>
Seta/arrow para esquerda: <i class="v-arrow-left"></i><br>
Seta/arrow para direita: <i class="v-arrow-right"></i>
</div>
<div class="foo3">
Seta/arrow para cima: <i class="v-arrow-up"></i><br>
Seta/arrow para baixo: <i class="v-arrow-down"></i><br>
Seta/arrow para esquerda: <i class="v-arrow-left"></i><br>
Seta/arrow para direita: <i class="v-arrow-right"></i>
</div>