CSS内容：attr（）对HTML5进度不起作用 [英] CSS content: attr() on HTML5 progress doesn't work

问题描述

HTML

 < progress max =100value =80 value =5>< / progress> 
  

CSS

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

CSS（尝试1）

  progress：before，progress：after {content：attr（data-value）; } 
  

  progress ::  -  webkit-progress-bar：before，
 progress ::  -  webkit-progress-bar：after {content：attr（data-值）; } 
 
 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-值）; } 
 
 progress ::  -  moz-progress-value：before，
 progress ::  -  moz-progress-value：after {content：attr（data-value）; } 
  

上述所有尝试均未成功。还尝试了每个具有不同CSS代码块的上述版本，对于：之前和：之后。

OBJECTIVE

要在HTML5之前和之后注入CSS生成内容 < progress> 元素。

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

UPDATE

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

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

结论

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

解决方案

在我原来的评论中，我说：

我不认为这是可能的，因为对象或 iframe中的内容，> progress 元素 c。

换句话说，这会将 progress 作为替换元素。正如传统的输入和被替换的元素的其他表单元素，以及 img ， CSS2.1 对使用生成的内容没有多少说明：

注意。 HTML）。

这是基于Gecko的浏览器选择不支持生成的内容对于替换的元素，而基于WebKit的浏览器允许它在某种程度上，至少对于被替换的元素的表单元素。 （有趣的是， progress :: before 和 progress :: after 不能在浏览器。）所以如果你问是否可以做这个跨浏览器，答案是否定的，一直没有。

---

至于为什么WebKit浏览器可以插入字符串而不是 attr（）值，我不确定。 CSS2.1 和 CSS3单位和值说明 attr（）应该从生成那些伪元素的实际元素的属性 - 元素，因为伪元素本身不能具有属性本身。

也许浏览器不正确地尝试将 data-value 属性 :: - webkit-progress-bar 和 :: - webkit-progress-value ，而不是进度元素，这就是为什么 content 在使用 attr

也许问题的根源在于你试图将生成的内容添加到其他伪元素的事实，这再次似乎在WebKit浏览器中工作的任何奇怪的原因。与替换元素中生成内容的上述问题不同，当前的选择器3 规范和即将推出的选择器4 规范都非常清楚：你不应该有每个复杂选择器多于一个伪元素。当然，当涉及到实现伪元素时，WebKit已经臭名昭着地蔑视了各种规则，所以在后来看来，我不会惊讶我看到WebKit搞错了。

方式，真正的结论是CSS生成的内容的实现非常差，超出了当前标准的CSS2.1 +选择器的范围，我的意思是生成内容替换的元素如 input 和 progress ，以及在单个选择器中嵌套伪元素。

HTML

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

CSS

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

CSS (Attempt 1)

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

CSS (Attempt 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 (Attempt 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); }

None of the above attempts succeeded. Also tried each of the above versions with different CSS code blocks, for :before and :after.

OBJECTIVE

To inject CSS generated content before and after the HTML5 <progress> element. Is this possible?

JsFiddle Demo

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

UPDATE

When I use the following CSS it works.

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

CONCLUSION

Apparently when we inject static content in the CSS, it works. But if we use the content from data-* it doesn't.

解决方案

In my original comment, I said:

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.

To put it another way, this classifies progress as a replaced element. Just as with the traditional input and other form elements that are replaced elements, as well as img, CSS2.1 doesn't have much to say about using generated content with it:

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.

It's well-established that Gecko-based browsers choose not to support generated content for replaced elements, whereas WebKit-based browsers allow it to some extent, at least for form elements that are replaced elements. (Interestingly, progress::before and progress::after do not work in any browser.) So if you're asking if it's possible to do this cross-browser, the answer is no, and has always been no.

---

As for why WebKit browsers can insert strings and not attr() values, I'm not certain. Both CSS2.1 and CSS3 Units and Values state that attr() should take values from attributes of the actual element generating those pseudo-elements, since pseudo-elements can't have attributes themselves anyway. This is where I'm stumped.

Perhaps the browser is incorrectly trying to take the data-value attribute from ::-webkit-progress-bar and ::-webkit-progress-value and not the progress element, which is why content is failing when using attr() but working when using a string.

Perhaps the root of the problem lies in the very fact that you're trying to add generated content to other pseudo-elements, which again seems to work in WebKit browsers for whatever bizarre reason. Unlike the above issue with generated content within replaced elements, the current Selectors 3 spec and the upcoming Selectors 4 spec are both very clear on this: you are not supposed to have more than one pseudo-element per complex selector. Of course, WebKit has infamously flouted various rules when it comes to implementing pseudo-elements, so in hindsight it does not surprise me to see WebKit mess up doing so.

Either way, the real conclusion is that the implementation of CSS generated content is extremely poor beyond the scope of the current standard of CSS2.1 + Selectors, by which I mean generated content for replaced elements such as input and progress, and nesting of pseudo-elements in a single selector.

这篇关于CSS内容：attr（）对HTML5进度不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！