如何在 Internet Explorer 11 中使用 CSS 變數？

IE11 中的CSS 變數相容性

CSS 變數提供了一種在CSS 程式碼中定義和重複使用變數的便捷方法，但它們本身並不是Internet Explorer 11 (IE11) 支援。這給需要在應用程式中支援舊版瀏覽器的開發人員帶來了挑戰。

解：CSS 變數 Ponyfill

幸運的是，有一個以下形式的解：一個名為 CSS Variables Ponyfill 的 polyfill。該程式庫允許您在 IE11 和其他本身不支援 CSS 的瀏覽器中使用 CSS 變數。

特性與功能

CSS 變數 Ponyfill 提供了廣泛的功能，包括：

• 客戶端將 CSS自訂屬性轉換為靜態值
• 現代和舊版瀏覽器中運行時值的即時更新
• 、
• 支援鍊式和巢狀var() 函數
• 支援var() 函數回退值
• 支援Web組件/影子DOM CSS
• 上的觀看模式自動更新和更改
• 輕量級（6k min gzip）且無依賴

用法

要使用CSS 變數Ponyfill，只需將其包含在您的HTML 文件位於任何其他CSS 之前文件：

<script src="https://unpkg.com/css-vars-ponyfill/dist/css-vars-ponyfill.min.js"></script>

示例

以下是一些如何使用CSS 變數Ponyfill 在IE11 中建立和使用CSS 變數的範例：

根級自訂屬性

:root {
    --a: red;
}

p {
    color: var(--a);
}

鍊式自訂屬性

:root {
    --a: var(--b);
    --b: var(--c);
    --c: red;
}

p {
    color: var(--a);
}

嵌套>自訂屬性

:root {
    --a: 1em;
    --b: 2;
}

p {
    font-size: calc(var(--a) * var(--b));
}

透過使用CSS 變量Ponyfill，您可以利用 CSS 變數的優勢IE11 並確保您的網頁在所有支援的瀏覽器中一致呈現。

以上是如何在 Internet Explorer 11 中使用 CSS 變數？的詳細內容。更多資訊請關注PHP中文網其他相關文章！