[csswg-drafts] [css-variables] way to customize break points by variables

Jinjiang has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-variables] way to customize break points by variables ==
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 customized 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:

```css
/* in component */
@media (min-width: var(--break-point-min)) {
  :host > * {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--column-width-min), 1fr);
  }
}
```

and I can use it with:

```html
<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

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1883 using your GitHub account

Received on Monday, 16 October 2017 17:23:56 UTC