CSS3 的 `attr()` 函數是一個神話嗎？ 瀏覽器相容性和實作概覽。

CSS3 的attr() 函數：各大瀏覽器中的幻象

許多開發者在使用CSS3 attr() 函數時遇到了困難，特別是在火狐。儘管已包含在 W3C 規範中，但它仍然是一個未實現的功能。

語法和範例

attr() 函數的語法如下：

attr( <attr-name> <type-or-unit>? [ , <fallback> ]? )</fallback></type-or-unit></attr-name>

例如，以下CSS程式碼嘗試根據元素的值設定邊框顏色和框陰影data-tint屬性：

.window > .content .wbutton.tint {
    border: solid thin attr(data-tint, color);
    box-shadow: inset 0 0 50px attr(data-tint, color);
}

為什麼不起作用

儘管滿足規範的要求，但此程式碼無法運作，因為 Level 3 版本attr()引入了指定類型或單位的能力，但未在任何主要版本中實現browser.

當前實現狀態

截至2020 年，沒有已知的3 級attr() 函數實作。在最新的規範編輯草案中，它仍然存在風險。

瀏覽器支援

attr() 的 2.1 等級版本，與 content 屬性一起使用對於產生的內容，所有主要瀏覽器都完全支援。 MDN 瀏覽器相容性表格僅適用於此版本，不適用於 Level 3 版本。

Call to Action

希望看到Level 3 attr() 函數的開發者已實施的可以透過以下管道提供回饋：

• Microsoft Edge 平台：目前正在考慮中（感謝Lea維魯！）

以上是CSS3 的 `attr()` 函數是一個神話嗎？ 瀏覽器相容性和實作概覽。的詳細內容。更多資訊請關注PHP中文網其他相關文章！