Rapidly Testing CSS Fallbacks

No Comments

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.

    About Marketing Solution Australia

    We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

    Request a free quote

    We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

    Subscribe to our newsletter!

    More from our blog

    See all posts

    Leave a Comment