Think about you’ve gotten a component with a multi-value CSS property, akin to remodel: optionally available customized property values:
.el {
remodel: translate(100px) scale(1.5) skew(5deg);
}
Now think about you don’t all the time need all of the remodel values to be utilized, so some are optionally available. You may consider CSS optionally available customized property values:
.el */
remodel: translate(100px) var(–transform);
However surprisingly utilizing optionally available customized property values like this doesn’t work as meant. If the –transform variable is not outlined the entire property won’t be utilized. I’ve bought slightly “trick” to repair this and it appears like this:
.el {
remodel: translate(100px) var(–transform, );
}
Discover the distinction? There’s a fallback outlined in there that’s set to an empty worth: (, )
That’s the trick, and it’s very helpful! Right here’s what the specification has to say:
In an exception to the standard comma elision guidelines, which require commas to be omitted once they’re not separating values, a naked comma, with nothing following it, have to be handled as legitimate in var(), indicating an empty fallback worth.
That is considerably spiritually associated to the The CSS Customized Property Toggle Trick that takes benefit of a customized property having the worth of an empty area.
Demo
Like I stated, that is helpful and works for any multi-value CSS property. The next demo exhibits it utilizing text-shadow, background, and filter along with the remodel instance we simply mentioned.
See the Pen
CSS var – Fallback To Nothing by Yair Even Or (@vsync)
on CodePen.
Some properties that settle for a number of values, like text-shadow, require particular remedy as a result of they solely work with a comma delimiter. In these instances, when the CSS customized property is outlined, you (because the code writer) know it’s only for use in a scenario the place a price is already outlined the place the customized property is used. Then a comma must be inserted straight within the customized property earlier than the primary worth, like this:
–text-shadow: ,0 0 5px black;
This, in fact, inhibits the flexibility to make use of this variable in locations the place it’s the one worth of some property. That may be solved, although, by creating “layers” of variables for abstraction functions, i.e. the customized property is pointing to decrease stage customized properties.
Watch out for Sass compiler
Whereas exploring this trick, uncovered a bug within the Sass compiler that strips away the empty worth (,) fallback, which fits towards the spec. I’ve reported the bug and hope it will likely be mounted up quickly.
As a brief workaround, a fallback that causes no rendering can be utilized, akin to:
remodel: translate(100px) var(–transform, scale(1));
Multi-Worth CSS Properties With Non-obligatory Customized Property Values initially printed on CSS-Tips. It’s best to get the e-newsletter and grow to be a supporter.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!