[csswg-drafts] [css-parametric-rules]

Proposal: Parametric CSS Selectors with Computed Property Binding (#12695)
MrabetOussama0 has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-parametric-rules]
Proposal: Parametric CSS Selectors with Computed Property Binding ==
1. Introduction

CSS is currently a declarative styling language, but lacks runtime mechanisms for logic, parameterization, and computation based on computed element values.

Today, developers rely on:

Preprocessors (Sass, LESS, Stylus) for variables and conditional logic (compile-time only).

CSS Houdini or JavaScript for runtime computations.


This proposal introduces parametric CSS rules to allow runtime-safe computations directly within CSS.


---

2. Syntax

2.1 Parametric Selector

.selector(param1, param2, ...) { ... }

Parameters are bound to intrinsic element properties.

Example reserved keywords:

w → element width

h → element height

c → computed text color

bg → computed background color



2.2 Expressions

Expressions may contain:

Arithmetic: +, -, *, /

Comparisons: ===, !=, <, >, <=, >=

Conditional ternary: condition ? value1 : value2



---

3. Examples

.card(h) {
  height: h * 2;
  background: h === 100 ? red : blue;
}

.title(w) {
  font-size: w > 500 ? 2rem : 1rem;
}

.alert(c) {
  border-color: c === red ? black : c;
}


---

4. Processing Model

1. Browser computes element’s intrinsic properties (w, h, etc.).


2. Parametric rules are resolved after style computation.


3. On layout changes (resize, reflow), parametric rules are re-evaluated.


4. If parameters are unavailable, expressions resolve to auto.




---

5. Security and Performance

No arbitrary JavaScript execution is allowed.

Only safe arithmetic/conditional expressions are permitted.

Evaluations are sandboxed and optimized for reflow events.



---

6. Relation to Other Features

Custom Properties: parametric CSS extends runtime flexibility beyond variables.

Container Queries: parametric rules complement container-based styling.

Houdini: advanced logic should still use Houdini Paint/Properties API.

Preprocessors: unlike Sass/LESS, evaluation happens at runtime, not compile time.



---

7. Future Work

Allow user-defined parameters (.card(@ratio)).

Allow referencing other computed properties (.card(sibling.w)).

Integration with Houdini for custom bound values.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12695 using your GitHub account


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

Received on Sunday, 31 August 2025 10:43:50 UTC