[css-values] add "attr" test to if()

[jogibear9988]

Css if could not check for Attributes, maybe a Test for attr would be usefull.

The also @una sample in here https://youtu.be/Apn8ucs7AL0?si=WJiDD9eVgleC_Y61
Could be done mich simpler

[una]

CSS can use attributes as a selector. This demo could also be written as:

.card {
  border: 1px solid gray;
  grid-column: 3;
  background-color: #f7f7f7;
}

.card[data-status="pending"] {
  border-color: royalblue;
  background-color: #eff7fa;
  grid-column: 1;
}

.card[data-status="complete"] {
  border-color: seagreen;
  background-color: #f6fff6;
  grid-column: 2;
}

Is this what you are asking about?

[jogibear9988]

No, i want to use „attr“ in the test case of the css if condition.

[jogibear9988]

I'd like to do something this:

  .card {
    border-color: if (
                   attr(data-status: "complete"): seagreen
                   else: #f7f7f7)
  }

cause this then also would work in inline styles, or like in your sample in the video but without the custom prop

[jogibear9988]

I think the sytax needs to be different... we need the cast from the normal attribute function, but also comparison operators

[jogibear9988]

the comparators are already also requested for style queries:
#11759
#8376

[Crissov]

For what it’s worth, advanced value comparison in attribute selectors has been proposed already a long time ago: #354

[jogibear9988]

Maybe with attr in if, more complex conditions should be possible?

Proposal: Allow attr() and comparisons in CSS if() conditions

What problem are you trying to solve?

The if() function, defined in CSS Values and Units Module Level 5, allows authors to express conditional logic using semicolon-separated branches:

if(condition1: value1; condition2: value2; else: fallback)

However, the current specification limits conditions to only boolean-returning functions (like supports(), media(), style()).

This proposal seeks to expand if() conditions to support:

• Comparison expressions (==, !=, <, >, etc.)
• Typed attr() values in those expressions

This would make conditional logic based on element attributes or variables far more powerful and expressive.

---

Why is this a problem?

Many use cases require styling based on dynamic attributes or custom properties. For example, switching color, layout, or visibility based on a data-status attribute or var() value.

Currently, this requires:

• Repeating values in selectors or classes
• Using nested if() calls
• Maintaining logic outside of CSS

Allowing attr() and comparisons in if() would solve these limitations and enable clean, declarative multi-case logic.

---

Suggested Change

Allow comparison expressions in if() conditions:

if(attr(data-foo string) == "bar": red; else: black);

Support these operators:

• Equality: ==, !=
• Numeric: <, <=, >, >=

Examples:

/* Example 1: Match attribute value */
color: if(attr(data-status string) == "error": red; else: black);

/* Example 2: Multi-case conditional with attr */
color: if(
  attr(data-status string) == "error": red;
  attr(data-status string) == "warning": orange;
  attr(data-status string) == "success": green;
  else: gray
);

/* Example 3: Numeric comparison */
width: if(
  attr(data-level number, 0) >= 3: 300px;
  attr(data-level number, 0) >= 1: 200px;
  else: 100px
);

This builds on typed attr() from CSS Values & Units Level 4, using it inside the if() condition.

---

Relation to existing CSS

• if() already supports multiple branches with semicolon-separated syntax.
• Comparison expressions are already allowed in @media if(...), so this is consistent.
• attr() with types (string, number, etc.) is already spec’d for value contexts.
• This is a natural extension, not a breaking change.

---

Implementation notes

• Conditions would be evaluated at computed-value time.
• Logic would follow existing behavior from @media and @supports.
• This would unify condition handling across CSS.

---

Summary

Extend the if() function to support:

• Comparison expressions in condition clauses
• Typed attr() values inside those expressions

This enables readable, multi-branch logic based on dynamic values—especially attributes—without nested if()s or JS hacks.

[nt1m]

As Una says, the basic equality use case is pretty much already achievable using current selectors:

.card {
  border: 1px solid gray;
  grid-column: 3;
  background-color: #f7f7f7;
  &[data-status="pending"] {
    border-color: royalblue;
    background-color: #eff7fa;
    grid-column: 1;
  }
  &[data-status="complete"] {
    border-color: seagreen;
    background-color: #f6fff6;
    grid-column: 2;
  }
}

For typed conversions, it would probably make more sense to expand the attribute selectors first.

[jogibear9988]

Yeah but not from within the style attribute.
And most of the other if things are already possible at the moment in another way.

[andruud]

Allowing attr() and comparisons in if()

We already resolved to add this.

You can try a prototype in Chrome Canary if you use the runtime flag --enable-blink-features=CSSContainerStyleQueriesRange:

<!DOCTYPE html>
<style>
  div {
    color: if(
      style(attr(data-foo type(<number>)) < 4): green;
      else: red;
    );
  }
</style>
<div data-foo=3>
 Green
</div>

[jogibear9988]

I find this total unintuitive, to need to use attr inside of style…