Designing Websites for iPhone X
We’ve already covered “The Notch” and the options for dealing with it from an HTML and CSS perspective. There is a bit more detail available now, straight from the horse’s mouth:
Safe area insets are not a replacement for margins.
… we want to specify that our padding should be the default padding or the safe area inset, whichever is greater. This can be achieved with the brand-new CSS functions
min()andmax()which will be available in a future Safari Technology Preview release.@supports(padding: max(0px)) { .post { padding-left: max(12px, constant(safe-area-inset-left)); padding-right: max(12px, constant(safe-area-inset-right)); } }It is important to use @supports to feature-detect min and max, because they are not supported everywhere, and due to CSS’s treatment of invalid variables, to not specify a variable inside your @supports query.
Jeremey Keith’s hot takes have been especially tasty, like:
You could add a bunch of proprietary CSS that Apple just pulled out of their ass.
Or you could make sure to set a background colour on your
bodyelement.I recommend the latter.
And:
This could be a one-word article: don’t.
More specifically, don’t design websites for any specific device.
Although if this pushes support forward for min() and max() as generic functions, that’s cool.
Direct Link to Article — Permalink
Designing Websites for iPhone X is a post from CSS-Tricks
LEAVE A REPLY
You must be logged in to post a comment.