[amelius]

But in any case you can do that by making your website a little smaller on iphonex screens.

That's not the problem! That's one line of CSS.

The problem is that now we are expected to design for this non-rectangular screen, taking "advantage" of the little gaps at the sides, and perhaps fill them with little buttons in creative ways.

So that's the real problem.

This will cost us (developers) extra time.

Instead, I think Apple would have done a better job if they filled those corners with system icons.

[alwillis]

This will cost us (developers) extra time.

I just added 'viewport-fit=cover' to my project and boy am I tired! ;-)

In the words of Aaron Rogers: relax.

The CSS frameworks (Foundation, Bootstrap, etc.) will have this baked in the next time they're updated.

Compared to the drama we as web developers have dealt with in the past, this is pretty minor. Apple gives you the CSS you need:

  @supports(padding: max(0px)) {
     .post {
        padding-left: max(12px, constant(safe-area-inset-left));
        padding-right: max(12px, constant(safe-area-inset-right));
     }
  }

And if you have a recent Mac, you can test it in Xcode 9's iPhone X simulator.

We as developers have plenty of time: the iPhone X can't be preordered until October 27; the first customers won't have them until November 3rd at the earliest: https://www.apple.com/shop/buy-iphone/iphone-x

I think we're going to be okay.

[amelius]

Just wait until everybody else starts filling those gaps with cute little icons. Your boss will come in one morning, ordering you to move the buttons from the main page to the corners, but of course only for the iphonex. And before you know it, you'll be spending a day on boring CSS work, and several days in the future on maintenance and compatibility problems. You're not a technologist anymore; you've become a slave of fashion trends.

[rhencke]

Thinking up disastrous conclusions to a cosmetic, optional, opt-in style feature affecting a very low percentage of your audience is a bit dramatic, no?

[amelius]

It seems like a quite realistic scenario to me.

[alwillis]

The only other change is the W3C decided to rename "constant" to "env", since these are essentially environment variables for browsers.

You can read all about it at https://github.com/w3c/csswg-drafts/issues/1693#issuecomment...

[arrty88]

How many websites do you manage? How many wordpress installs and custom themes have to be updated?

[alwillis]

None; it letterboxes the website by default: https://webkit.org/blog/7929/designing-websites-for-iphone-x...

Out of the box, Safari displays your existing websites beautifully on the edge-to-edge display of the new iPhone X. Content is automatically inset within the display’s safe area so it is not obscured by the rounded corners, or the device’s sensor housing.

[mch82]

Does Apple want people to design custom websites for iPhone X, or is it more likely Apple want's people to make iOS apps instead of websites when that level of tailoring matters?

I still use the web on an iPhone 5S. Even with cropping bars at the top and bottom of a website, the iPhone X view will be improved over the 5S view and it'll look exactly like a website looks on my 5S today - rectangular website framed by a black bezel with rounded corners.

[alwillis]

Safari automatically insets your webpage, so you don't have to do anything if you don't want to unless you want to use the full area.