摘要：解決上述問(wèn)題的示例注意語(yǔ)句可以檢查是否支持，但不要在其中使用變量，例如，因?yàn)閷?duì)待無(wú)效的變量是返回默認(rèn)值，也就是這個(gè)例子中的的初始值。在上述的示例中，當(dāng)豎屏?xí)r，是，所以函數(shù)返回了。

英文原文地址：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.

以下關(guān)于safe area insets的內(nèi)容已經(jīng)在20171031的時(shí)候進(jìn)行了修改，會(huì)在ios 11.2beta中表現(xiàn)出來(lái)。

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.

無(wú)需任何修改，在ihponeX中safari可以將網(wǎng)頁(yè)顯示的很美觀(guān)。網(wǎng)頁(yè)的內(nèi)容，會(huì)在safe area中顯示出來(lái)，所以，網(wǎng)頁(yè)的內(nèi)容不會(huì)被圓角和設(shè)備的傳感器條擋住。

The inset area is filled with the page’s background-color (as specified on the or 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.

安全區(qū)域以外的地方（也就是屏幕上下奇形怪狀的地方），會(huì)自動(dòng)被填充背景色（在body或者h(yuǎn)tml元素上定義的背景色）。在大多數(shù)情況下，這樣進(jìn)行兼容就足夠了。只要你的頁(yè)面是固定背景色的，這種默認(rèn)的填充方式就足夠用了。

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.

另外的一些頁(yè)面，特別是那種有導(dǎo)航條的-可以有選擇的進(jìn)行更深層次的優(yōu)化來(lái)利用新的顯示特性。在ios11中，你的網(wǎng)站可以使用新的webkit api來(lái)適配顯示。

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.

本篇文章的圖片都可以點(diǎn)擊到對(duì)應(yīng)的demo頁(yè)面。【注：請(qǐng)點(diǎn)擊原文中的圖片】

圖：safari默認(rèn)的兼容行為。

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標(biāo)簽有一個(gè)新屬性viewport-fit，這個(gè)屬性可以控制視圖的顯示行為。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的默認(rèn)值是auto，這個(gè)值的行為就像上面的截圖那些，頁(yè)面不會(huì)撐到屏幕邊緣。設(shè)置這個(gè)值為cover就會(huì)讓頁(yè)面覆蓋整個(gè)頁(yè)面，包括屏幕邊緣。示例代碼：

showImg("https://segmentfault.com/img/bVX5cH?w=2211&h=1100");

圖：Use viewport-fit=cover to fill the whole screen.使用viewport-fit=cover來(lái)鋪滿(mǎn)整個(gè)屏幕。
Respecting the Safe Areas 安全區(qū)域
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來(lái)避免被遮擋。如果你能動(dòng)態(tài)的適配iPhone X屏幕的圓角，頂部傳感器條，底部虛擬按鍵，那么就可以完全的享用到iPhone X的大屏幕。

圖：The safe and unsafe areas on iPhone X in the landscape orientation, with insets indicated.iPhone X的橫屏安全區(qū)域，及幾個(gè)固定變量的示意圖。
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.
為了達(dá)成動(dòng)態(tài)自適應(yīng)的目的，ios 11 的webkit提供了一個(gè)新的css方法:env(),和有四個(gè)預(yù)先定義的環(huán)境變量，safe-area-inset-left, safe-area-inset-right, safe-area-inset-top, and safe-area-inset-bottom。使用這些變量，就可以獲得屏幕的安全區(qū)域距離屏幕邊緣的距離。
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中被支持的，一開(kāi)始他被命名為constant()。在Safari Technology Preview 41 and the iOS 11.2 beta的版本中，constant()已經(jīng)被重命名為env()。你可以使用css的權(quán)重機(jī)制來(lái)適配所有的版本，如果不是必須的話(huà)，使用env()來(lái)適配最新的版本即可。
env() works anywhere var() does — for example, inside the padding properties:
env()使用的方式和var()基本一致，例如，在定義padding的時(shí)候：
.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().
當(dāng)瀏覽器不支持env()的時(shí)候，這條樣式會(huì)失效；所以，要將這種使用env()的樣式，獨(dú)自定義。

圖：Respect safe area insets so that important content is visible.使用了環(huán)境變量的適配效果。
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.
本節(jié)講的內(nèi)容在 Safari Technology Preview 41 and the iOS 11.2 beta中開(kāi)始支持。
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.
當(dāng)使用了安全區(qū)域變量，并不能解決所有的問(wèn)題。比如，上面的頁(yè)面，當(dāng)橫屏的時(shí)候， env(safe-area-inset-left)是有值的，當(dāng)豎屏的時(shí)候，env(safe-area-inset-left)=0px，此時(shí)，文本就會(huì)擠到屏幕的邊緣了。

圖：Safe area insets are not a replacement for margins.使用Safe area insets帶來(lái)的問(wèn)題。
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.
解決這個(gè)問(wèn)題，其實(shí)是需要給padding設(shè)置一個(gè)默認(rèn)值，當(dāng)safe-area-inset-left有值的時(shí)候，設(shè)置成safe-area-inset-left，沒(méi)值的時(shí)候使用默認(rèn)值。我們可以使用一組新的css函數(shù)min() and max()來(lái)解決這個(gè)問(wèn)題。這2個(gè)函數(shù)可以接受任意個(gè)數(shù)的參數(shù)，并返回最大或者最小的那個(gè)。他們也可以用到calc()中，也可以相互嵌套使用。
For this case, we want to use max():
解決上述問(wèn)題的示例：
@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語(yǔ)句可以檢查是否支持max，但不要在其中使用變量，例如：@supports(padding: max(env(safe-area-inset-left)))，因?yàn)閏ss對(duì)待無(wú)效的變量是返回默認(rèn)值，也就是這個(gè)例子中的padding的初始值?！敬颂幘唧w的細(xì)節(jié)可以參考：https://drafts.csswg.org/css-...，本文最后也翻譯了一下這塊?！?/p>
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.
在上述的示例中，當(dāng)豎屏?xí)r， env(safe-area-inset-left)是0，所以max函數(shù)返回了12px。當(dāng)橫屏?xí)r，env(safe-area-inset-left)的值會(huì)大于12，所以，max函數(shù)會(huì)返回env(safe-area-inset-left)的值。這就保證了頁(yè)面的動(dòng)態(tài)適應(yīng)性。

