首页 > web前端 > css教程 > 为什么 CSS3 的 `attr()` 函数在主流浏览器中不能按预期工作?

为什么 CSS3 的 `attr()` 函数在主流浏览器中不能按预期工作?

Susan Sarandon
发布: 2024-12-18 04:32:12
原创
788 人浏览过

Why Doesn't CSS3's `attr()` Function Work as Expected in Major Browsers?

主流浏览器不支持 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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板