为什么 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>

以及CSS 文件：

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

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中文网其他相关文章！