Question: is there a way to override css "native" env variable like safe-area-inset-top?

MDN
#1

I’m trying to build a storybook plugin which simulates devices with a notch.

Main problem: i couldn’t find a way to override iframe or browser native env variables.

Is that possible with existing APIs, or is that fully locked by the browser ?

Thanks a lot for your help,

#2

Hello @Clement_Fradet_Normand

this what i found but not sure if that what you asking for or not


hope that help and have a nice day :slight_smile:

#3

@justsomeone

Javascript variables are not linked with “native” CSS DOM variables like safe-area-inset-top.

I’m trying to build a plugin for storybook to “simulate” the css with devices that have round borders or a notch, cf https://github.com/storybookjs/storybook/issues/12852

Is there any way to achieve that on an iframe ?

Thanks a lot !

#4

Cf https://developer.mozilla.org/en-US/docs/Web/CSS/env() & https://developer.mozilla.org/en-US/docs/Web/CSS/env()/contributors.txt

@chrisdavidmills
@wbamberg

Maybe you can help ?

#5

And by “override” i mean “overwrite”

#6

Cf https://stackoverflow.com/questions/56499416/setting-css-env-variables-programmatically-using-javascript

#7

sorry @Clement_Fradet_Normand i do not know
by the way chris left mozilla
let me ask @mikoMK and @jwhitlock is thery can help you with that

and have a nice day everyone :slight_smile:

#8

Hi @Clement_Fradet_Normand :wave:

I have never worked with env() myself, but by reading the docs and spec I have a feeling that they are not settable/modifiable by script.

If I understand correctly the Iframe will contain an arbitrary (external) website for testing purposes. I think this will also rule out the following shenanigans because of cross origin restrictions:

  1. fetching the content of the CSS file
  2. replacing env(safe-area-inset-top) et al. with new values
  3. add the new CSS code to the Iframe
  4. removing the old CSS file

Since I’m no expert on this area I’m happy to be corrected.
Sorry, I couldn’t provide a solution to your problem :slightly_frowning_face:

Nevertheless, I wish you a nice day!
Michael

1 Like
#9

My question re-formulated: does a method exist to load an iframe with specific env variables, or allow inside page JS / CSS to overwrite env variables ?

cf my full storybook issue: https://github.com/storybookjs/storybook/issues/12852

Possible workaround now (but very hacky and not compatible at all with existing css libraries that use env() and not var()):

.storybook-iframe {
–storybook-safe-area-inset-top: 32px;
}

:root {
–safe-area-inset-top: env(safe-area-inset-top, --storybook-safe-area-inset-top);
}

.myclass {
padding-top: var(–safe-area-inset-top);
}

What would be perfect:
having a method like .setProperty that edits directly a css “env” variable (and not “var”), cf https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty