Back to all features
Open for signals CSS

if()

The if() CSS function is an inline conditional value that returns a value based on a set of conditions.

Community use cases (4)

Community signal summary

Developers strongly support the inline CSS if() function to enable clean conditional styling without relying on JavaScript [1][3]. Primary use cases include dynamic theme switching across more than two color schemes where light-dark() is insufficient [4], toggling property values based on custom state flags [2], and adjusting typography metrics (such as font-weight and letter-spacing) dynamically according to contextual variables like image dimensions [3]. An engineer at HubSpot noted that lacking conditional expressions forces design compromises, leaving extreme container sizes with suboptimal typography [3].

To achieve conditional logic today, developers resort to brittle "space toggle" variable hacks that exploit invalid variable substitution fallbacks [2] or wrapped @container style queries [4]. However, these workarounds incur significant maintenance penalties; for instance, relying on @container queries forces JavaScript style generators to emit complete CSS declaration blocks rather than composable, inline property expressions [4]. Platform sentiment is overwhelmingly positive, with developers seeking native if() to eliminate complex CSS hacks, improve design token modularity, and support script-restricted environments [1][2][4].

Generated by AI from community comments and may contain inaccuracies. Read the comments below for full developer context.

This summary covers all 4 comments, is up to date, and was last updated on September 5, 2026.

EppeTeppe

What I want to do with this feature

make elements dependable (if x happens, let y) etc. I want to be able to not use javascript as some websites dont allow it. i use firefox.

What I'm having to do in the meantime

i have to do different things. i cant do any of what i want. i wanted to have two elements dependable and there's no other way to do it properly.

sillypantscoder

What I want to do with this feature

Make some colors change depending on a flag. The flag can be set in several different ways, so I need to make it a custom property.

What I'm having to do in the meantime

:root {
	--TRUE: initial;
	--FALSE: ;
}
* {
	/* --condition is set on this element from multiple different places */
	--condition: var(--TRUE); /* or */ --condition: var(--FALSE);
	/* This declaration becomes "invalid" when --condition is TRUE: */
	--false-or-invalid-value: var(--condition) var(--value-when-false);
	/* This uses the second value when --false-or-invalid-value is "invalid" */
	--final-value: var(--false-or-invalid-value, var(--value-when-true));
}
weaverhe
HubSpot

What I want to do with this feature

I have some places where typography scales based on the selected size of the image next to it. I know the size of the image as a variable already, I'd love to be able to set weight, letter-spacing, etc. based on the image size.

What I'm having to do in the meantime

I opted to just pick values that are a happy medium, so the styles look a bit weird at the more extreme image sizes. I could use JS but I'd prefer a CSS-only solution!

Quelklef

What I want to do with this feature

Modulate component styling according to app color scheme. (There are four schemes available, not two, so light-dark() cannot apply :3)

background: if(
  style(--current-color-scheme: dark) or style(--current-color-scheme: evil):
    <color-a>;
  else:
    <color-a>;
);

What I'm having to do in the meantime

Use a @container query. This works! It's not ideal because I generate the style within a function, similar to mkSkeuo() below. Using @container means that mkSkeuo() is forced to return a full CSS declaration, making it substantially less flexible than if it were to return an if() expression instead.

function mkSkeuo(targetSelector, baseColor, intensity) {
  return `
    ${targetSelector} { background: ${colorA}; }
    @container style(--current-color-scheme: dark) or style(--current-color-scheme: evil) {
      ${targetSelector} { background: ${colorB}; }
    }
  `;
}
const colorA = 'red', colorB = 'blue';  // Or whatever

Signing in with GitHub allows you to cast one-click upvotes and submit structured use cases directly to the web-platform-dx/developer-signals repository.

Our GitHub App only requests access to issue discussions. It never requests or has access to your personal repositories or code.
Sign in with GitHub
Strict feedback template: Please be as concrete as possible. Specific examples from your production apps or projects provide the highest-value signal to standards editors and browser engineers.
Add your specific real-world use cases, even if they seem obvious to you.
0 / 5000 (min 10)
Are you having to use another feature instead, a polyfill, or is it blocking you completely? Why are the alternatives worse?
0 / 5000 (min 10)
Markdown formatting is supported.