8 ms·

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 di

by YooLi 9y ago

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.

mrks_ 9y ago
Too bad more people aren't reading this before whingeing in the comments.
- bhauer 9y ago
  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.
  - deleted 9y ago
    [deleted]
  - amelius 9y ago
    Yes, black with system icons would have been better. PS: Does it also extend the "background-image" property?
  - mrks_ 9y ago
    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.
  - jclardy 9y ago
    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 9y ago
      Ives is kinda obsessed with white in case you hadn't noticed.
  - didgeoridoo 9y ago
    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; }
  - robocat 9y ago
    I believe the same colour is used to fill the blank area due to scroll bounce.
ynniv 9y ago
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 9y ago
  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 9y ago
    Apple is using W3C blessed standards: * https://github.com/w3c/csswg-drafts/issues/1693#issuecomment-330909067 https://github.com/w3c/csswg-drafts/issues/1693#issuecomment... * https://drafts.csswg.org/css-values/#calc-notation https://drafts.csswg.org/css-values/#calc-notation * https://www.w3.org/TR/css-round-display-1/#viewport-fit-descriptor 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 9y ago
      > Apple is doing the meta tag version of the @viewport descriptor Which means they are in fact NOT using W3C blessed standards.
- om2 9y ago
  > 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; }
amelius 9y ago
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 9y 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 https://www.apple.com/shop/buy-iphone/iphone-x I think we're going to be okay.
  - alwillis 9y ago
    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-330909067 https://github.com/w3c/csswg-drafts/issues/1693#issuecomment...
  - amelius 9y ago
    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.
pbreit 9y ago
OK, I'll say it: this would not have happened under Steve.
- johansch 9y ago
  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
  - mikeash 9y ago
    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 9y ago
      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.
      - 9y ago
throwaway2016a 9y ago
I think it would be much better if it was black on the edge like a letter boxed video.
SnowingXIV 9y ago
Appreciate the quick summary. Was thinking I was going to have start editing a bunch of media queries.

by YooLi 9y ago

mrks_ 9y ago

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

bhauer 9y ago
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.
- deleted 9y ago
  [deleted]
- amelius 9y ago
  Yes, black with system icons would have been better. PS: Does it also extend the "background-image" property?
- mrks_ 9y ago
  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.
- jclardy 9y ago
  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 9y ago
    Ives is kinda obsessed with white in case you hadn't noticed.
- didgeoridoo 9y ago
  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; }
- robocat 9y ago
  I believe the same colour is used to fill the blank area due to scroll bounce.

ynniv 9y ago

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 9y ago
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 9y ago
  Apple is using W3C blessed standards: * https://github.com/w3c/csswg-drafts/issues/1693#issuecomment-330909067 https://github.com/w3c/csswg-drafts/issues/1693#issuecomment... * https://drafts.csswg.org/css-values/#calc-notation https://drafts.csswg.org/css-values/#calc-notation * https://www.w3.org/TR/css-round-display-1/#viewport-fit-descriptor 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 9y ago
    > Apple is doing the meta tag version of the @viewport descriptor Which means they are in fact NOT using W3C blessed standards.
om2 9y ago
> 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; }

amelius 9y ago

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 9y 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 https://www.apple.com/shop/buy-iphone/iphone-x I think we're going to be okay.
- alwillis 9y ago
  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-330909067 https://github.com/w3c/csswg-drafts/issues/1693#issuecomment...
- amelius 9y ago
  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.

pbreit 9y ago

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

johansch 9y ago
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
- mikeash 9y ago
  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 9y ago
    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.
    - 9y ago

throwaway2016a 9y ago

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

SnowingXIV 9y ago

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