- From: 勾三股四 via GitHub <sysbot+gh@w3.org>
- Date: Mon, 16 Oct 2017 17:23:54 +0000
- To: public-css-archive@w3.org
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