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

前端之家收集整理的这篇文章主要介绍了CSS内容:HTML5进度上的attr()不起作用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
HTML
<progress max="100" value="80" data-value="5"></progress>

CSS

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代码块的上述每个版本,用于:之前和之后。

目的

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

JsFiddle演示

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

UPDATE

当我使用以下CSS它的作品。

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

结论

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

解决方法

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

I don’t think this is possible as content within the progress element is never displayed if the browser can already draw the progress bar,similarly to content within an object or iframe.

换句话说,它将进度作为一个replaced element进行分类。正如传统的输入和其他替换元素以及img一样,CSS2.1与使用生成内容没有什么关系:

Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

基于Gecko的浏览器选择不支持已替换元素的生成内容,而基于WebKit的浏览器在某种程度上允许它至少对于已替换元素的表单元素,这一点已经确定了。 (有趣的是,progress :: before和progress :: after不能在任何浏览器中运行)所以如果你问这个跨浏览器是否可以做到这一点,答案是否定的,一直是没有的。

至于为什么WebKit浏览器可以插入字符串而不是attr()值,我不确定。 CSS2.1CSS3 Units and Values都声明attr()应该从生成这些伪元素的实际元素的属性获取值,因为伪元素本身不能有属性。这是我被困的地方

也许浏览器错误地尝试从:: – webkit-progress-bar和:: – webkit-progress-value中获取data-value属性,而不是进度元素,这就是为什么使用attr()但是工作时内容失败的原因当使用字符串。

也许这个问题的根源在于你正在尝试将生成内容添加到其他伪元素,这似乎在任何奇怪的原因在WebKit浏览器中工作。与替换元素中生成内容的上述问题不同,当前的Selectors 3规范和即将到来的Selectors 4规范都非常明确:您不应该对每个复合选择器拥有多个伪元素。当然,WebKit在实现伪元素方面臭名昭着的是藐视各种规则,所以事后看起来,WebKit搞砸这样做并不奇怪。

无论哪种方式,真正的结论是,CSS生成内容的实现是非常差的,超出了CSS2.1选择器的当前标准的范围,我的意思是生成内容替换元素,如输入和进度,单个选择器中的元素。

原文链接:https://www.f2er.com/css/218382.html

猜你在找的CSS相关文章