{"id":379002,"date":"2024-07-09T08:18:11","date_gmt":"2024-07-09T15:18:11","guid":{"rendered":"https:\/\/css-tricks.com\/?p=379002"},"modified":"2024-07-09T08:18:17","modified_gmt":"2024-07-09T15:18:17","slug":"if-css-gets-inline-conditionals","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/if-css-gets-inline-conditionals\/","title":{"rendered":"&#8220;If&#8221; CSS Gets Inline Conditionals"},"content":{"rendered":"\n<p>A few sirens went off a couple of weeks ago when the CSS Working Group (CSSWG) <a href=10064.html#issuecomment-2165157958\" rel=\"noopener\">resolved to add an <code>if()<\/code> conditional<\/a> to the CSS Values Module Level 5 specification. It was Lea Verou&#8217;s X post that same day that caught my attention:<\/p>\n\n\n\n<blockquote class=\"twitter-tweet\"><p lang=\"en\" dir=\"ltr\">A historical day for CSS &#x1f600;&#x1f389;<br><br>If you write any components used and\/or styled by others, you know how huge this is!<br><br>background: if(style(&#8211;variant: success), var(&#8211;green));<br><br>Even if you don\u2019t, this will allow things like: <br>padding: if(var(&#8211;2xl), 1em, var(&#8211;xl) or var(&#8211;m),\u2026 <a href=index-2794.html>pic.twitter.com\/cXeqwBuXvK<\/a><\/p>&mdash; Lea Verou (@LeaVerou) <a href=18011922080259402005506.html rel=\"noopener\">June 13, 2024<\/a><\/blockquote> <script async src=index-2795.html charset=\"utf-8\"><\/script>\n\n\n\n<p>Lea is the one who opened <a href=\"https:\/\/github.com\/w3c\/csswg-drafts\/issues\/10064\" rel=\"noopener\">the GitHub issue<\/a> leading to the discussion and in a stroke of coincidence \u2014 or serendipity, perhaps \u2014 the resolution came in on her birthday. That had to be quite a whirlwind of a day! <em>What did you get for your birthday?<\/em> &#8220;Oh, you know, just an accepted proposal to the CSS spec.&#8221; Wild, just wild.<\/p>\n\n\n\n<p>The accepted proposal is a green light for the CSSWG to work on the idea with the intent of circulating a draft specification for further input and considerations en route to, hopefully, become a recommended CSS feature. So, it&#8217;s gonna be a hot minute before any of this is baked, that is, <em>if<\/em> it gets fully baked.<\/p>\n\n\n\n<p>But the idea of applying styles based on a conditional requirement is super exciting and worth an early look at the idea. I scribbled <a href=\"https:\/\/geoffgraham.me\/conditionals-on-custom-properties\/\" rel=\"noopener\">some notes about it<\/a> on my blog the same day Lea posted to X and thought I&#8217;d distill those here for posterity while rounding up more details that have come up since then.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"this-isnt-a-new-idea\">This isn&#8217;t a new idea<\/h3>\n\n\n<p>Many proposals are born from previously rejected proposals and <code>if()<\/code> is no different. And, indeed, we have gained several CSS features in recent days that allow for conditional styling \u2014 <code><a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/h\/has\/\">:has()<\/a><\/code> and <a href=\"https:\/\/css-tricks.com\/css-container-queries\/#aa-container-style-queries\">Container Style Queries <\/a>being two of the more obvious examples. Lea even cites a <a href=\"https:\/\/github.com\/w3c\/csswg-drafts\/issues\/3455\" rel=\"noopener\">2018 ticket<\/a> that looks and reads a lot like the accepted proposal.<\/p>\n\n\n\n<p>The difference?<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Style queries had already shipped, and we could simply reference the same syntax for conditions (plus&nbsp;<code>media()<\/code>&nbsp;and&nbsp;<code>supports()<\/code>&nbsp;from&nbsp;<a href=\"https:\/\/drafts.csswg.org\/css-conditional\/\" rel=\"noopener\">Tab\u2019s&nbsp;<code>@when<\/code>&nbsp;proposal<\/a>) whereas in the 2018 proposal how conditions would work was largely undefined.<\/p>\n<cite>Lea Verou, <a href=\"https:\/\/lea.verou.me\/blog\/2024\/css-conditionals\/\" rel=\"noopener\">&#8220;Inline conditionals in CSS?&#8221;<\/a><\/cite><\/blockquote>\n\n\n\n<p>I like how Lea points out that CSS goes on to describe how CSS has always been a conditional language:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Folks\u2026 CSS had conditionals from the very beginning. Every selector is essentially a conditional!<\/p>\n<cite>Lea Verou, <a href=\"https:\/\/lea.verou.me\/blog\/2024\/css-conditionals\/#so-is-it-in-browsers-yet%3F\" rel=\"noopener\">&#8220;Inline conditionals in CSS?&#8221;<\/a><\/cite><\/blockquote>\n\n\n\n<p>True! The Cascade is the vehicle for evaluating selectors and matching them to HTML elements on a page. What <code>if()<\/code> brings to the table is a way to write inline conditions with selectors.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"syntax\">Syntax<\/h3>\n\n\n<p>It boils down to this:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">&lt;if()> = if( &lt;container-query>, [&lt;declaration-value>]{1, 2} )<\/code><\/pre>\n\n\n\n<p>&#8230;where:<\/p>\n\n\n\n<ul>\n<li>Values can be nested to produce multiple branches.<\/li>\n\n\n\n<li>If a third argument is not provided, it becomes equivalent to an empty token stream.<\/li>\n<\/ul>\n\n\n\n<p>All of this is conceptual at the moment and nothing is set in stone. We&#8217;re likely to see things change as the CSSWG works on the feature. But as it currently stands, the idea seems to revolve around specifying a condition, and setting one of two declared styles \u2014 one as the &#8220;default&#8221; style, and one as the &#8220;updated&#8221; style when a match occurs.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  background-color:\n    \/* If the style declares the following custom property: *\/\n    if(style(--variant: success),\n      var(--color-green-50), \/* Matched condition *\/\n      var(--color-blue-50);  \/* Default style *\/\n    );\n}<\/code><\/pre>\n\n\n\n<p>In this case, we&#8217;re looking for a <code>style()<\/code> condition where a CSS variable called <code>--variant<\/code> is declared and is set to a value of <code>success<\/code>, and:<\/p>\n\n\n\n<ul>\n<li>&#8230;if <code>--variant<\/code> is set to <code>success<\/code>, we set the value of <code>success<\/code> to <code>--color-green-50<\/code> which is a variable mapped to some greenish color value.<\/li>\n\n\n\n<li>&#8230;if <code>--variant<\/code> is not set to <code>success<\/code>, we set the value of the <code>success<\/code> to <code>--color-blue-50<\/code> which is a variable mapped to some bluish color value.<\/li>\n\n\n\n<li><\/li>\n<\/ul>\n\n\n\n<p>The default style would be optional, so I think it can be omitted in some cases for slightly better legibility:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  background-color:\n    \/* If the style declares the following custom property: *\/\n    if(style(--variant: success),\n      var(--color-green-50) \/* Matched condition *\/\n    );\n}<\/code><\/pre>\n\n\n\n<p>The syntax definition up top mentions that we could support a third argument in addition to the matched condition and default style that allows us to nest conditions within conditions:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">background-color: if(\n  style(--variant: success), var(--color-success-60), \n    if(style(--variant: warning), var(--color-warning-60), \n      if(style(--variant: danger), var(--color-danger-60), \n        if(style(--variant: primary), var(--color-primary)\n      )\n    ),\n  )\n);<\/code><\/pre>\n\n\n\n<p>Oomph, looks like some wild inception is happening in there! Lea goes on to suggest a syntax that would result in a much flatter structure:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">&lt;if()> = if( \n  [ &lt;container-query>, [&lt;declaration-value>]{2}  ]#{0, },\n  &lt;container-query>, [&lt;declaration-value>]{1, 2} \n)<\/code><\/pre>\n\n\n\n<p>In other words, nested conditions are much more flat as they can be declared&nbsp;<em>outside<\/em>&nbsp;of the initial condition. Same concept as before, but a different syntax:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">background-color: if(\n  style(--variant: success), var(--color-success-60), \n  style(--variant: warning), var(--color-warning-60),\n  style(--variant: danger), var(--color-danger-60), \n  style(--variant: primary), var(--color-primary)\n);<\/code><\/pre>\n\n\n\n<p>So, rather than one <code>if()<\/code> statement inside another <code>if()<\/code> statement, we can lump all of the possible matching conditions into a single statement.<\/p>\n\n\n\n<p><\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"this-is-all-related-to-style-queries\">This is all related to style queries<\/h3>\n\n\n<p>We&#8217;re attempting to match an <code>if()<\/code> condition by querying an element&#8217;s styles. There is no corresponding <code>size()<\/code> function for querying dimensions \u2014 container queries implicitly assume size:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  background: var(--color-primary);\n\n  \/* Condition *\/\n  @container parent (width >= 60ch) {\n    \/* Applied styles *\/\n    background: var(--color-success-60);\n  }\n}<\/code><\/pre>\n\n\n\n<p>And container queries become <em>style<\/em> queries when we call the <code>style()<\/code> function instead:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  background: orangered;\n\n  \/* Condition *\/\n  @container parent style(--variant: success) {\n    \/* Applied styles *\/\n    background: dodgerblue;\n  }\n}<\/code><\/pre>\n\n\n\n<p>Style queries make a lot more sense to me when they&#8217;re viewed in the context of <code>if()<\/code>. Without <code>if()<\/code>, <a href=\"https:\/\/www.smashingmagazine.com\/2024\/06\/what-are-css-container-style-queries-good-for\/#comments-what-are-css-container-style-queries-good-for\" rel=\"noopener\">it&#8217;s easy to question the general usefulness of style queries<\/a>. But in this light, it&#8217;s clear that style queries are part of a much bigger picture that goes beyond container queries alone.<\/p>\n\n\n\n<p>There&#8217;s still plenty of things to suss out with the <code>if()<\/code> syntax. For example, <a href=\"https:\/\/github.com\/w3c\/csswg-drafts\/issues\/10064#issuecomment-2165224881\" rel=\"noopener\">Tab Atkins describes a possible scenario<\/a> that could lead to confusion between what is the matched condition and default style parameters. So, who knows how this all shakes out in the end!<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"conditions-supporting-other-conditions\">Conditions supporting other conditions<\/h3>\n\n\n<p>As we&#8217;ve already noted, <code>if()<\/code> is far from the only type of conditional check already provided in CSS. What would it look like to write an inline conditional statement that checks for other conditions, such as <code>@supports<\/code> and <code>@media<\/code>?<\/p>\n\n\n\n<p>In code:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">background-color: if(\n  supports( \/* etc. *\/ ),\n  @media( \/* etc. *\/ )\n);<\/code><\/pre>\n\n\n\n<p>The challenge would be container supporting size queries. As mentioned earlier, there is no explicit&nbsp;<code>size()<\/code>&nbsp;function; instead it\u2019s more like an anonymous function.<\/p>\n\n\n\n<p><a href=\"https:\/\/github.com\/andruud\" rel=\"noopener\">@andruud<\/a>&nbsp;has a&nbsp;<a href=\"https:\/\/github.com\/w3c\/csswg-drafts\/issues\/10064#issuecomment-2159027670\" rel=\"noopener\">succinctly describes the challenge<\/a> in the GitHub discussion:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>I don\u2019t see why we couldn\u2019t do&nbsp;<code>supports()<\/code>&nbsp;and&nbsp;<code>media()<\/code>, but size queries would cause cycles with layout that are hard\/impossible to even detect. (That\u2019s why we needed the restrictions we currently have for size CQs in the first place.<\/p>\n<\/blockquote>\n\n\n<h3 class=\"wp-block-heading\" id=\"cant-we-already-do-this-with-x-approach\">&#8220;Can&#8217;t we already do this with [X] approach?&#8221;<\/h3>\n\n\n<p>When we were looking at the syntax earlier, you may have noticed that <code>if()<\/code> is just as much about custom properties as it is about conditionals. Several workarounds have emerged over the years to mimic what we&#8217;d gain <code>if()<\/code> we could set a custom property value conditionally, including:<\/p>\n\n\n\n<ul>\n<li>Using custom properties as a Boolean to apply styles or not depending on whether it is equal to&nbsp;<code>0<\/code>&nbsp;or&nbsp;<code>1<\/code>. (<a href=\"https:\/\/css-tricks.com\/dry-switching-with-css-variables-the-difference-of-one-declaration\/\">Ana has a wonderful article on this.<\/a>)<\/li>\n\n\n\n<li>Using a placeholder custom property with an empty value that\u2019s set when another custom property is set, i.e.&nbsp;<a href=\"https:\/\/css-tricks.com\/the-css-custom-property-toggle-trick\/\">\u201cthe custom property toggle trick\u201d<\/a>&nbsp;as Chris describes it.<\/li>\n\n\n\n<li><a href=\"https:\/\/css-tricks.com\/css-container-queries\/#aa-container-style-queries\">Container Style Queries!<\/a>&nbsp;The problem (besides lack of implementation) is that containers only apply styles to their descendants, i.e., they cannot apply styles to themselves when they meet a certain condition, only its contents.<\/li>\n<\/ul>\n\n\n\n<p>Lea gets deep into this in a separate post titled <a href=\"https:\/\/lea.verou.me\/blog\/2024\/css-conditionals-now\/\" rel=\"noopener\">&#8220;Inline conditional statements in CSS, now?&#8221;<\/a> that includes a table that outlines and compares approaches, which I&#8217;ll simply paste below. The explanations are full of complex CSS nerdery but are extremely helpful for understanding the need for <code>if()<\/code> and how it compares to the clever &#8220;hacks&#8221; we&#8217;ve used for years.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Method<\/th><th>Input values<\/th><th>Output values<\/th><th>Pros<\/th><th>Cons<\/th><\/tr><\/thead><tbody><tr><th><a href=\"https:\/\/lea.verou.me\/blog\/2024\/css-conditionals-now\/#binary-linear-interpolation\" rel=\"noopener\">Binary Linear Interpolation<\/a><\/th><td>Numbers<\/td><td>Quantitative<\/td><td>Can be used as part of a value<\/td><td>Limited output range<\/td><\/tr><tr><th><a href=\"https:\/\/lea.verou.me\/blog\/2024\/css-conditionals-now\/#toggles\" rel=\"noopener\">Toggles<\/a><\/th><td><code>var(--alias)<\/code>&nbsp;<em>(actual values are too weird to expose raw)<\/em><\/td><td>Any<\/td><td>Can be used in part of a value<\/td><td>Weird values that need to be aliased<\/td><\/tr><tr><th><a href=\"https:\/\/lea.verou.me\/blog\/2024\/css-conditionals-now\/#paused-animations\" rel=\"noopener\">Paused animations<\/a><\/th><td>Numbers<\/td><td>Any<\/td><td>Normal, decoupled declarations<\/td><td>Takes over&nbsp;<code>animation<\/code>&nbsp;property<br><br>Cascade weirdness<\/td><\/tr><tr><th><a href=\"https:\/\/lea.verou.me\/blog\/2024\/css-conditionals-now\/#type-grinding\" rel=\"noopener\">Type Grinding<\/a><\/th><td>Keywords<\/td><td>Any value supported by the&nbsp;<code>syntax<\/code>&nbsp;descriptor<\/td><td>High flexibility for exposed APIGood encapsulation<\/td><td>Must insert CSS into light DOM<br><br>Tedious code (though can be automated with build tools)<br><br><a href=\"https:\/\/caniuse.com\/mdn-css_at-rules_property\" rel=\"noopener\">No Firefox support<\/a> (though that\u2019s&nbsp;<a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1864818\" rel=\"noopener\">changing<\/a>)<\/td><\/tr><tr><th><a href=\"https:\/\/lea.verou.me\/blog\/2024\/css-conditionals-now\/#variable-animation-name\" rel=\"noopener\">Variable animation name<\/a><\/th><td>Keywords<\/td><td>Any<\/td><td>Normal, decoupled declarations<\/td><td>Impractical outside of Shadow DOM due to name clashes<br><br>Takes over&nbsp;<code>animation<\/code>&nbsp;property<br><br>Cascade weirdness<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"happy-birthday-lea\">Happy birthday, Lea!<\/h3>\n\n\n<p>Belated by two weeks, but thanks for sharing the spoils of your big day with us! &#x1f382;<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"references\">References<\/h3>\n\n\n<ul>\n<li><a href=\"https:\/\/github.com\/w3c\/csswg-drafts\/issues\/10064\" rel=\"noopener\">What is the MVP for inline conditionals on custom properties?<\/a>&nbsp;(Lea Verou, GitHub Issue #10064)<\/li>\n\n\n\n<li><a href=\"https:\/\/lea.verou.me\/blog\/2024\/css-conditionals\/\" rel=\"noopener\">Inline conditionals in CSS?<\/a> (Lea Verou)<\/li>\n\n\n\n<li><a href=\"https:\/\/lea.verou.me\/blog\/2024\/css-conditionals-now\/\" rel=\"noopener\">Inline conditionals in CSS, now?<\/a> (Lea Verou)<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>A few sirens went off a couple of weeks ago when the CSS Working Group (CSSWG) resolved to add an [&hellip;]<\/p>\n","protected":false},"author":2508,"featured_media":379073,"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":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}},"_share_on_mastodon":"1","_share_on_mastodon_status":"%title% %permalink%"},"categories":[17],"tags":[1036,741],"jetpack_publicize_connections":[],"acf":[],"share_on_mastodon":{"url":"https:\/\/mastodon.social\/@csstricks\/112757197594638052","error":""},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/07\/if-conditional-pattern.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/379002"}],"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\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=379002"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/379002\/revisions"}],"predecessor-version":[{"id":379074,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/379002\/revisions\/379074"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/379073"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=379002"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=379002"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=379002"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}