{"id":324247,"date":"2020-10-29T07:51:07","date_gmt":"2020-10-29T14:51:07","guid":{"rendered":"https:\/\/css-tricks.com\/?p=324247"},"modified":"2022-11-22T15:59:07","modified_gmt":"2022-11-22T23:59:07","slug":"the-css-custom-property-toggle-trick","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/the-css-custom-property-toggle-trick\/","title":{"rendered":"The CSS Custom Property Toggle Trick"},"content":{"rendered":"\n<p>Back in July 2020, I got an email from James0x57 (I always try to refer to people by their name, but I think I get the sense they prefer to go by screen name) that says:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-style-large is-layout-flow wp-block-quote-is-layout-flow\"><p>The entire world of branching conditional logic and bulk feature toggling for custom CSS properties is possible and only exists because of a tiny footnote in the CSS spec that has gone unnoticed.<\/p><\/blockquote>\n\n\n\n<p><a href=https://css-tricks.com/"https:////www.w3.org//TR//css-variables-1//#syntax\" rel=\"noopener\">That line<\/a> is:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-style-large is-layout-flow wp-block-quote-is-layout-flow\"><p>Note: While&nbsp;&lt;declaration-value&gt;&nbsp;must represent at least one token, that one token may be whitespace.<\/p><\/blockquote>\n\n\n\n<!--more-->\n\n\n\n<p>In other words, <code>--foo: ;<\/code> is valid. <\/p>\n\n\n\n<p>If you&#8217;re like me, this doesn&#8217;t read as some massive revelation that unlocks huge doors, but to smarter people, like James0x57, it does! We started working on a draft blog post, but for various reasons it didn&#8217;t make it all the way here. One of those reasons is that <em>I just wasn&#8217;t getting it.<\/em> Call me dense, sorry James0x57. One demo they sent me when I asked for a super dumbed-down example was helpful though, and I think it&#8217;s kind of clicked for me. Here&#8217;s my interpretation:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_abZBXde\" src=https://css-tricks.com/"////codepen.io//anon//embed//abZBXde?height=450&amp;theme-id=1&amp;slug-hash=abZBXde&amp;default-tab=css,result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed abZBXde\" title=\"CodePen Embed abZBXde\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Let me attempt to explain:<\/p>\n\n\n\n<ul><li>The breakpoint we&#8217;ve set up here is a 900px <code>max-width<\/code> media query. You can see that&#8217;s where the variable <code>--mq-sm<\/code> flops from <code>initial<\/code> to an empty space value.<\/li><li>When the browser window is wider than 900px, that the value of <code>--mq-sm<\/code> is <code>initial<\/code>.<ul><li>That makes the variable <code>--padding-when-small<\/code> contain two values \u2014 <code>initial<\/code> and <code>2rem<\/code> \u2014which, I guess is <strong>invalid<\/strong>.<\/li><li>So when we actually set the padding and call that variable like <code>padding: var(--padding-when-small, var(--padding-when-large))<\/code>, the <strong>second<\/strong> value (the &#8220;fallback&#8221;) is used because the first value is invalid.<\/li><\/ul><\/li><li>When the browser window is narrower than 900px, the <code>--mq-sm<\/code> value is a space.<ul><li>That makes the variable <code>--padding-when-small<\/code> value <code>\"(space)2rem\"<\/code> which, I guess is <strong>valid<\/strong>.<\/li><li>That means when we actually set the padding and call that variable like <code>padding: var(--padding-when-small, var(--padding-when-large))<\/code>, the <strong>first<\/strong> value is used.<\/li><\/ul><\/li><\/ul>\n\n\n\n<p>So, now we can flip the padding between two values by changing a placeholder variable. <\/p>\n\n\n\n<p>That clicks for me.<\/p>\n\n\n\n<p>When I  see this as simply changing a single value, it&#8217;s almost like <em>uh, ok, you&#8217;ve found a really complex way to change some padding, but you could have just changed the padding in the media query.<\/em> But the trick is that <strong>now we have this placeholder variable that has changed and we can key into that to change unlimited other values<\/strong>.<\/p>\n\n\n\n<p>We could have <strong>a single media query<\/strong> (or set of media queries) in our CSS that only toggles these placeholder variables and we use elsewhere to toggle values. That could be nice and clean compared to sprinkling media queries all over the CSS. It&#8217;s a proper toggle in CSS, like a form of IF\/THEN logic that we haven&#8217;t quite had before.<\/p>\n\n\n\n<p>James0x57 extended that thinking to all the logical possibilities, like AND, OR, XOR, NAND, NOR, and XNOR, but that lost me again. Not really a computer scientist over here. <a href=https://css-tricks.com/"https:////github.com//propjockey//aug-attr-spliced.js/" rel=\"noopener\">But you can follow their work<\/a> if you want to see real world usage of this stuff.<\/p>\n\n\n\n<p>This variable stuff is wild and gets very confusing. I noted in a possibly recent (but the byline says 2015?) <a href=https://css-tricks.com/"https:////patrickbrosset.com//articles//2020-09-21-3-things-about-css-variables-you-might-not-know///" rel=\"noopener\">article<\/a> from Patrick Brosset that covers some tricky CSS custom properties stuff. For example, fallbacks can be infinitely nested, like:<\/p>\n\n\n\n<pre rel=\"SCSS\" class=\"wp-block-csstricks-code-block language-scss\" data-line=\"\"><code markup=\"tt\">color: var(--foo, var(--bar, var(--baz, var(--are, var(--you, var(--crazy)))));<\/code><\/pre>\n\n\n\n<p>Also, valid values for CSS custom properties can have commas in them like this:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">content: var(--foo, one, two, three);<\/code><\/pre>\n\n\n\n<p>Is that really just one fallback with a single <code>one, two, three<\/code>  value? This is rather mind-bending.<\/p>\n\n\n\n<p>Anyway, fast-forward a bunch of months now, and CSS trickery master Lea Verou has <a href=https://css-tricks.com/"https:////lea.verou.me//2020//10//the-var-space-hack-to-toggle-multiple-values-with-one-custom-property//?\%22 rel=\"noopener\">set her sights<\/a> on this whitespace-in-custom-properties stuff:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-style-large is-layout-flow wp-block-quote-is-layout-flow\"><p>What if I told you you could use a single property value to turn multiple different values on and off across multiple different properties and even across multiple CSS rules?<\/p><\/blockquote>\n\n\n\n<p>It&#8217;s the same trick! In Lea&#8217;s example, though, she uses this ability to:<\/p>\n\n\n\n<ul><li>set variations on a button, and<\/li><li>set four different properties rather than one.<\/li><\/ul>\n\n\n\n<p>This really hones in on why this is the concept is so cool.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_YzWpBaV\" src=https://css-tricks.com/"////codepen.io//anon//embed//YzWpBaV?height=450&amp;theme-id=1&amp;slug-hash=YzWpBaV&amp;default-tab=css,result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed YzWpBaV\" title=\"CodePen Embed YzWpBaV\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Lea points to some downsides:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-style-large is-layout-flow wp-block-quote-is-layout-flow\"><p>There is no way to say \u201cthe background should be red if&nbsp;<code>--foo<\/code>&nbsp;is set and white otherwise\u201d. Some such conditionals can be emulated with clever use of appending, but not most.<\/p><p>And of course there\u2019s a certain readability issue:&nbsp;<code>--foo:&nbsp;;<\/code>&nbsp;looks like a mistake and&nbsp;<code>--foo:&nbsp;initial<\/code>&nbsp;looks pretty weird, unless you\u2019re aware of this technique.<\/p><\/blockquote>\n\n\n\n<p>We&#8217;re certainly entering the next era of how custom properties are used. First, we used them like preprocessor variables. Then we started seeing more cascade and fallback usage. Next, we used it alongside JavaScript more frequently. Now this.<\/p>\n\n\n\n<p>There is even more writing about keeping CSS preprocessor variables around, not so much for the times when you only need what they can do, but for the things that only they can do, like having their color values manipulated. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Back in July 2020, I got an email from James0x57 (I always try to refer to people by their name, [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":296434,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_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,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}},"_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"categories":[4],"tags":[1036],"jetpack_publicize_connections":[],"acf":[],"share_on_mastodon":{"url":"","error":""},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/custom-properties-code.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/324247"}],"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=324247"}],"version-history":[{"count":11,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/324247\/revisions"}],"predecessor-version":[{"id":375616,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/324247\/revisions\/375616"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/296434"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=324247"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=324247"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=324247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}