Dumb trick alert!

Not all browsers help all options. Say you wish to write a fallback for browsers that doesn’t help CSS Grid. Not quite common as of late, nevertheless it’s simply as an example some extent.

You can 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 rapidly 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?! Perhaps I’d try to jot down one thing comparable in flexbox, as hey, perhaps there’s some small group of browsers nonetheless on the market that help flexbox and never grid. Extra possible, 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 very least house them out a bit */
  .block { margin: 10px }
}

That’s an assumption that can get safer and safer to make, and truthfully, we’re most likely already there (in case you’ve dropped IE help).

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.

#Rapidly #Testing #CSS #Fallbacks #CSSTricks

Leave a Reply

Your email address will not be published. Required fields are marked *