[YooLi]

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.

Default behavior is for you to do nothing to your code and Safari on the X will automatically pad around the inset and rounded corners. This is just if you _want_ to take advantage of the whole screen.

[ynniv]

Device specific extra pixels were a bad idea. Further modifying web design standards to account for them is making the problem ten times as bad. Where's the CSS declaration that tells Safari to make those pixels black so no one has to care about this? Unplanned sections of background color around your header bar is not "displaying existing websites beautifully".

[SiVal]

Whether or not Apple does this, others will. The web platform needs a well-considered generic approach to non-rectangular displays to support a widening array of devices: watches, medical devices, decorative displays, industrial controls, e-paper-type displays wrapped around a pipe, etc. They could have multiple panels of different sizes, have holes in the middle (not just the edge), be extremely curved, or whatever.

I'm fine with learning new, standard techniques for dealing with a broadening range of opportunities, but it's annoying to have to learn and incorporate Apple-only technologies in my web apps. But if the standard platform doesn't have a solution, Apple will solve it themselves.

[alwillis]

Apple is using W3C blessed standards:

* https://github.com/w3c/csswg-drafts/issues/1693#issuecomment...

* https://drafts.csswg.org/css-values/#calc-notation

* https://www.w3.org/TR/css-round-display-1/#viewport-fit-desc... (Apple is doing the meta tag version of the @viewport descriptor)

[bfred_it]

> Apple is doing the meta tag version of the @viewport descriptor

Which means they are in fact NOT using W3C blessed standards.

[om2]

> Where's the CSS declaration that tells Safari to make those pixels black so no one has to care about this?

  body { background-color: black; }

[Walf]

I will definitely be implementing this.

[pbreit]

OK, I'll say it: this would not have happened under Steve.

[amrrs]

Yes, Because Steve Jobs is akin to Jeff Bezos, can run a company focusing on consumer needs rather than lust for wall street. While Tim Cook's job is running the company from Front while also giving hope the shareholders much of what Ballmer Schmidt did.

Maybe this is high time for us to get over this thought, Oh Steve wouldn't have done that. In fact, Steve launched the iPod with a scrolling ball.

Steve launched an iPhone with antennagate.

Steve launched Newton.

Steve, with all due respect, had made his share of mistakes too. He's with no doubt a good product visionary, but Tim Cook's objective isn't to be Steve but to be Apple CEO.

[alwillis]

In fact, Steve launched the iPod with a scrolling ball.

It was a click wheel, not a scrolling ball. Even now, the click-wheel would be a good UX: https://en.wikipedia.org/wiki/IPod_click_wheel

Steve launched Newton.

Come on now--Steve was at NeXT when the Newton was released. John Sculley launched the Newton.

Steve launched an iPhone with antennagate.

As Apple and Steve demonstrated, most smartphones at that time did the same thing as the iPhone 4; the only difference was it was Apple and not Nokia or Blackberry. And also because Steve was pretty blunt about his feelings and didn't do the corporate CEO thing any other Fortune 500 CEO would have done--https://www.youtube.com/watch?v=IorfYuF4gMM

[CodeWriter23]

The click wheel came at v2 or v3. The original had a scroll wheel which actually spun, with buttons around the perimeter.

[Semiapies]

The click-wheel was great. I miss having such a simple, haptic interface.

[tapoxi]

Steve didn't launch Newton, it came out in '93. He did kill it though.

[aljones]

Steve said not to think "what would Steve do".

I doubt you could predict what Steve would do when he was alive.

[johansch]

A lot of things wouldn't have. Top of my list:

a) keeping the macbook air non-retina (for like five years after PC laptops were retina, even after the incremental cost for the feature was very, very close to zero due to industry-wide cost reductions in display/chipset tech)

b) shipping the new macbook pro with the touch bar

c) shipping the new macbook pro with that keyboard that just breaks down when used outside of a cleanroom

d) the whole luxuary/jewelry transition of the company

[iainmerrick]

d) the whole luxury/jewelry transition of the company

This Steve Jobs? https://www.cultofmac.com/270831/steve-jobs-luxury-yacht-spo...

I don't know where people get the idea that Jobs was always right. He was a master of changing his entire opinion on a dime (usually for good reasons, to be fair) but still acting as if he'd been right the whole time.

[johansch]

I really don't see the correlation between his product design/marketing/pricing choices and him owning a yacht? Are you saying I thought he was a closet socialist/communist? (No, I did not. (hah))

The whole thing is that being a jewelry company is intensely boring and mentally uninspiring. Not pushing things forward in any way or manner. Just making them more luxorious in order to increase the margin of the existing market.

How many iterations before we see diamond-encrusted iPhones?

[mikeash]

e) Making product lineups huge and confusing. Once the X becomes available, they'll have eight different models of iPhone you can buy, and that's not even counting different colors or storage options.

[johansch]

Yeah, this choice has been bothering me insanely the last year. I am still on a 5s simply because I can't choose the right model/time. ;(

Still, in my mind, the largest betrayal of Steve's legacy is the way the affordable and awesome Macbook Air design was left to rot. It was such a liberating and democratic thing that the best laptop money could buy cost less than a thousand USD.

