Hacker News new | ask | show | jobs
by alwillis 3194 days ago
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.

3 comments

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.
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?
It seems like a quite realistic scenario to me.
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...

How many websites do you manage? How many wordpress installs and custom themes have to be updated?
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.