currentColor as a first variable available in the pure CSS. Almost :)

Finally, I have found time to read book CSS Secrets (Lea Verou). I have heard different feedbacks about this book but decide to obtain my own impression. I am currently in the middle of the reading, but as I read I have found pieces of some interesting information, that I never heard from anywhere before.

One piece of such information is about currentColor. Accordingly to the W3C information currentColor keyword hold the value of the color property. This keyword can be used to assign the color, that the font in the element currently has, for any other property, that expects to obtain the color value (for example, background, border-color etc.).

For better understanding I have created an example, where the element has the box-shadow with the same color as the font inside it is.

If to check CanIUse, we would see that this keyword is widely supported in all modern browsers. As we see exception is only IE8: 

(Check the CanIUse sites leave using this link http://caniuse.com/#feat=currentcolor).

Why this information sounds interesting for me? Mainly for two reasons:

1. If use this keyword with wise it allows us to write more maintainable CSS code
2. This idea comes from the note that was made in the “CSS Secrets”. Speaking generally currentColor keyword is the first variable that is widely available in the current version of the CSS. So, future that contains variable in the pure CSS come! Lea also remarked that someone can stay that the em was the first variable that was available in the pure CSS (I will not provide here pros and cons – read a book 🙂 ).

Some interesting facts about the currentColor keyword:

• the default value of the border-color property is currentColor
• if to set currentColor keyword to the color property, it would be the same as to set color: inherit

Book is available on the Amazon: http://www.amazon.com/CSS-Secrets-Solutions-Everyday-Problems/dp/1449372635