Poking on the CSS if() Perform a Little Extra: Conditional Coloration Theming

Chrome 137 shipped the if() CSS operate, so it’s completely attainable we’ll see different browsers implement it, although it’s robust to know precisely when. Regardless of the case, if() allows us to make use of values conditionally, which we will already do with queries and different features (e.g., media queries and the light-dark() operate), so I’m positive you’re questioning: What precisely does if() do?

Sunkanmi gave us a pleasant overview of the operate yesterday, poking on the syntax at a excessive degree. I’d prefer to poke at it slightly more durable on this article, moving into some attainable real-world utilization.

To recap, if() conditionally assigns a price to a property based mostly on the worth of a CSS variable. For instance, we may assign completely different values to the coloration and background properties based mostly on the worth of --theme:

• --theme: "Shamrock"
  • coloration: ‌hsl(146 50% 3%)
  • background: hsl(146 50% 40%)
• --theme: Anything
  • coloration: hsl(43 74% 3%)
  • background: hsl(43 74% 64%)

:root {
  /* Change to fall again to the ‘else’ values */
  --theme: "Shamrock";

  physique {
    coloration: if(fashion(--theme: "Shamrock"): hsl(146 50% 3%); else: hsl(43 74% 3%));
    background: if(fashion(--theme: "Shamrock"): hsl(146 50% 40%); else: hsl(43 74% 64%));
  }
}

I don’t love the syntax (too many colons, brackets, and so forth), however we will format it like this (which I believe is a bit clearer):

coloration: if(
  fashion(--theme: "Shamrock"): hsl(146 50% 3%);
  else: hsl(43 74% 3%)
);

We should always have the ability to do a loopy variety of issues with if(), and I hope that turns into the case finally, however I did some testing and realized that the syntax above is the one one which works. We will’t base the situation on the worth of an odd CSS property (as a substitute of a customized property), HTML attribute (utilizing attr()), or another worth. For now, not less than, the situation have to be based mostly on the worth of a customized property (CSS variable).

Exploring what we will do with if()

Judging from that first instance, it’s clear that we will use if() for theming (and design programs total). Whereas we may make the most of the light-dark() operate for this, what if the themes aren’t strictly gentle and darkish, or what if we wish to have greater than two themes or gentle and darkish modes for every theme? Effectively, that’s what if() can be utilized for.

First, let’s create extra themes/extra circumstances:

:root {
  /* Shamrock | Saffron | Amethyst */
  --theme: "Saffron"; /* ...I select you! */

  physique {
    coloration: if(
      fashion(--theme: "Shamrock"): hsl(146 50% 3%);
      fashion(--theme: "Saffron"): hsl(43 74% 3%);
      fashion(--theme: "Amethyst"): hsl(282 47% 3%)
    );
    background: if(
      fashion(--theme: "Shamrock"): hsl(146 50% 40%);
      fashion(--theme: "Saffron"): hsl(43 74% 64%);
      fashion(--theme: "Amethyst"): hsl(282 47% 56%)
    );
    transition: 300ms;
  }
}

Fairly easy actually, however there are just a few easy-to-miss issues. Firstly, there’s no “else situation” this time, which implies that if the theme isn’t Shamrock, Saffron, or Amethyst, the default browser types are used. In any other case, the if() operate resolves to the worth of the primary true assertion, which is the Saffron theme on this case. Secondly, transitions work proper out of the field; within the demo under, I’ve added a person interface for toggling the --theme, and for the transition, actually simply transition: 300ms alongside the if() features:

Word: if theme-swapping is user-controlled, equivalent to deciding on an choice, you don’t really want if() in any respect. You may simply use the logic that I’ve used initially of the demo (:root:has(#shamrock:checked) { /* Kinds */ }). Amit Sheen has an wonderful demonstration over at Smashing Journal.

To make the code extra maintainable although, we will slide the colours into CSS variables as nicely, then use them within the if() features, then slide the if() features themselves into CSS variables:

/* Setup */
:root {
  /* Shamrock | Saffron | Amethyst */
  --theme: "Shamrock"; /* ...I select you! */

  /* Base colours */
  --shamrock: hsl(146 50% 40%);
  --saffron: hsl(43 74% 64%);
  --amethyst: hsl(282 47% 56%);

  /* Base colours, however at 3% lightness */
  --shamrock-complementary: hsl(from var(--shamrock) h s 3%);
  --saffron-complementary: hsl(from var(--saffron) h s 3%);
  --amethyst-complementary: hsl(from var(--amethyst) h s 3%);

  --background: if(
    fashion(--theme: "Shamrock"): var(--shamrock);
    fashion(--theme: "Saffron"): var(--saffron);
    fashion(--theme: "Amethyst"): var(--amethyst)
  );

  --color: if(
    fashion(--theme: "Shamrock"): var(--shamrock-complementary);
    fashion(--theme: "Saffron"): var(--saffron-complementary);
    fashion(--theme: "Amethyst"): var(--amethyst-complementary)
  );

  /* Utilization */
  physique {
    /* One variable, all ifs! */
    background: var(--background);
    coloration: var(--color);
    accent-color: var(--color);

    /* Can’t overlook this! */
    transition: 300ms;
  }
}

In addition to utilizing CSS variables throughout the if() operate, we will additionally nest different features. Within the instance under, I’ve thrown light-dark() in there, which principally inverts the colours for darkish mode:

--background: if(
  fashion(--theme: "Shamrock"): light-dark(var(--shamrock), var(--shamrock-complementary));
  fashion(--theme: "Saffron"): light-dark(var(--saffron), var(--saffron-complementary));
  fashion(--theme: "Amethyst"): light-dark(var(--amethyst), var(--amethyst-complementary))
);

if() vs. Container fashion queries

In case you haven’t used container fashion queries earlier than, they principally verify if a container has a sure CSS variable (very like the if() operate). Right here’s the very same instance/demo however with container fashion queries as a substitute of the if() operate:

:root {
  /* Shamrock | Saffron | Amethyst */
  --theme: "Shamrock"; /* ...I select you! */

  --shamrock: hsl(146 50% 40%);
  --saffron: hsl(43 74% 64%);
  --amethyst: hsl(282 47% 56%);

  --shamrock-complementary: hsl(from var(--shamrock) h s 3%);
  --saffron-complementary: hsl(from var(--saffron) h s 3%);
  --amethyst-complementary: hsl(from var(--amethyst) h s 3%);

  physique {
    /* Container has chosen Shamrock! */
    @container fashion(--theme: "Shamrock") {
      --background: light-dark(var(--shamrock), var(--shamrock-complementary));
      --color: light-dark(var(--shamrock-complementary), var(--shamrock));
    }

    @container fashion(--theme: "Saffron") {
      --background: light-dark(var(--saffron), var(--saffron-complementary));
      --color: light-dark(var(--saffron-complementary), var(--saffron));
    }

    @container fashion(--theme: "Amethyst") {
      --background: light-dark(var(--amethyst), var(--amethyst-complementary));
      --color: light-dark(var(--amethyst-complementary), var(--amethyst));
    }

    background: var(--background);
    coloration: var(--color);
    accent-color: var(--color);
    transition: 300ms;
  }
}

As you possibly can see, the place if() facilitates conditional values, container fashion queries facilitate conditional properties and values. Aside from that, it truly is only a completely different syntax.

Further issues you are able to do with if() (however won’t notice)

Examine if a CSS variable exists:

/* Conceal icons if variable isn’t set */
.icon {
  show: if(
    fashion(--icon-family): inline-block;
    else: none
  );
}

Create more-complex conditional statements:

h1 {
  font-size: if(
    fashion(--largerHeadings: true): xxx-large;
    fashion(--theme: "themeWithLargerHeadings"): xxx-large
  );
}

Examine if two CSS variables match:

/* If #s2 has the identical background as #s1, add a border */
#s2 {
  border-top: if(
    fashion(--s2-background: var(--s1-background)): skinny strong crimson
  );
}

if() and calc(): When the mathematics isn’t mathing

This received’t work (possibly somebody will help me pinpoint why):

div {
  /* 3/3 = 1 */
  --calc: calc(3/3);
  /* Blue, as a result of if() received’t calculate --calc */
  background: if(fashion(--calc: 1): crimson; else: blue);
}

To make if() calculate --calc, we’ll have to register the CSS variable utilizing @property first, like this:

@property --calc {
  syntax: "";
  initial-value: 0;
  inherits: false;
}

Closing ideas

Though I’m not eager on the syntax and the way unreadable it may possibly generally look (particularly if it’s formatted on one line), I’m mega excited to see how if() evolves. I’d love to have the ability to use it with odd properties (e.g., coloration: if(fashion(background: white): black; fashion(background: black): white);) to keep away from having to set CSS variables the place attainable.

It’d even be superior if calc() calculations may very well be calculated on the fly with out having to register the variable.

That being stated, I’m nonetheless tremendous pleased with what if() does at the moment, and might’t wait to construct even easier design programs.