Discussion on: Use `currentColor` to Keep CSS DRY and Component Colors Flexible

[Zen]

currentColor native CSS?

[Taufik Nurrohman]

AFAIK, currentColor was come from fill attribute value in SVG to tell that the SVG color must inherit to the surrounding text color. Normally, we use style="color: inherit;" for generic HTML elements. And for borders, without specifying border color, its color should inherit to the text color automatically. Example:

html {
  border: 0 solid green;
}

body {
  color: red;
  border: 5px solid; /* a red border */
  border-color: inherit; /* a green border */
}

stackoverflow.com/a/13002311/1163000

Update: It becomes standard in CSS3 due to the SVG spec → w3.org/TR/css-color-3/#currentcolor 👍

[Zen]

Iya sih. Aku baru denger juga. Yang aku tau ya inherit. Tapi kayaknya pemakaiannya berbeda. Mungkin ya.

[Stephanie Eckles]

It is standard and has terrific browser support, clear back to IE9!

caniuse.com/#feat=currentcolor

The power is in using it for additional CSS properties beyond border color or SVG fill 👍🏻 It can even be used in gradients.

[Taufik Nurrohman]

But personally, I would prefer current-color or currentcolor just so that it would match to the CSS naming convention 😃

I hope this value becomes case insensitive in the future. Same hope for viewBox attribute in SVG. I would like to see it as view-box or viewbox.