圖：Use max() to combine safe area insets with traditional margins.使用max函數(shù)來(lái)保證豎屏的兼容。
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()函數(shù)可以使用到更多的場(chǎng)景中，他們可以幫助開(kāi)發(fā)者更容易的創(chuàng)建兼容性更好的頁(yè)面。
參考：無(wú)效變量的說(shuō)明
原文地址：https://drafts.csswg.org/css-...
直接翻譯了3.1節(jié)中的例子，比較直觀(guān)
For example, in the following code:
例如，如下的代碼：
:root { --not-a-color: 20px; }
p { background-color: red; }
p { background-color: var(--not-a-color); }

the 
 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的初始值），而不是紅色。這種變量值無(wú)效的情況和沒(méi)寫(xiě)background-color的表現(xiàn)是一致的。
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.
注意這種情況和直接寫(xiě)錯(cuò)background-color: 20px的區(qū)別，如果直接寫(xiě)錯(cuò)成ackground-color: 20px，會(huì)導(dǎo)致錯(cuò)誤的這條樣式失效，background-color: red仍會(huì)生效。
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.
說(shuō)明：不合法的變量值問(wèn)題是因?yàn)樽兞康某鲥e(cuò)時(shí)機(jī)是比較晚的，所以，當(dāng)瀏覽器識(shí)別到變量值無(wú)效的時(shí)候，已經(jīng)將其它的有效的之前定義的值拋棄了。