Re: [csswg-drafts] [mediaqueries-5] [css-env] Replace `@custom-media` with custom environment variables? (#6698)

How about passing env variables from the implementation and using it with a provided fallback value?

This could be used fort both - scripts and stylesheets alike.

```html
<link rel="stylesheet" href="style.ss" env-rem-size="18px" />

<style type="text/css" env-breakpoint-large="1024px">
    @media (min-width: env(--breakpoint-large, 800px)) {
        .element {
            background: red;
        }
    }
</style>

<script>
document.querySelector('style').env.breakpointLarge = "1280px";
// removes all styles and re-adds with new env value
</script>

<!-- or even -->
<script env-namespace="my" id="script">
    customElements.define(`${env.namespace || 'vendor'}-hello`, class extends HTMLElement {
        constructor() {
            super();
            this.attachShadow({mode: "open"}).innerHTML = `Hello, <slot></slot>!`;
        }
    });
</script>

<my-hello>John Doe</my-hello>

<script>
document.querySelector('#script').env.namespace = "your";
// triggers error because script has already been evaluated
const script = document.createElement("script");
script.env.foo = "bar";
script.innerText = `console.log(env.foo);`;
document.querySelector('#script').insertAdjacentElement('beforebegin', script);
// console tells "bar"
script.env.foo = "baz";
// triggers error
</script>
```
I would still support the idea of declaring env-variables inside the stylesheets head (to avoid repeating the same fallback-values over and over again), but the argument-value should take precedence.

If consistancy with svg parameters is important, passing env variables via a url could work as well but i dont like the idea of passing args via a url and making it seem like there is some http pipeline involved.

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


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

Received on Saturday, 9 October 2021 15:17:04 UTC