The - -var: ; hack to toggle multiple values with one custom property
lea.verou.me
lea.verou.me
https://github.com/propjockey/css-sweeper
> Space Toggle has been independently discovered a number of times
> @anatudor probably the first to discover it - about 3 years ago!
> @JamesOx57 in April 2020 which kickstarted development of augmented-ui v2 because it allows augs to be equipped without extra class names.
> @DavidKPiano in June 2020 and instead of just space, he includes an empty comment and calls it prop-and-lock
And now Lea Verou
Like a class?
I don't know if this is technically accurate though it leads to the same result. Whitespace in such languages is generally ignored - I believe this would just result in an empty property under the hood.
EDIT: also why the off-kilter background shapes for the code blocks. It made me dizzy reading the article.
https://www.w3.org/TR/css-syntax-3/#parse-rule
Whitespace tokens are skipped, as I suspected. There is no whitespace value. As I mentioned before, the result of what the author describes is the same, but the explanation isn't entirely accurate. It's harmless errata.
Perhaps it is /you/ that doesn't know what they're talking about.
I am all for clever hacks but more needs to be done when it comes to explaining to experienced developers and new people exactly how to use CSS variables. It has been a difficult journey and we still have people doing their own weird things with LESS/SASS precompilers and not writing maintainable CSS.
Don't? They don't work in IE. By the time you've written a fallback you've complicated things just as much as Less/Sass would but without the benefits of those.
If you don’t have any evidence that you need to support it, I strongly recommend deliberately removing support for it, whether that means just not caring if it works or not or actively breaking it (though please implement that as an IE blacklist, not a certain-browsers whitelist). If you do have evidence that you need to support it, push to remove it, even if you can’t remove it just yet. If you can stop supporting IE, it will make your life easier and it will make my life easier.
Polyfills are available for most of the usual things and they're absolutely trivial to implement. No one is asking you for IE6 support (if they are, ignore them), but IE11 can do most things decently with minimal effort. As long as a browser is receiving mainstream support and the effort isn't too much, you should be at least minimally supporting it.
Polyfills are available for most things but they’re not trivial, and they have a meaningful cost in two axes: developer effort, and performance. Things like CSS Flex, CSS Grid, SVG, and ECMAScript 6+ functionality can all be made to work in IE (with a few exceptions, like grid auto placement), but only by making things heavier, typically for everyone. Other things that are really nice to be able to depend on like CSS Custom Properties and more recent ECMAScript syntax (e.g. modules) either can’t be used outright, or require much more extensive working around which still restricts what you can do in all the other browsers.
Speaking as someone who has had to maintain IE11 support for a couple of things within the last few years, it seriously is a real drain that contributes more code, bugs (not just for the offending browser) and simple complexity than many realise.
IE is not receiving mainstream support. The effort is too much. You should either ignore it, or, if people are trying to get support on specific issues in it, strongly consider actively scuppering it.
IE is dead. Let it stay dead.
The --var: ; hack