[css-variables] way to customize break points by variables #1883
Description
The background is as: https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries discussed.
Though I totally understand. But is there anyway to customize break points of a component outside with web standard but without any pre-processer?
Seems making variables in :root element [1] accessible for media query is the nearest way. But I am not sure about it.
An example:
I want to define a web component named <responsive-columns>. Its scoped style [2] is like:
/* in component */
@media (min-width: var(--break-point-min)) {
:host > * {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--column-width-min), 1fr);
}
}So other developers can use it like:
<html>
<head>
...
<style>
/* global stylesheet */
:root {
--break-point-min: 540px;
--column-width-min: 200px;
}
</style>
</head>
<body>
<responsive-columns>
...
</responsive-columns>
</body>
</html>Thanks.
[1] https://drafts.csswg.org/selectors-3/#root-pseudo
[2] https://drafts.csswg.org/css-scoping-1/#selectors