Skip to content

[css-properties-values-api-1] Allow @property syntax checking to work with fallback value #1096

@miragecraft

Description

@miragecraft

I'm experimenting with the new @property at-rule and feel that it should include the ability to use syntax in conjunction with custom property fallback value.

For example, let's say I want to create a special --width custom property that accepts fractions (such as 1/2, 2/5) in addition to all the values allowed by the built-in width property including the unitless 0, <percentage-length>, as well as all the keywords such as auto, min-content, max-content, fit-content.

Currently it's not possible to do so, but if we allow syntax checking with fallback, we can do:

div {
  --width-percent: calc(var(--width) * 100%);
  width: var(--width-percent, var(--width));
}

@property --width-percent {
  syntax: "<percentage>";
  inherits:false;
}

So this is why I would like the spec to allow combining fallback with syntax checking.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions