CSS 3 – O valor currentColor

O currentColor copia a cor da propriedade color e a aplica em outras propriedades de cor, como background, border e etc.

por Diego Eis 02/05/2011

O valor currentColor é muito simples de se entender e pode ser muito útil para diminuirmos o retrabalho em alguns momentos da produção. Imagine que o currentColor é uma variável cujo seu valor é definido pelo valor da propriedade color do seletor. Veja o código abaixo:

p {
        background:red;
        padding:10px;
        font:13px verdana;
        color: green;
        border:1px solid green;
    }

Note que o valor da propriedade color é igual ao valor da cor da propriedade border.

Há uma redundância de código, que nesse caso é irrelevante, mas quando falamos de dezenas de arquivos de CSS modulados, com centenas de linhas cada, essa redundância pode incomodar a produtividade. A função do currentColor é simples: ele copia para outras propriedades do mesmo seletor o valor da propriedade color. Veja o código abaixo para entender melhor:

p {
        background:red;
        padding:10px;
        font:13px verdana;
        color: green;
        border:1px solid currentColor;
    }

Veja que apliquei o valor currentColor onde deveria estar o valor de cor da propriedade border. Agora, toda vez que o valor da propriedade color for modificado, o currentColor aplicará o mesmo valor para a propriedade onde ela está sendo aplicada.

Isso funciona em qualquer propriedade que faça utilização de cor como background, border, etc. Obviamente não funciona para a propriedade color. O currentColor também não funciona em seletores separados, ou seja, você não consegue atrelar o valor da propriedade color ao currentColor de outro seletor.