CSS 函式 - env()

CSS 中的 env() 函式可用於向 CSS 中的使用者定義環境變數新增值，就像 var() 函式和其他自定義屬性一樣。環境變數通常由使用者代理（例如，Web 瀏覽器）提供，並可用於 CSS 中，以根據各種因素（例如裝置特性或使用者偏好）調整樣式。

環境變數可以用於屬性值的任何部分或描述符的任何部分，例如在媒體查詢規則中。

可能的值

env() 函式可以具有以下值：

safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom, safe-area-inset-left：這些變數透過其距視口邊緣的頂部、右側、底部和左側內邊距來定義一個矩形。
- 這些內邊距是放置內容的安全區域，不會被非矩形顯示的形狀裁剪。
- 對於矩形視口（例如筆記型電腦顯示器），該值保持為零。
- 對於非矩形顯示（例如手錶錶盤），這四個值被設定為建立矩形，以便內容在矩形內清晰可見。
titlebar-area-x, titlebar-area-y, titlebar-area-width, titlebar-area-height：用於安裝在桌面裝置上的 PWA。這些變數不允許內容與視窗控制按鈕（最小化、最大化和關閉）重疊。
keyboard-inset-top, keyboard-inset-right, keyboard-inset-bottom, keyboard-inset-left, keyboard-inset-width, keyboard-inset-height：說明了螢幕虛擬鍵盤外觀的詳細資訊。這些變數透過其距視口邊緣的頂部、右側、底部和左側內邊距來定義一個矩形。寬度和高度內邊距是根據其他內邊距值測量的。

與其他 CSS 屬性不同，使用者定義的屬性名稱區分大小寫。

語法

property: env(variable-name, [fallback]);

變數名：環境變數的名稱。
[回退值]：（可選）如果未定義環境變數，則使用回退值。

回退值的語法允許使用逗號，就像其他自定義屬性一樣。但是，如果屬性值不支援逗號，則該值被視為無效。

all 屬性不會重置使用者定義的屬性。

CSS env() - 值的組合

以下示例演示了使用 env() 函式以及值 safe-area-inset-top、safe-area-inset-right、safe-area-inset-bottom、safe-area-inset-left。

<html>
<head>
<style>
   .text-style {
      background-color: darkblue;
      width: max-content;
      color: white;
      font-size: 25px;
      border: env(SAFE-AREA-INSET-TOP, 10px) inset lightblue;
      padding: 10px;
      padding: env(SAFE-AREA-INSET-TOP, 2.5em)
               env(SAFE-AREA-INSET-RIGHT, 2.5em) 
               env(SAFE-AREA-INSET-BOTTOM, 2.5em) 
               env(SAFE-AREA-INSET-LEFT, 2.5em)
   }
</style>
</head> 
<body>
    <h2>env() function example</h2>
    <p class="text-style">padding added through environment variables</p>
</body>
</html>

列印頁面