為什麼 CSS3 的 `attr()` 函數在現代瀏覽器中失敗？

CSS3 的attr() 函數在主要瀏覽器中出現故障

儘管W3C 規範另有聲明，Firefox 用戶在嘗試使用時可能會遇到錯誤attr() 函數。

語法錯誤：

以下 CSS：

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

將在 Firebug 中產生語法錯誤。

失敗原因：

檢查CSS 語法後，很明顯屬性名稱和單位之間的逗號應該是省略：

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

但是，即使使用正確的語法，錯誤仍然存在。

缺乏實作：

不幸的是，截至 2020 年，在任何主要瀏覽器中都沒有已知的 3 級 attr() 函數實作。儘管存在風險，該功能仍保留在 CSS 規範的編輯草案中。

實施倡議：

希望看到此功能在未來可以透過相關回饋管道表達支援。目前的提案包括：

• Microsoft Edge 平台：目前正在考慮

注意：

attr 的基本版本Level 2.1 版本() 廣泛支持，並與產生內容的content 屬性一起使用。

以上是為什麼 CSS3 的 `attr()` 函數在現代瀏覽器中失敗？的詳細內容。更多資訊請關注PHP中文網其他相關文章！