4 ms·

I was ready to be annoyed by this, and it is a ridiculous design, but the article is a pretty good discussion of CSS's round display extensions. Those have been

I was ready to be annoyed by this, and it is a ridiculous design, but the article is a pretty good discussion of CSS's round display extensions. Those have been sort of sitting around gathering dust as far as I can tell, but the idea seems pretty cool and potentially useful. I like that they're proposing a safe area constant, which makes a lot of sense. This is a really great way to see it all actually working and figure out what still needs to happen. With that said, they lose the plot a bit when the iPhone X's safe area adds unnecessary padding outside of the notch, and then double down on that mistake when they talk about their brand new `min()` and `max()` functions. When you start combining math functions in CSS, you need to back up and ask what you did wrong, because you definitely did something wrong. What you should do is add some padding for the safe area, which might be 0, and then add some more padding (of your choosing) beyond that. Same way any other screen works. But it's Apple, so it will probably end with everyone forced to make the same stupid mistake and then we'll need a new standard to get rid of it all. Anyway, grumbles aside, I think Apple deserves kudos here for pushing forward some existing standards in a mostly constructive way.

LoSboccacc 9y ago
yeah so nice! we couldn't use the top area, then the bottom area, and now not even the sides.
alwillis 9y ago
With that said, they lose the plot a bit when the iPhone X's safe area adds unnecessary padding outside of the notch, and then double down on that mistake when they talk about their brand new `min()` and `max()` functions. These functions aren’t Apple’s and they're not new. There was a proposal a year ago to add them back to CSS, which means they were existed in some W3C or WHATWG specification proposal before that: https://github.com/w3c/csswg-drafts/issues/544 https://github.com/w3c/csswg-drafts/issues/544 The link in the article will take you to the current specification: https://drafts.csswg.org/css-values/#calc-notation https://drafts.csswg.org/css-values/#calc-notation
- om2 9y ago
  min() and max() are actually super useful beyond handling the iPhone X safe areas, here's a Tweet with some examples of other ways to use it: https://twitter.com/iamvdo/status/910074435159420928 https://twitter.com/iamvdo/status/910074435159420928 In brief, it lets you replace the "CSS locks" pattern which is a super awkward way to apply clamping to a flexible size. min()/max() makes it much easier.
chis 9y ago
Yeah it is surprising to see such a hacky design when they literally only had one use case. I also don’t understand why all browsers are adding css properties just to support the new iPhone, but maybe I don’t understand how this committee works.
- alwillis 9y ago
  It's not just for the iPhone X. There are browsers in refrigerators, e-readers, game consoles, smart TVs, kiosks and who knows what else. There will be lots of devices that can take advantage of these new properties, not just the iPhone X.

LoSboccacc 9y ago

yeah so nice! we couldn't use the top area, then the bottom area, and now not even the sides.

alwillis 9y ago

With that said, they lose the plot a bit when the iPhone X's safe area adds unnecessary padding outside of the notch, and then double down on that mistake when they talk about their brand new `min()` and `max()` functions. These functions aren’t Apple’s and they're not new. There was a proposal a year ago to add them back to CSS, which means they were existed in some W3C or WHATWG specification proposal before that: https://github.com/w3c/csswg-drafts/issues/544 https://github.com/w3c/csswg-drafts/issues/544 The link in the article will take you to the current specification: https://drafts.csswg.org/css-values/#calc-notation https://drafts.csswg.org/css-values/#calc-notation

om2 9y ago
min() and max() are actually super useful beyond handling the iPhone X safe areas, here's a Tweet with some examples of other ways to use it: https://twitter.com/iamvdo/status/910074435159420928 https://twitter.com/iamvdo/status/910074435159420928 In brief, it lets you replace the "CSS locks" pattern which is a super awkward way to apply clamping to a flexible size. min()/max() makes it much easier.

chis 9y ago

Yeah it is surprising to see such a hacky design when they literally only had one use case. I also don’t understand why all browsers are adding css properties just to support the new iPhone, but maybe I don’t understand how this committee works.

alwillis 9y ago
It's not just for the iPhone X. There are browsers in refrigerators, e-readers, game consoles, smart TVs, kiosks and who knows what else. There will be lots of devices that can take advantage of these new properties, not just the iPhone X.