CSS variables, officially called Custom Properties, are amazing. I want to use them, but I can’t. Because IE11 doesn’t support them. And it will never die.
Since Windows 10 is the “last version of Windows,” and Internet Explorer upgrades are tied to the Operating System version, IE11 is frozen in time and every user is frozen along with it. If you, as a web developer, care to reach the large number of users stuck on IE11, you are frozen too.
When it comes to using new CSS, there are two strategies: progressive enhancement, and graceful degradation. Progressive enhancement is for “nice to have" features, ones that, if they don’t work, won’t break anything. If you’ve ever had to support IE8, then box-shadow is a familiar example of this. The version of your website on IE8 wouldn’t have any box-shadows, but that was alright. The site was still usable.
For more fundamental features, like flexbox or grid layouts, graceful degradation is the strategy to use. To do this, you need to write fallback styles. This can either be done by writing the same property twice (first with an older value, and then with the newer, less supported value), or by using the @supports query.
The
@supportsquery is less supported than some CSS features you may wish to test for, so be careful which properties you use this for. IE also does not support@supports.
When using the graceful degradation strategy, you end up writing and shipping more code: the conventional well-supported code, and the newer less-supported code. For many features, like grid or flex layouts, I find this bloat acceptable. It only exists in a few selectors and is easy to track down with a keyword search for the property that needs to be backfilled.
But backfilling CSS Variables is not so easy.
The difficulty comes from its power. A simple declaration of .compact { --scalar: 0.8; } can affect many properties in the entire tree stemming from the node with the compact class. Your fallback(s) could encompass writing multiple selectors, including qualified selectors (class selectors prefixed by element type). Consider the following example:
One of the most useful aspects of CSS Variables is that web developers don’t need to keep rewriting, calculating, and hard-coding values as magic numbers and colors. Centralizing configuration values via variables is part of what propelled SASS to prominence. This benefit is completely undone if we must write fallbacks with hard-coded values for every instance of our CSS Variables.
Once the fallbacks are all written, the wonderful concise code written with CSS Variables is worthless. It adds nothing to the application, since its job is completely performed by the fallbacks. It does not progressively enhance anything. At this point it becomes useless cruft, dead weight.
Until the projects I work on are no longer required to support Internet Explorer (any version), I cannot use CSS Variables.
*sobs softly*
