2

On the MDN documentation for <progress>, they provide this example:

<progress value="70" max="100">70 %</progress>

This element contains the text node of 70 %, but it doesn't display anywhere. I'm curious about two things. The first is, if there is a way to display it. (Perhaps some default CSS is preventing this? Please note that I'm not looking for any hacks that require positioning of other elements. This question is different from the others on Stack Overflow, in that I'm curious about whether or not there are proper ways to show that text.)

For the second question, I'm assuming it isn't possible without workarounds. I'm curious why that is. The spec claims that the <progress> element can have phrasing content. The element requires a start and end tag. It seems clearly set up to contain content. What's the technical reason for preventing this content from displaying?

Brad
  • 159,648
  • 54
  • 349
  • 530
  • I am also curious about this. I have been playing around with it for awhile now and though I can see the text node value for the progress tag in the console I also cannot seem to make it display. I know you didn't ask for any hacks but this was the best way I could make it work https://codepen.io/CodeBroJohn/pen/GLXqZp though I think there is probably a better way. – CodeBroJohn Apr 23 '19 at 07:06
  • It cant be done, its all depend on which web browser you are using. But if you need a CSS fix have a look at this thread. https://stackoverflow.com/questions/33964214/show-a-progress-bars-value-number-like-55-on-the-bar-by-using-css – Alen.Toma Apr 27 '19 at 19:33
  • @Alen.Toma Thanks, but I'd like to understand *why*. It seems that everywhere else content is allowed, it's shown. I'm curious why the spec and/or implementation is different for a progress bar. – Brad Apr 27 '19 at 19:38
  • Its as i said that some web browser may have support for this, and you cant specify diffrent tags för diffrent webbrowser/platform. so it easer to have a default/standard way for the tag. and let the platform determind what it should display. – Alen.Toma Apr 27 '19 at 19:43
  • @Alen.Toma What browser displays that content? I haven't seen any. Is the case here that this inner content is considered a fallback? Sort of like text in a ` – Brad Apr 27 '19 at 19:45

1 Answers1

1

For your second question, I found this in the specs

Authors are encouraged to also include the current value and the maximum value inline as text inside the element, so that the progress is made available to users of legacy user agents.

It would appear that having text inside the progress tag is sort of like having text inside the canvas tag, and it's just there for legacy browser support. I'm guessing the reason it's hidden by default is because people thought that if the browser does support the progress tag then the text inside doesn't need to be shown.

As for your first question, I am truly baffled. I made a fiddle here where I copied over all the computed style attributes from a p tag onto a progress tag. Apart from changing the appearance of the progress bar it did not seem to do anything about the text node being hidden, which makes me think the browser just straight up ignores it and it isn't any default css.

Aplet123
  • 33,825
  • 1
  • 29
  • 55
  • Cool, thanks for finding that paragraph! I totally missed it. I think that answers the first question too... sounds like this is just an intentional fallback mechanism. – Brad Apr 27 '19 at 20:27