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