讓網站適配 iphone X

英文原文地址：https://webkit.org/blog/7929/...
本文原文地址：https://github.com/cnsnake11/...

The section below about safe area insets was updated on Oct 31, 2017 to reflect changes in the iOS 11.2 beta.

以下關于safe area insets的內容已經在20171031的時候進行了修改，會在ios 11.2beta中表現出來。

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.

無需任何修改，在ihponeX中safari可以將網頁顯示的很美觀。網頁的內容，會在safe area中顯示出來，所以，網頁的內容不會被圓角和設備的傳感器條擋住。

The inset area is filled with the page’s background-color (as specified on the <body>or <html> elements) to blend in with the rest of the page. For many websites, this is enough. If your page has only text and images above a solid background color, the default insets will look great.

安全區域以外的地方（也就是屏幕上下奇形怪狀的地方），會自動被填充背景色（在body或者html元素上定義的背景色）。在大多數情況下，這樣進行兼容就足夠了。只要你的頁面是固定背景色的，這種默認的填充方式就足夠用了。

Other pages — especially those designed with full-width horizontal navigation bars, like the page below — can optionally go a little further to take full advantage of the features of the new display. The iPhone X Human Interface Guidelines detail a few of the general design principles to keep in mind, and the UIKit documentation discusses specific mechanisms native apps can adopt to ensure that they look good. Your website can make use of a few similar new pieces of WebKit API introduced in iOS 11 to take full advantage of the edge-to-edge nature of the display.

另外的一些頁面，特別是那種有導航條的-可以有選擇的進行更深層次的優化來利用新的顯示特性。在ios11中，你的網站可以使用新的webkit api來適配顯示。

While reading this post you can tap on any of the images to visit a corresponding live demo page and take a peek at the source code.

本篇文章的圖片都可以點擊到對應的demo頁面。【注：請點擊原文中的圖片】

圖：safari默認的兼容行為。

Using the Whole Screen 使用全部的屏幕

The first new feature is an extension to the existing viewport meta tag called viewport-fit, which provides control over the insetting behavior. viewport-fit is available in iOS 11.

viewport標簽有一個新屬性viewport-fit，這個屬性可以控制視圖的顯示行為。viewport-fit在ios11上可以使用。

The default value of viewport-fit is auto, which results in the automatic insetting behavior seen above. In order to disable that behavior and cause the page to lay out to the full size of the screen, you can set viewport-fit to cover. After doing so, ourviewport meta tag now looks like this:

viewport-fit的默認值是auto，這個值的行為就像上面的截圖那些，頁面不會撐到屏幕邊緣。設置這個值為cover就會讓頁面覆蓋整個頁面，包括屏幕邊緣。示例代碼：

<meta name='viewport' content='initial-scale=1, viewport-fit=cover’>

After reloading, the navigation bar looks much better, running from edge to edge. However, it is immediately clear why it is important to respect the system’s safe area insets: some of the page’s content is obscured by the device’s sensor housing, and the bottom navigation bar is very hard to use.

頁面刷新之后，導航條已經可以撐滿屏幕邊緣了。同時，問題也很明顯：內容被傳感器條擋住了，并且，底部的導航條和虛擬按鍵也重疊了。

圖：Use viewport-fit=cover to fill the whole screen.使用viewport-fit=cover來鋪滿整個屏幕。

Respecting the Safe Areas 安全區域

The next step towards making our page usable again after adopting viewport-fit=cover is to selectively apply padding to elements that contain important content, in order to ensure that they are not obscured by the shape of the screen. This will result in a page that takes full advantage of the increased screen real estate on iPhone X while adjusting dynamically to avoid the corners, sensor housing, and indicator for accessing the Home screen.

在使用了viewport-fit=cover之后，需要在一些地方加padding來避免被遮擋。如果你能動態的適配iPhone X屏幕的圓角，頂部傳感器條，底部虛擬按鍵，那么就可以完全的享用到iPhone X的大屏幕。

圖：The safe and unsafe areas on iPhone X in the landscape orientation, with insets indicated.iPhone X的橫屏安全區域，及幾個固定變量的示意圖。

To achieve this, WebKit in iOS 11 includes a new CSS function, env(), and a set of four pre-defined environment variables, safe-area-inset-left, safe-area-inset-right, safe-area-inset-top, and safe-area-inset-bottom. When combined, these allow style declarations to reference the current size of the safe area insets on each side.

為了達成動態自適應的目的，ios 11 的webkit提供了一個新的css方法:env(),和有四個預先定義的環境變量，safe-area-inset-left, safe-area-inset-right, safe-area-inset-top, and safe-area-inset-bottom。使用這些變量，就可以獲得屏幕的安全區域距離屏幕邊緣的距離。

The env() function shipped in iOS 11 with the name constant(). Beginning with Safari Technology Preview 41 and the iOS 11.2 beta, constant() has been removed and replaced with env(). You can use the CSS fallback mechanism to support both versions, if necessary, but should prefer env() going forward.

env()方法是在ios11中被支持的，一開始他被命名為constant()。在Safari Technology Preview 41 and the iOS 11.2 beta的版本中，constant()已經被重命名為env()。你可以使用css的權重機制來適配所有的版本，如果不是必須的話，使用env()來適配最新的版本即可。

