Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[css-const] RFC: CSS constants #11248

Open
MajPay opened this issue Nov 20, 2024 · 4 comments
Open

[css-const] RFC: CSS constants #11248

MajPay opened this issue Nov 20, 2024 · 4 comments

Comments

@MajPay
Copy link

MajPay commented Nov 20, 2024

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
Copy link
Author

MajPay commented Nov 20, 2024

Similar issues:

#10487
#2627
#10286

@bkardell
Copy link
Contributor

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
Copy link
Contributor

Crissov commented Nov 20, 2024

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
Copy link
Member

dbaron commented Nov 20, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@dbaron @bkardell @MajPay @Crissov