{"id":8711,"date":"2011-03-17T05:38:43","date_gmt":"2011-03-17T12:38:43","guid":{"rendered":"http:\/\/css-tricks.com\/?p=8711"},"modified":"2022-06-09T10:15:16","modified_gmt":"2022-06-09T17:15:16","slug":"currentcolor","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/currentcolor\/","title":{"rendered":"currentcolor"},"content":{"rendered":"\n<p>CSS variables are always a hot topic when &#8220;the future of CSS&#8221; is discussed. They are actually <a href=\"https:\/\/css-tricks.com\/native-css-variables-closer-to-reality\/\">coming<\/a> natively, but using them in production (without a CSS <a href=\"https:\/\/css-tricks.com\/video-screencasts\/88-intro-to-compass-sass\/\">preprocessor<\/a> framework) is a long way off. However there is a feature that actually has some browser support now that has a CSS variable feel to it, and that&#8217;s the <code>currentColor<\/code> value. <\/p>\n\n\n\n<!--more-->\n\n\n\n<p>It works like this:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">div { \n  color: red; \n  border: 5px solid currentcolor;\n  box-shadow: 0 0 5px solid currentcolor;\n}<\/code><\/pre>\n\n\n\n<p>I learned about this from a panel at SXSW 2011 on CSS3 with <a href=\"http:\/\/w3conversions.com\/\" rel=\"noopener\">Stephanie<\/a> &amp; <a href=\"http:\/\/blog.assortedgarbage.com\/\" rel=\"noopener\">Greg<\/a> Rewis, <a href=\"http:\/\/www.standardista.com\/\" rel=\"noopener\">Estelle Weyl<\/a>, and <a href=\"http:\/\/christopherschmitt.com\/\" rel=\"noopener\">Christopher Schmitt<\/a>. Googling it turned up <a href=\"http:\/\/nimbupani.com\/current-color-in-css.html\" rel=\"noopener\">Divya Manian&#8217;s article<\/a> who says:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-style-default is-layout-flow wp-block-quote-is-layout-flow\"><p>[&#8230;] you can use this value to indicate you want to use the value of color for other properties that accept a color value: borders, box shadows, outlines, or backgrounds.<\/p><p>This value was first supported by Opera in 2009, since then, Firefox 3.5+, Chrome 1+, and Safari 4+.<\/p><\/blockquote>\n\n\n\n<p>Here&#8217;s <a href=\"http:\/\/www.w3.org\/TR\/css3-color\/#currentcolor\" rel=\"noopener\">the spec<\/a> and the <a href=\"http:\/\/caniuse.com\/#feat=currentcolor\" rel=\"noopener\">Can I Use information<\/a>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-it-will-follow-the-cascade\">It will follow the cascade<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">body { color: red; }\ndiv { border: 5px solid currentcolor; }<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-you-can-t-trick-it\">You can&#8217;t trick it.<\/h3>\n\n\n<p>Let&#8217;s say you wanted to exploit the variable quality to it, but then reset the color for the actual text&#8230; this won&#8217;t work:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">div {\n   color: red;\n      \n   border: 5px solid currentcolor;\n   box-shadow: 0 0 5px currentcolor; \n    \n   color: black;\n }<\/code><\/pre>\n\n\n\n<p>Everything will be black.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-use-cases\">Use cases<\/h3>\n\n\n<ul><li><a href=\"http:\/\/codepen.io\/scottkellum\/pen\/Fhxql\" rel=\"noopener\">Using it in animation<\/a><\/li><li>Button borders and SVG fills that <a href=\"http:\/\/osvaldas.info\/keeping-css-short-with-currentcolor\" rel=\"noopener\">match the text<\/a><\/li><li><a href=\"http:\/\/blogs.adobe.com\/dreamweaver\/2015\/02\/extending-the-color-cascade-with-the-css-currentcolor-variable.html#.VVNPqtNViko\" rel=\"noopener\">Interface design<\/a> that inherits color all around components.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1008\" height=\"560\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/cssconf-color3.gif?resize=1008%2C560&#038;ssl=1\" alt=\"\" class=\"wp-image-356253\" data-recalc-dims=\"1\"\/><figcaption><a href=\"https:\/\/simurai.com\/blog\/2014\/05\/04\/cssconf\" rel=\"noopener\">From simurai<\/a><\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>CSS variables are always a hot topic when &#8220;the future of CSS&#8221; is discussed. They are actually coming natively, but using them in production (without a CSS preprocessor framework) is a long way off. However there is a feature that actually has some browser support now that has a CSS variable feel to it, and [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":172432,"url":"https:\/\/css-tricks.com\/cascading-svg-fill-color\/","url_meta":{"origin":8711,"position":0},"title":"Cascading SVG Fill Color","date":"June 11, 2014","format":false,"excerpt":"One time someone told me their biggest problem with SVG icons is that they didn't match the color of text they were by. In fact it was such a big problem for them, that despite seeing the advantages of SVG icons they were sticking with icon fonts. I didn't think\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":294043,"url":"https:\/\/css-tricks.com\/contextual-utility-classes-for-color-with-custom-properties\/","url_meta":{"origin":8711,"position":1},"title":"Contextual Utility Classes for Color with Custom Properties","date":"August 14, 2019","format":false,"excerpt":"In CSS, we have the ability to access currentColor which is tremendously useful. Sadly, we do not have access to anything like currentBackgroundColor, and the color-mod() function is still a ways away. With that said, I am sure I am not alone when I say I'd like to style some\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/08\/currentColor.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":279882,"url":"https:\/\/css-tricks.com\/accessible-svg-icons-with-inline-sprites\/","url_meta":{"origin":8711,"position":2},"title":"Accessible SVG Icons With Inline Sprites","date":"December 7, 2018","format":false,"excerpt":"This is a great look at accessible SVG markup patterns by Marco Hengstenberg. Here's the ideal example: Menu Notes: It's not the itself that is interactive \u2014 it's wrapped in a for that. The .svg-icon class has some nice trickery, like em-based sizing to match the size of the text\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/menu-button.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":276775,"url":"https:\/\/css-tricks.com\/how-do-you-put-a-border-on-three-sides-of-an-element\/","url_meta":{"origin":8711,"position":3},"title":"How Do You Put a Border on Three Sides of an Element?","date":"October 3, 2018","format":false,"excerpt":"I saw a little conversation about this the other day and figured it would be fun to look at all the different ways to do it. None of them are particularly tricky, but perhaps you'll favor one over another for clarity of syntax, efficiency, or otherwise. Let's assume we want\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/three-borders.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":262483,"url":"https:\/\/css-tricks.com\/how-to-disable-links\/","url_meta":{"origin":8711,"position":4},"title":"How to Disable Links","date":"November 17, 2017","format":false,"excerpt":"The topic of disabling links popped up at my work the other day. Somehow, a \"disabled\" anchor style was added to our typography styles last year when I wasn't looking. There is a problem though: there is no real way to disable an link (with a valid href attribute) in\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":325860,"url":"https:\/\/css-tricks.com\/creating-ui-components-in-svg\/","url_meta":{"origin":8711,"position":5},"title":"Creating UI Components in SVG","date":"November 23, 2020","format":false,"excerpt":"I\u2019m thoroughly convinced that SVG unlocks a whole entire world of building interfaces on the web. It might seem daunting to learn SVG at first, but you have a spec that was designed to create shapes and yet, still has elements, like text, links, and aria labels available to you.\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/CleanShot-2020-11-15-at-12.36.14@2x.png?fit=1200%2C627&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/8711"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=8711"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/8711\/revisions"}],"predecessor-version":[{"id":366310,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/8711\/revisions\/366310"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=8711"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=8711"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=8711"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}