Re: [csswg-drafts] [css-values] add "attr" test to if() (#12519)

# Proposal: Support typed `attr()` in CSS `@if()` conditional rules

## Summary

Extend the CSS conditional `@if()` syntax to support attribute-based tests using the typed `attr()` function, consistent with the latest CSS Values and Units specification. This enables more expressive, type-safe conditional styling based on HTML attributes.

---

## Motivation

CSS currently lacks the ability to conditionally apply styles based on element attribute values inside `@if()` conditionals. While attribute selectors provide some capabilities, they don’t allow for complex logic, type casting, or fallback handling.

The new typed `attr()` syntax, defined in [CSS Values and Units Level 4](https://www.w3.org/TR/css-values-4/#attr-notation), supports specifying types (e.g., `number`, `length`, `color`) and fallback values, enabling CSS to interpret attribute values reliably.

Incorporating typed `attr()` into `@if()` would:

- Provide powerful, declarative conditions directly in CSS without requiring JavaScript.
- Enable numeric, boolean, and other typed comparisons on attribute values.
- Maintain consistency with existing `attr()` use in CSS (e.g., content generation).
- Simplify styling logic and improve maintainability.

---

## Example

```
@layer utilities {
  .progress-bar {
    width: 100px;
    background: gray;

    @if (attr(data-progress number, 0) > 50) {
      background: green;
    }
    @if (attr(data-progress number, 0) <= 50) {
      background: orange;
    }
  }
}
```

Here, the `data-progress` attribute is interpreted as a number with a fallback of 0. The bar's background color changes conditionally based on the attribute's numeric value.

---

## Proposed syntax and behavior

- Support `attr()` in `@if()` conditions with full typed syntax: `attr(<attr-name> <type>?, <fallback>?)`.
- Allow all comparison operators: `==`, `!=`, `<`, `<=`, `>`, `>=`.
- Evaluate the typed attribute value, falling back if missing or invalid.
- Use standard CSS parsing and typing rules consistent with `attr()` elsewhere.

---

## Additional considerations

- Scope: Conditions should apply per element context where the attribute exists.
- Performance: Typed attribute access should be optimized in CSS engines.
- Fallbacks: Fallback values provide safety if attributes are absent or malformed.
- Error handling: Invalid casts should use fallback or evaluate as false in conditions.

---

## Benefits

- Dramatically improved expressiveness for conditional CSS.
- Alignment with modern CSS features and specifications.
- Reduced dependency on JavaScript for styling logic.
- Better maintainability and readability of stylesheets.

---

Would love to hear thoughts or feedback on this proposal!


-- 
GitHub Notification of comment by jogibear9988
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12519#issuecomment-3121846259 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 26 July 2025 13:28:28 UTC