diff options
author | Bradley Taunt <brad@bt.ht> | 2023-11-27 12:25:51 -0500 |
---|---|---|
committer | Bradley Taunt <brad@bt.ht> | 2023-11-27 12:25:51 -0500 |
commit | 14d227d46a2177a8928333894252d6299f531097 (patch) | |
tree | d41d48383d012f53823c9816a820e4e88c572c41 /posts/current-color.md | |
parent | f6eed1a8c2f4fbf91fac9edd11e50f5c0ec939a2 (diff) |
Trying to render posts all at once
Diffstat (limited to 'posts/current-color.md')
-rw-r--r-- | posts/current-color.md | 38 |
1 files changed, 38 insertions, 0 deletions
diff --git a/posts/current-color.md b/posts/current-color.md new file mode 100644 index 0000000..bb9fe99 --- /dev/null +++ b/posts/current-color.md @@ -0,0 +1,38 @@ +# 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. + +## 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: + + + div { + color: dodgerblue; + } + + div header { + background-color: currentColor; + } + + 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! + |