[csswg-drafts] [css-const] RFC: CSS constants (#11248)

MajPay has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-const] RFC: CSS constants ==
CSS Constants
============

Abstract: By introducing constants to CSS we are able to use configurable values "outside of the cascade".
A constant will only be defined once, the "initialization" can exist multiple times but will be ignored if already defined.
The "document" containing the styles would manage the "state of constants".

The declaration of constants looks like:

```css
@const name: value;
```

A constant is meant to act as a "unitless value".

The usage of a constant looks like:

```
div {
    @media (min-width: const(name)) {
        width: const(name);
    }
}
```

The const() function does not have a fallback mechanism, if a constant is used in a rule, you have to make sure it has been defined before.

## Example using consts as a way to make media-queries configurable

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        /* declaration will be evaluated and memorized in the context of the document */
        @const breakpoint-medium: 36rem;
    </style>
    <link href="style.css" type="text/css">
    <!-- contents of style.css -->
    <style>
        /* declaration will be ignored because the const has already been declared before */
        @const breakpoint-medium: 40rem;
        /* declaration will be evaluated and memorized in the context of the document */
        @const breakpoint-large: 64rem;

        .some-selector {
            color: black;
            /* breakpoint-medium will be 36rem */
            @media (width >= const(breakpoint-medium)) {
                color: green;
            }
            /* breakpoint-large will be 64rem */
            @media (width >= const(breakpoint-large)) {
                color: blue;
            }
        }
    </style>
</head>
<body>
    <div class="some-selector">
        test
    </div>
</body>
</html>
```

So instead of going for custom-media (which is not that useful at all considering the migration to container queries) , i would go for a more generic solution to the problem of not having variable values outside of the cascade.

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


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

Received on Wednesday, 20 November 2024 13:13:01 UTC