Chrome 137 has introduced the `if()` CSS function, allowing conditional use of values, similar to media queries and the `light-dark()` function. While other browsers may adopt this feature, its exact timeline is uncertain. The `if()` function assigns a value to a property based on a CSS variable. For instance, it can alter the `color` and `background` properties depending on the `–theme` variable’s value.
Example usage:
“`css
:root {
–theme: “Shamrock”;
body {
color: if(style(–theme: “Shamrock”): hsl(146 50% 3%); else: hsl(43 74% 3%));
background: if(style(–theme: “Shamrock”): hsl(146 50% 40%); else: hsl(43 74% 64%));
}
}
“`
Though the syntax can be complex, it can be formatted for clarity. The function currently only works with custom properties, not ordinary CSS properties or HTML attributes. `if()` is useful for theming and design systems, allowing more than two themes or modes.
To create multiple themes:
“`css
:root {
–theme: “Saffron”;
body {
color: if(
style(–theme: “Shamrock”): hsl(146 50% 3%);
style(–theme: “Saffron”): hsl(43 74% 3%);
style(–theme: “Amethyst”): hsl(282 47% 3%)
);
background: if(
style(–theme: “Shamrock”): hsl(146 50% 40%);
style(–theme: “Saffron”): hsl(43 74% 64%);
style(–theme: “Amethyst”): hsl(282 47% 56%)
);
transition: 300ms;
}
}
“`
For maintainability, colors can be stored in CSS variables and used within `if()` functions. Nesting other functions like `light-dark()` is also possible.
Comparison with container style queries shows `if()` handles conditional values, while container style queries manage both properties and values. Additional uses include checking if a CSS variable exists, creating complex conditions, and matching CSS variables.
Challenges exist with `if()` and `calc()`, as calculations require variable registration using `@property`.
Despite its syntax, the `if()` function’s potential excites developers, with hopes for broader property use and dynamic calculations without registration. It promises to simplify design systems significantly.
