{"id":334015,"date":"2021-02-17T08:05:26","date_gmt":"2021-02-17T16:05:26","guid":{"rendered":"https:\/\/css-tricks.com\/?p=334015"},"modified":"2021-02-17T08:05:29","modified_gmt":"2021-02-17T16:05:29","slug":"css-switch-case-conditions","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/css-switch-case-conditions\/","title":{"rendered":"CSS Switch-Case Conditions"},"content":{"rendered":"\n<p>CSS is yet to have a <code>switch<\/code> rule or conditional <code>if<\/code>, aside from the specific nature of <code>@media<\/code> queries and some <a href=\"https:\/\/css-tricks.com\/the-raven-technique-one-step-closer-to-container-queries\/\">deep trickery<\/a> with CSS custom properties. Let\u2019s have a look at why it would be useful if we did, and look at a trick that is usable today for pulling it off.<\/p>\n\n\n\n<!--more-->\n\n\n<h3 class=\"wp-block-heading\" id=\"h-recent-chatter-about-the-possibility\">Recent chatter about the possibility<\/h3>\n\n\n<p>While none of these things are usable today, there has been a good amount of chat about the concept of generic conditional CSS just in the last year:<\/p>\n\n\n\n<ul><li>Brian Kardell <a href=\"https:\/\/bkardell.com\/blog\/AllThemSwitches.html\" rel=\"noopener\">proposed a <code>switch()<\/code> statement<\/a> and Tab Atkins <a href=\"https:\/\/gist.github.com\/tabatkins\/7d0d55fe08812d28cc46bed40b9deacb\" rel=\"noopener\">riff on it<\/a>.<\/li><li>Jonathan Neal <a href=\"https:\/\/github.com\/w3c\/csswg-drafts\/issues\/5009\" rel=\"noopener\">proposed a media query variation<\/a> for conditional values that sparked quite a lot of conversation.<\/li><li>Lea Verou <a href=\"https:\/\/github.com\/w3c\/csswg-drafts\/issues\/5624\" rel=\"noopener\">proposed \u201chigher level custom properties\u201d<\/a> (here\u2019s <a href=\"https:\/\/www.bram.us\/2020\/12\/30\/the-future-of-css-higher-level-custom-properties-to-control-multiple-declarations\/\" rel=\"noopener\">a look at them<\/a> from Bramus Van Damme) which seem extraordinarily useful.<\/li><\/ul>\n\n\n\n<p>So, yes. The demand for conditional CSS is there.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-imagine-why-conditional-css-would-be-useful\">Imagine why conditional CSS would be useful<\/h3>\n\n\n<p>Perhaps a visual change after a certain amount of scrolling. A visual change after a numeric input is within a certain range. A component with a handful of states.<\/p>\n\n\n\n<p>There is a whole genre of extremely popular JavaScript libraries for UI (e.g. React, Vue, etc.) that are essentially for building UI based on state. Clearly this is a developer need. If we could move that state-based styling to CSS, that\u2019s all the less JavaScript we might need \u2014 and maybe a better separation of concerns.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-a-common-theme\">A common theme<\/h3>\n\n\n<p>We already have custom properties in CSS, and we could base state-change logic on them, changing a block of styles as a side effect of the custom property changing to certain values.<\/p>\n\n\n\n<p>It\u2019s true that we have mechanisms for changing blocks of styles already. We can change <code>class<\/code> through JavaScript, and that <code>class<\/code> can apply whatever we like in CSS. But that doesn\u2019t mean state-based styling in CSS wouldn\u2019t be useful. We don\u2019t always have the ability or may not want to write any JavaScript for this, and instead change custom properties in other ways (e.g. media queries, HTML changes, etc). Doing it in CSS means helping separate business logic and visual style logic.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-a-trick-using-keyframes-for-state\">A trick! Using <code>@keyframes<\/code> for state<\/h3>\n\n\n<p>CSS <code>@keyframes<\/code> can be used to <code>switch<\/code> specific changes. Through the power of the <code>animation<\/code> property, a possibility opens up to select exactly which frame to show, and have it pause <em>exactly<\/em> on that frame, effectively mimicking a switch-case statement or state-based styles.<\/p>\n\n\n\n<p>Let\u2019s see see this in action by playing with the <code>animation-delay<\/code> property:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_JjRwRjK\" src=\"\/\/codepen.io\/anon\/embed\/JjRwRjK?height=450&amp;theme-id=1&amp;slug-hash=JjRwRjK&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed JjRwRjK\" title=\"CodePen Embed JjRwRjK\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Here\u2019s what\u2019s happening in that Pen:<\/p>\n\n\n\n<ul><li><strong><code>animation-delay<\/code>:<\/strong> Negative delay values <a href=\"https:\/\/drafts.csswg.org\/css-animations-1\/#valdef-animation-delay-time\" rel=\"noopener\">force a specific frame (or between) to take effect<\/a> (positive values don\u2019t work that way). We\u2019ll use this trick to force states.<\/li><li><strong><code>animation-play-state: paused<\/code>:<\/strong> We\u2019re not actually animating anything, so the animation will stay paused.<\/li><li><strong><code>animation-duration<\/code>:<\/strong> The actual duration doesn\u2019t matter, it just needs one so there is a time span to hold the different keyframes. We\u2019ll make it a value like <code>100.001s<\/code> so that if we delay by <code>100s<\/code>, the last keyframe will still work. The duration needs to be longer than the delay value.<\/li><\/ul>\n\n\n\n<p>The first range input modifies the <code>animation-delay<\/code> between a range of <code>-100s<\/code> and <code>0s<\/code>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-a-real-world-use-case\">A real-world use-case<\/h3>\n\n\n<p>Before we jump straight into the working example, it\u2019s worth discussing this trick in more detail because there\u2019s some nuances you ought to be aware of.<\/p>\n\n\n\n<p>First off, the trick only works with numeric values. So, color values or strings because it\u2019s strictly performing math.<\/p>\n\n\n\n<p>Second, there\u2019s the boolean trick. Consider a variable <code>--value: 10<\/code> which can take any numeric value between 0 and 100. We want to apply color if the value is above 5. How do we know if the value is over or below 5? And even if we do know, how does that help actually help us?<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">--is-above-5: clamp(0, var(--value) - 5, 1)<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th><code>--value<\/code><\/th><th><code>--is-above-5<\/code><\/th><th>Result<\/th><\/tr><\/thead><tbody><tr><td>0<\/td><td>0<\/td><td>0 &#8211; 5 = -5, <code>clamp()<\/code>\u00a0forces a value no less than 0<\/td><\/tr><tr><td>2<\/td><td>0<\/td><td>2 &#8211; 5 =&nbsp;-3,&nbsp;<code>clamp()<\/code>&nbsp;forces a value no less than 0<\/td><\/tr><tr><td>5<\/td><td>0<\/td><td>5 &#8211; 5 = 0<\/td><\/tr><tr><td>7<\/td><td>1<\/td><td>7 &#8211; 5 = 2,&nbsp;<code>clamp()<\/code>&nbsp;forces a value no larger than 1<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><code><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/clamp()\" rel=\"noopener\">clamp()<\/a><\/code> is like a smarter <code><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/calc()\" rel=\"noopener\">calc()<\/a><\/code>, in that it allows us to strictly confine a computed value to range while declaring an ideal value. That range is all that is needed to achieve a boolean variable.<\/p>\n\n\n\n<p>Write any math in the second parameter of the <code>clamp()<\/code> and that will either output 0 (or below) or 1 (or above). Make sure not to write any math that might result in a number between 0 and 1.<\/p>\n\n\n\n<p>Here\u2019s how that works out:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_jOMXMxN\" src=\"\/\/codepen.io\/anon\/embed\/jOMXMxN?height=450&amp;theme-id=1&amp;slug-hash=jOMXMxN&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed jOMXMxN\" title=\"CodePen Embed jOMXMxN\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>The range input\u2019s only job is to \u201cbroadcast\u201d its value by defining a values for <code>--value<\/code>, <code>--min<\/code> and <code>--max<\/code>, then modifying the <code>--value<\/code> using an <code>oninput<\/code> event. That is the most minimal thing that can be done get state-like behavior in CSS. No JavaScript needed.<\/p>\n\n\n\n<p>Using CSS math functions, it is possible to infer the \u201ccompleted\u201d percentage of the progress bar from those same variables:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">--completed: calc((var(--value) - var(--min) ) \/ (var(--max) - var(--min)) * 100);<\/code><\/pre>\n\n\n\n<p>Now, we know if the value is over a certain percentage, giving us yet another way to make changes by state:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">--over-30: clamp(0, var(--completed) - 30, 1);\n--over-70: clamp(0, var(--completed) - 70, 1);\n\/* ...and so on... *\/<\/code><\/pre>\n\n\n\n<p>OK, great, but how can we use this to select a specific keyframe? By using <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/max()\" rel=\"noopener\"><code>max()<\/code><\/a> function:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">--frame: max( \n    calc(1 - var(--over-30)), \n    var(--over-30) * 2, \n    var(--over-70) * 3, \n    var(--is-100)  * 4 \n);<\/code><\/pre>\n\n\n\n<p>The thing with CSS booleans is that there are many ways to use them to achieve a certain goal, and  one must get creative, finding a formula which is short and readable. <\/p>\n\n\n\n<p>In the above formula, the booleans will &#8220;toggle&#8221; a frame number if the boolean has the value of  <code>1<\/code>.  Since we are using a <code>max<\/code> function, the the largest toggled frame number will be the computed value of <code>--frame<\/code>.<\/p>\n\n\n\n<p class=\"explanation\">Note that the color change has a slight transition. We could have done this with the <code>background: currentColor;<\/code> on the fill area, which inherits the color from the parent, but I chose to use <a href=\"https:\/\/css-tricks.com\/using-property-for-css-custom-properties\/\">CSS Houdini<\/a> to illustrate the power of assigning transitions to CSS variables by declaring its <code>type<\/code>. <\/p>\n\n\n\n<p>An example of a heavily-used <strong>CSS boolean trick<\/strong> can be viewed in the below Pen, which is a CSS-only component with lots of variables that allow a wide range of customization:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_mdEJMLv\" src=\"\/\/codepen.io\/anon\/embed\/mdEJMLv?height=550&amp;theme-id=1&amp;slug-hash=mdEJMLv&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed mdEJMLv\" title=\"CodePen Embed mdEJMLv\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>I am sure there are many other use cases for this little trick and am excited to see what else might be achieved by the creativity of the community.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS is yet to have a switch rule or conditional if, aside from the specific nature of @media queries and some deep trickery with CSS custom properties. Let\u2019s have a look at why it would be useful if we did, and look at a trick that is usable today for pulling it off.<\/p>\n","protected":false},"author":280948,"featured_media":334876,"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":"We may not have conditional CSS, but here's a trick from Yair Even Or using @keyframes for state.","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[1036,795],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/css-keyframe-switch-case.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":326382,"url":"https:\/\/css-tricks.com\/minimal-takes-on-faking-container-queries\/","url_meta":{"origin":334015,"position":0},"title":"Minimal Takes on Faking Container Queries","date":"December 2, 2020","format":false,"excerpt":"It's sounding more and more likely that we're actually going to get real container queries. Google is prototyping a syntax idea from David Baron and refined by Miriam Suzanne. Apparently, there has already been some prototyping done for a switch() syntax which is like container queries on values. Even now,\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/container-queries.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":302330,"url":"https:\/\/css-tricks.com\/custom-styling-form-inputs-with-modern-css-features\/","url_meta":{"origin":334015,"position":1},"title":"Custom Styling Form Inputs With Modern CSS Features","date":"February 7, 2020","format":false,"excerpt":"It\u2019s entirely possible to build custom checkboxes, radio buttons, and toggle switches these days, while staying semantic and accessible. We don\u2019t even need a single line of JavaScript or extra HTML elements! It\u2019s actually gotten easier lately than it has been in the past. Let\u2019s take a look. Here\u2019s where\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/custom-form-inputs.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":330632,"url":"https:\/\/css-tricks.com\/custom-properties-as-state\/","url_meta":{"origin":334015,"position":2},"title":"Custom Properties as State","date":"January 5, 2021","format":false,"excerpt":"Here's a fun idea from James Stanley: a CSS file (that presumably updates daily) containing CSS custom properties for \"seasonal\" colors (e.g. spring is greens, fall is oranges). You'd then use the values to theme your site, knowing that those colors change slightly from day to day. This is what\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/birds-clouds.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":324247,"url":"https:\/\/css-tricks.com\/the-css-custom-property-toggle-trick\/","url_meta":{"origin":334015,"position":3},"title":"The CSS Custom Property Toggle Trick","date":"October 29, 2020","format":false,"excerpt":"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: The entire world of branching conditional logic and bulk feature toggling for custom CSS\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/custom-properties-code.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":339441,"url":"https:\/\/css-tricks.com\/you-can-label-a-javascript-if-statement\/","url_meta":{"origin":334015,"position":4},"title":"You Can Label a JavaScript `if` Statement","date":"April 30, 2021","format":false,"excerpt":"Labels are a feature that have existed since the creation of JavaScript. They aren\u2019t new! I don\u2019t think all that many people know about them and I\u2019d even argue they are a bit confusing. But, as we\u2019ll see, labels can be useful in very specific instances. But first: A JavaScript\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/js-label-code.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":374775,"url":"https:\/\/css-tricks.com\/what-css-do-you-absolutely-have-to-know-in-2022\/","url_meta":{"origin":334015,"position":5},"title":"What CSS Do You Absolutely Have to Know in 2022?","date":"November 8, 2022","format":false,"excerpt":"Sacha Greif openly wondered whether CSS has gotten to be, you know, too big. With all the goodies that've shipped in browsers the past couple of years \u2014 container queries! relative color syntax! cascade layers! logical properties! ranges in media queries! individual transforms! :has() selector! \u2014 and all of what's\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/08\/css-tricks-logo-blur.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/css-keyframe-switch-case.jpg?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/334015"}],"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\/280948"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=334015"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/334015\/revisions"}],"predecessor-version":[{"id":334877,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/334015\/revisions\/334877"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/334876"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=334015"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=334015"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=334015"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}