aboutsummaryrefslogtreecommitdiff
path: root/_posts/2019-04-13-current-color.md
diff options
context:
space:
mode:
Diffstat (limited to '_posts/2019-04-13-current-color.md')
-rw-r--r--_posts/2019-04-13-current-color.md41
1 files changed, 41 insertions, 0 deletions
diff --git a/_posts/2019-04-13-current-color.md b/_posts/2019-04-13-current-color.md
new file mode 100644
index 0000000..cff4e48
--- /dev/null
+++ b/_posts/2019-04-13-current-color.md
@@ -0,0 +1,41 @@
+---
+layout: post
+title: "CSS Value: currentColor"
+date: 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!
+