CSS内容:HTML5进度上的attr()不起作用

<progress max="100" value="80" data-value="5"></progress>

progress { margin: 50px; width:250px; border:0; }

CSS(尝试1)

progress:before, progress:after { content: attr(data-value); }

CSS(尝试2)

progress::-webkit-progress-bar:before,

progress::-webkit-progress-bar:after { content: attr(data-value); }

progress::-moz-progress-bar:before,

progress::-moz-progress-bar:after { content: attr(data-value); }

CSS(尝试3)

progress::-webkit-progress-value:before,

progress::-webkit-progress-value:after { content: attr(data-value); }

progress::-moz-progress-value:before,

progress::-moz-progress-value:after { content: attr(data-value); }

上述尝试均未成功。还尝试使用不同的CSS代码块for :before和以上每个版本:after

HTML5<progress>元素之前和之后注入CSS生成的内容。这可能吗?

JsFiddle演示

http://jsfiddle.net/pankajparashar/MNL2C/

当我使用以下CSS时,它可以工作。

progress::-webkit-progress-bar:before,

progress::-webkit-progress-bar:after { content: '123'; }

显然,当我们在CSS中注入静态内容时,它可以工作。但是,如果我们使用其中的内容,data-*则不会。

回答:

在我的原始评论中,我说:

我认为这是不可能的,因为progress如果浏览器已经可以绘制进度条,则元素中的内容就永远不会显示,类似于objector中的内容iframe

换句话说,这被归类progress为一个替换元素。就像传统的input元素和其他被替换的元素一样img,CSS2.1对于将生成的内容与其一起使用也没什么多说的:

该规范并未完全定义:before和:after与替换元素(例如HTML中的IMG)的交互。这将在以后的规范中更详细地定义。

众所周知,基于Gecko的浏览器选择不支持为替换元素生成的内容,而基于WebKit的浏览器在某种程度上允许它生成内容,至少对于作为替换元素的表单元素而言。(有趣的是,progress::beforeprogress::after没有在工作的

任何 浏览器。)所以,如果你问,如果有可能这样做跨浏览器的,答案是否定的,而且一直没有。


至于为什么WebKit浏览器可以插入字符串而不是attr()值,我不确定。既CSS2.1和CSS3单位和数值这种状态attr()应该从实际元素产生的那些伪元素的属性值,因为伪元素不能有属性本身 无论如何 。这就是我感到难过的地方。

也许浏览器错误地尝试data-value从中::-webkit-progress-bar::-webkit-progress-

value不是从progress元素中获取属性,这就是为什么content在使用attr()时失败但在使用字符串时起作用的原因。

问题的根源可能在于您正试图将生成的内容添加到其他伪元素中,无论出于什么奇怪的原因,这似乎都可以在WebKit浏览器中使用。与上面的问题不同,替换元素中生成了内容,当前的Selectors3规范和即将推出的Selectors4规范对此都非常清楚:每个复杂的选择器不应有一个以上的伪元素。当然,在实现伪元素时,WebKit臭名昭著地违反了各种规则,因此事后看来,看到WebKit搞砸了这些并不足为奇。

无论哪种方式,真正的结论是CSS生成的内容的实现远远超出了CSS2.1 +

Selectors当前标准的范围,我的意思是指替换元素(例如input和)的生成内容progress以及伪元素的嵌套在单个选择器中。

以上是 CSS内容:HTML5进度上的attr()不起作用 的全部内容, 来源链接: utcz.com/qa/430579.html

回到顶部