TIL @media not (min-width: 60rem) { … } doesn't work in Safari, while it works in Chromium and Firefox.
Safari requires a media type, like all.
So here's the "right" syntax:
@media not all and (min-width: 60rem) { … }
I started updating my photography site with new Media Queries and CSS environment variables to make sure Surface Duo owners enjoy it even more! 🎉
Other foldable devices will come if it makes sense.
You have a Surface Duo? Feedback is welcome! 🙏
A Bashful Button Worth 8 Million Dollars
6 years ago I reported a bug about 100vh being larger than the viewport height in Safari. It was "intentional" according to webkit/Safari team, and…
Responsive SVGs - container vs media queries
Maarten shows here (only in Chrome Canary for now) how Container Queries will allow us to have responsive SVG images inline in the HTML. Responsive…
4329 is a long discussion about how people are really, really, REALLY unhappy how on mobile the viewport units don't represent the size of the viewport — @fantasai https://github.com/w3c/csswg-drafts/issues/4329#issuecomment-814281379
😅
6 years later, this is still my most read article…
A new nice responsive layout trick built upon Heydon Pickering's Flexbox Holy Albatross.
Jason Grigsby
Maarten Van Hoof
Nils Binder