MajPay commented 1 day ago

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:

@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

<!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.

MajPay commented 1 day ago

bkardell commented 1 day ago

I guess relatedly there was also an idea from way back - this says 2018, but I seem to recall it originating in like 2012 maybe ... https://tabatkins.github.io/specs/css-aliases/

Crissov commented 1 day ago

Sorry, I’m in the mood to plug pseudo-constants from #6099 again.

@prefix const {
--color: green;
}
a {
 -const-color: red; /* invalid */
--color: orange; /* irrelevant */
  color: var(-const-color); /* green */
}

dbaron commented 1 day ago

I think some of the previous discussions of this sort of proposal have fallen apart while trying to find a combination of (1) substitution time, and (2) scoping rules that (a) makes sense, (b) fits with existing features (including APIs exposed to JS), and (c) doesn't produce bad results in significant cases. (I think one of those discussions ended up producing CSS Variables instead.)

w3c / csswg-drafts

[css-const] RFC: CSS constants #11248

CSS Constants

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