From dcfb172704f3afb68a30425029ec834be2883274 Mon Sep 17 00:00:00 2001 From: bt Date: Sat, 8 Jun 2024 13:22:19 -0400 Subject: More content porting, on-going markdown changes for lowdown support --- build/current-color/index.html | 32 ++++++++++++++++++++++---------- 1 file changed, 22 insertions(+), 10 deletions(-) (limited to 'build/current-color/index.html') diff --git a/build/current-color/index.html b/build/current-color/index.html index a28a733..12972d0 100644 --- a/build/current-color/index.html +++ b/build/current-color/index.html @@ -1,31 +1,41 @@ - + CSS Value: `currentColor` - - + + +
-

CSS Value: currentColor

+

CSS Value: currentColor

+

2019-04-13

+

There are a large number of nuanced and mostly unheard of CSS value types, but today we are going to focus on currentColor. So what is the currentColor value type anyway?

-

The currentColor value type will apply the existing color value to other properties like background-color, etc.

+ +
+

The currentColor value type will apply the existing color value to other properties like background-color, etc.

-

See it in action

-

Let's assume with have a single div with the following properties:

+ +

See it in action

+ +

Let’s assume with have a single div with the following properties:

+ 
div {
     color: dodgerblue;
 }
-

If we wanted to use that same color for other properties on elements inside that initial div, it's simple - we just need to call currentColor like so:

+ +

If we wanted to use that same color for other properties on elements inside that initial div, it’s simple - we just need to call currentColor like so:

+ 
div {
     color: dodgerblue;
 }
@@ -38,8 +48,10 @@ div a {
     border-bottom: 1px solid currentColor;
 }
+

Sidenote: If you re-declare the default color property further along in your CSS, the currentColor value will update according to the last color set.

-

And that's it. Best of all, this value type is supported across all major browsers!

+ +

And that’s it. Best of all, this value type is supported across all major browsers!