Using CSS3’s CurrentColor Value

CSS’s CurrentColor value is a way to assign a pre-defined color to all of the CSS properties that take color values. All you need to do is define the color of a certain selector like you normally would:

  1. div{
  2. color: #333;
  3. }

After that, you can use the value (which in this context sort of acts as a variable) CurrentColor to define the color value of any property that want to be that dark grey color, rather than writing #333. So for example:

  1. div{
  2. color: #333;
  3. border: 1px solid CurrentColor;
  4. background: 1px solid CurrentColor;
  5. }

In the above instance, the border color and the background color of the div would both be #333. Using this property might not actually save you any time, but it is a pretty cool trick, and it’s definitely fun to play around with pseudo-variables in our pure CSS.

Share and Enjoy !

0 0