Re: [csswg-drafts] [css-properties-values-api] Shorthand for custom property declaration (#7523)

@bramus You wouldn’t with this syntax, but the clumsy declaration-block at-rule `@property` is still there if you need it. 
All those design systems and frameworks really only want a lean fixed-value keyword registration syntax for their atoms/tokens. Some of their verbosity and large number of predefined custom properties could already be mitigated by `@function` and other approaches summarized in #10948.

@LeaVerou If I did not [miss anything](https://drafts.csswg.org/indexes/#at-rules), declaration-block `image` surprisingly is indeed the only [`<syntax-type-name>`](https://drafts.csswg.org/css-values-5/#typedef-syntax-type-name) that does/should already exists as an at-rule `@image`, but since this has not actually been drafted yet, its name could still be changed.

<details>
- `@angle`
- `@color` has definitely been proposed before
- `@custom-ident` feels redundant
- `@image` not yet in [CSS Images 5](https://drafts.csswg.org/css-images-5/)
- `@integer`
- `@length`
- `@length-percentage` feels unnecessary
- `@number`
- `@percentage`
- `@resolution`
- `@string`
- `@time`
- `@url`
- `@transform-function`

If you wanted to follow the precedent set by [`@font-feature-values`](https://drafts.csswg.org/css-fonts-4/#at-ruledef-font-feature-values) (which works very different from the similar named [`@font-palette-values`](https://drafts.csswg.org/css-fonts-4/#at-ruledef-font-palette-values)), it would instead look something like this:

~~~~ css
@values {
  @var {
    --grue: rgb(0% 80% 80%);}
    --finger-tip: 8mm;
    --vga: 640px 480px;
    --north-west: 45deg;
    --phi: calc(1 + sqrt(5/4));
    --ci-logo: url("/img/acme.svg");
  }
  @src {
    --home: '/#top';
  }
}
~~~~

… and the initial double-hyphen could even become optional. 
</details>

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


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

Received on Thursday, 11 December 2025 22:22:27 UTC