Twitter | Search | |
Chris Coyier
Do you regularly use @​supports? What's your common use case? Anything I can see?
Reply Retweet Like More
Mike Smedley Feb 6
Replying to @chriscoyier
Yeah I've used it for using grid, with a fallback to flexbox. I may potentially have a sample react component in a github repo somewhere...
Reply Retweet Like
Chris Silvermαn Feb 6
Replying to @chriscoyier
Not regularly, but I've been experimenting with setting a default weight for variable fonts:
Reply Retweet Like
Chris Coyier Feb 6
Replying to @smdly
Right on! Do you know off hand which browsers/versions benefit from that in-between state of supporting flexbox but not grid? Still fairly significant for you?
Reply Retweet Like
Andy Lincoln🇺🇸🇮🇪🏴󠁧󠁢󠁳󠁣󠁴󠁿 Feb 6
Replying to @chriscoyier
I’m currently using at-supports to detect support for the gap property for use with flexbox. The fallback case uses margins instead to create the spacing I want
Reply Retweet Like
💭 Feb 6
Replying to @chriscoyier @supports
I’m using it for CSS custom properties. Wrapping them in I feel is more intentional then just relying on CSS to fallback for an unknown value.
Reply Retweet Like
Matthias Ott Feb 6
Replying to @chriscoyier
Did a pen that shows a (not too complex) possible use case for @​supports with display:grid and object-fit:cover. 👉
Reply Retweet Like
Chris Coyier Feb 6
Replying to @markthomes @supports
That's interesting! Off the top of my head seems like: thing { margin: 20px; margin: var(--margin); } is pretty easy fallback. But that's a VERY uncomplicated example. Do you have an example where it's needed to feel more intentional?
Reply Retweet Like
Chris Coyier Feb 6
Replying to @Andy__Lincoln
Ah yeah, is that like @​supports (gap) { } or do you do something different?
Reply Retweet Like
Aftab Alam Feb 7
Replying to @chriscoyier
Check iOS, and apply platform specific fix: `-webkit-overflow-scrolling: touch`, a property that allows scrolling on iframe in overlays magically 🧙‍♂️(though not consistent) and can double as way to identify iOS/webkit(only supporting browser) and do more magical 🧙‍♂️ stuff!
Reply Retweet Like
Chris Coyier Feb 7
Replying to @aftabbuddy
Do you need supports for that though? Can't you just add that property and let it not work if not supported?
Reply Retweet Like
Chris Coyier Feb 7
Replying to @m_ott
Is the photo supposed to be covering this space between itself and the text?
Reply Retweet Like
Chris Coyier Feb 7
Replying to @_csilverman
If you use that property outside of the supports block, is it problematic? Like it screws up the font-weight or something?
Reply Retweet Like