[css-env][mediaqueries] Support comparing value of environment variable

[upsuper]

It can be useful to be able to compare value of environment variable with some fixed number, just like testing width and height. Potential usecases like one may want to use a different background image when the safe inset is different, or want some width to be aligned to certain grid lines.

We may also use this mechanism combined with custom environment variable to replace the "Script-based Custom Media Queries" mentioned in mediaqueries-5?

[UtterDonkey]

Any updates on this?

[bramus]

You can achieve this with style queries:

:root {
	--size: env(safe-area-inset-bottom, -1px);
}

@container style(--size: 0px) {
	body {
		background: blue;
	}
}

Or using the upcoming if():

body {
	background: if(
		style(--size: 0px): green;
		else: initial;
	);
}

The one thing that is missing though, is range comparisons in style queries, for which I have filed #11759