為什麼 CSS3 的 `attr()` 函數在主流瀏覽器中無法如預期般運作？

主流瀏覽器不支援CSS3 的attr() 函數

在HTML 文件中：

<a class="wbutton tint" data-tint="rgba(255,0,0,.5)" href="#">This should be red, with an opacity of 0.5</a>

在HTML 文件中：

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

以及CSS 檔案：

Firefox 在下列位置顯示CSS 錯誤螢火蟲。根據 W3C 規範，attr() 函數應該可以工作，但事實並非如此。

為什麼它不起作用

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

規範中指定的語法需要刪除屬性名稱和要使用的單位之間的逗號：

但是，即使使用正確的語法， attr() 函數仍然無法運作。截至 2020 年，

在任何主要瀏覽器中都沒有已知的 3 級版本的 attr() 實作。

在哪裡報告問題

• 如果您希望看到此功能實現，可以在相關反饋中建議頻道：

Microsoft Edge平台（目前考慮中）

注意：完全支援 attr() 函數的基本 Level 2.1 版本跨所有主要瀏覽器的最新版本。但是，它與產生內容的 :before 和 :after 偽元素的 content 屬性一起使用。

以上是為什麼 CSS3 的 `attr()` 函數在主流瀏覽器中無法如預期般運作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！