The low price also afforded you to not treat them as super expensive objects (which was also liberating) - I actually managed to physically kill two or three of them over the years, until I moved to a 13" MBP this spring. Which I now have to protect like a jewel, which I hate doing. I want my work station to be a tank, not a fashion piece.

All because Apple without Steve couldn't/wouldn't take risks and be innovative (in pricing) in order to expand in the laptop market. Safer for the margins to avoid expanding the user base and instead just milk the already converted suckers.

[johansch]

(Interesting, after meeting the wave of slower readers, all of my comments in this thread were massively downvoted except this one, I guess since I was initially agreeing with someone on HN who is "famous".)

Stay meritocratic, Silicon Valley. Every post is evaluated for its worth, not its sender.

[alwillis]

Making product lineups huge and confusing. Once the X becomes available, they'll have eight different models of iPhone you can buy, and that's not even counting different colors or storage options.

What iPhone you get is driven by the economics of what you can afford and your personal taste. It's not that complicated.

There are 5 models:

- iPhone SE - iPhone 6s/6s+ - iPhone 7/7+ - iPhone 8/8+ - iPhone X

It seems that Apple can't win even when they do what most people have wanted for a while: more options at more price points.

If you want to be confused, try to pick among Samsung's phones, some of which are only available on certain carriers or in certain countries and running different versions of the Android operating system.

From the SE to the iPhone X, they all run iOS 11.

[mikeash]

The + and non-+ versions are effectively different models, thus eight.

And it seems pretty complicated to me. I imagine a non-technical friend or relative asking me what they should get. In the past, the answer was pretty simple: decide whether you wanted big or small, and get the latest available in that size. Before the 6, I didn't even need that first step. Apple has kept the previous year's model around at a lower price for a long time, but with limited storage options it was obviously positioned as being only for people who couldn't afford to pay any more.

This year I can't even decide for myself whether to get a X, an 8, or just stick with my 6+. If someone asks me whether the X is worth the price premium over the 8, or the 8 over the 7, I won't know what to say.

"It seems that Apple can't win even when they do what most people have wanted for a while: more options at more price points."

I don't understand this statement. Are you surprised that different people have different opinions?

[alwillis]

Apple has kept the previous year's model around at a lower price for a long time, but with limited storage options it was obviously positioned as being only for people who couldn't afford to pay any more.

Or who didn't need or want anything more. Most of my older relatives would be with a 16 or 32GB iPhone SE for example.

This year I can't even decide for myself whether to get a X, an 8, or just stick with my 6+. If someone asks me whether the X is worth the price premium over the 8, or the 8 over the 7, I won't know what to say.

Yeah, I get the price/performance thing, but at the end of the day, it comes down to do you want the latest and greatest? Is that something you're willing to pay for?

When Apple Pay shipped, I knew I wanted an iPhone that could do that, so I got a 6s, even though I could have gotten a lower-end model. I knew I didn't want something as big as the 6s Plus, so I didn't get that, even with its dual camera setup, because the photos I can take on the 6s are good enough for me.

It's not a matter of is the price premium of the X worth it vs. the 8 in some objective way; is it worth it to you is all that really matters.

If you can't figure out what to buy, that says to me you haven't gotten clear about what you need vs. what you want and what you're willing to pay for those needs and wants.

Touch-ID works great for me, so I don't need Face-ID. However, I'd love to have an OLED screen iPhone but I'm not willing to pay $999 for it at this time.

Timing is a factor too. If you need a new iPhone right now, that means waiting until December or longer to get an iPhone X isn't really an option, especially if there's a hard deadline. Apple won't achieve supply/demand balance until Q1 or Q2 of 2018.

In some cases, these decisions make themselves.

[alwillis]

The + and non-+ versions are effectively different models, thus eight.

Besides the size, the only difference are the camers between the Plus and non-Plus models.

[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.

[mrks_]

Too bad more people aren't reading this before whingeing in the comments.

[bhauer]

Well, except that the default behavior pulls the background color into the irregular areas, which will probably yield some unexpected and less than desired results for sites that don't expect the background color to fill space to the left and right of the content.

I think a more sensible default would have been to fill the irregular space with black to create a letterboxed appearance. Basically reduce the irregular space to inactive unless specifically requested by the site's designer.

[amelius]

Yes, black with system icons would have been better.

PS: Does it also extend the "background-image" property?

[didgeoridoo]

After a bit of experimentation, this seems to work to create a letterbox (really pillarbox) effect, as long as you don't add their new viewport-fit property.

  html {
    background-color: black;
  }

[jclardy]

Yeah, I really don't understand Apple's aversion to using black on their first phone with an OLED display. Nearly all of Apple's built in apps have kept their bright white UI's.

[johansch]

Ives is kinda obsessed with white in case you hadn't noticed.

[mrks_]

There are a fair amount of reasonable concerns and suggestions in this thread (at least, now there are).

I agree, I would've liked to see a letterboxed solution, similar to what they do for fullscreen video.

[robocat]

I believe the same colour is used to fill the blank area due to scroll bounce.

[SnowingXIV]

Appreciate the quick summary. Was thinking I was going to have start editing a bunch of media queries.

[throwaway2016a]

I think it would be much better if it was black on the edge like a letter boxed video.