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