Dumb trick alert!
Not all browsers assist all options. Say you need to write a fallback for browsers that doesn’t assist CSS Grid. Not quite common nowadays, nevertheless it’s simply as an instance a degree.
You could possibly write the supporting CSS in an @helps blocks:
@helps (show: grid) {
.blocks {
show: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100px, 100%), 1fr));
hole: 1rem;
}
}
Then to check the fallback, you shortly change @helps (show: grid) to one thing nonsense, like including an “x” so it’s @helps (show: gridx). That’s a fast toggle:
The instance above doesn’t have superb fallbacks does it?! Possibly I’d try to jot down one thing comparable in flexbox, as hey, possibly there’s some small group of browsers nonetheless on the market that assist flexbox and never grid. Extra seemingly, I’d simply write a fallback that makes issues look fairly OK as a column.
If I’m pretty assured the browser helps @helps queries (oh, the irony), I may write it like:
@helps (show: grid) {
/* grid stuff */
}
@helps not (show: grid) {
/* at the least house them out a bit */
.block { margin: 10px }
}
That’s an assumption that can get safer and safer to make, and actually, we’re most likely already there (in the event you’ve dropped IE assist).
This makes me need that @when syntax much more although, as a result of then we may write:
@when helps(show: grid) {
} @else {
}
…which feels so contemporary and so clear.
The submit Rapidly Testing CSS Fallbacks appeared first on CSS-Tips. You’ll be able to assist CSS-Tips by being an MVP Supporter.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!