env() works anywhere var() does — for example, inside the padding properties:

env()使用的方式和var()基本一致，例如，在定義padding的時候：

.post {padding: 12px;padding-left: env(safe-area-inset-left);padding-right: env(safe-area-inset-right);
}

For browsers that do not support env(), the style rule that includes it will be ignored; for this reason, it is important to continue to separately specify fallback rules for any declarations using env().

當瀏覽器不支持env()的時候，這條樣式會失效；所以，要將這種使用env()的樣式，獨自定義。

圖：Respect safe area insets so that important content is visible.使用了環境變量的適配效果。

Bringing It All Together, With min() and max() 使用min()和max()

This section covers features that are available starting in Safari Technology Preview 41 and the iOS 11.2 beta.

本節講的內容在 Safari Technology Preview 41 and the iOS 11.2 beta中開始支持。

If you adopt safe area insets in your website design, you might notice that it is somewhat difficult to specify that you want a minimum padding in addition to the safe area inset. In the page above, where we replaced our 12px left padding with env(safe-area-inset-left), when we rotate back to portrait, the left safe area inset becomes 0px, and the text sits immediately adjacent to the screen edge.

當使用了安全區域變量，并不能解決所有的問題。比如，上面的頁面，當橫屏的時候， env(safe-area-inset-left)是有值的，當豎屏的時候，env(safe-area-inset-left)=0px，此時，文本就會擠到屏幕的邊緣了。

圖：Safe area insets are not a replacement for margins.使用Safe area insets帶來的問題。

To solve this, we want to specify that our padding should be the default padding or the safe area inset, whichever is greater. This can be achieved with the brand-new CSS functions min() and max() which will be available in a future Safari Technology Preview?release. Both functions take an arbitrary number of arguments and return the minimum or maximum. They can be used inside of calc(), or nested inside each other, and both functions allow calc()-like math inside of them.

解決這個問題，其實是需要給padding設置一個默認值，當safe-area-inset-left有值的時候，設置成safe-area-inset-left，沒值的時候使用默認值。我們可以使用一組新的css函數min() and max()來解決這個問題。這2個函數可以接受任意個數的參數，并返回最大或者最小的那個。他們也可以用到calc()中，也可以相互嵌套使用。

For this case, we want to use max():

解決上述問題的示例：

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

It is important to use @supports to feature-detect min and max, because they are not supported everywhere, and due to CSS’s treatment of invalid variables, to not specify a variable inside your @supports query.

注意：@supports語句可以檢查是否支持max，但不要在其中使用變量，例如：@supports(padding: max(env(safe-area-inset-left)))，因為css對待無效的變量是返回默認值，也就是這個例子中的padding的初始值。【此處具體的細節可以參考：https://drafts.csswg.org/css-...，本文最后也翻譯了一下這塊。】

In our example page, in portrait orientation, env(safe-area-inset-left) resolves to 0px, so the max() function resolves to 12px. In landscape, when env(safe-area-inset-left) is larger due to the sensor housing, the max() function will resolve to that size instead, ensuring that the important content within is always visible.

在上述的示例中，當豎屏時， env(safe-area-inset-left)是0，所以max函數返回了12px。當橫屏時，env(safe-area-inset-left)的值會大于12，所以，max函數會返回env(safe-area-inset-left)的值。這就保證了頁面的動態適應性。

圖：Use max() to combine safe area insets with traditional margins.使用max函數來保證豎屏的兼容。

Experienced web developers might have previously encountered the “CSS locks” mechanism, commonly used to clamp CSS properties to a particular range of values. Using min() and max() together makes this much easier, and will be very helpful in implementing effective responsive designs in the future.

min() and max()函數可以使用到更多的場景中，他們可以幫助開發者更容易的創建兼容性更好的頁面。

參考：無效變量的說明

原文地址：https://drafts.csswg.org/css-...

直接翻譯了3.1節中的例子，比較直觀

For example, in the following code:

例如，如下的代碼：

:root { --not-a-color: 20px; }
p { background-color: red; }
p { background-color: var(--not-a-color); }

the <p> elements will have transparent backgrounds (the initial value for background-color), rather than red backgrounds. The same would happen if the custom property itself was unset, or contained an invalid var() function.

p元素的背景將是transparent（也就是background-color的初始值），而不是紅色。這種變量值無效的情況和沒寫background-color的表現是一致的。

Note the difference between this and what happens if the author had just written background-color: 20px directly in their stylesheet - that would be a normal syntax error, which would cause the rule to be discarded, so the background-color: red rule would be used instead.

注意這種情況和直接寫錯background-color: 20px的區別，如果直接寫錯成ackground-color: 20px，會導致錯誤的這條樣式失效，background-color: red仍會生效。

Note: The invalid at computed-value time concept exists because variables can’t "fail early" like other syntax errors can, so by the time the user agent realizes a property value is invalid, it’s already thrown away the other cascaded values.

說明：不合法的變量值問題是因為變量的出錯時機是比較晚的，所以，當瀏覽器識別到變量值無效的時候，已經將其它的有效的之前定義的值拋棄了。