1231850 - Document non-standard pseudo-elements of HTML5 <progress> element

Status: RESOLVED FIXED

(Developer Documentation Graveyard :: CSS, defect)

Description

[Chris Rebert]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.80 Safari/537.36




Expected results:

MDN should document all the vendor-specific CSS pseudo-elements which are used to style <progress> elements.
Standardization in this area sadly seems to be progressing pretty slowly.

Known relevant currently not (fully) documented pseudo-elements:
::-ms-fill (stub: https://developer.mozilla.org/en-US/docs/Web/CSS/::-ms-fill )
::-webkit-progress-bar
::-webkit-progress-value

Comment 1

[Rupshree]

I want to work on this bug.

Comment 2

[Jean-Yves Perrier [:teoli]]

Sure and welcome!

A few useful readings first:
1. Ccreate an account on MDN: https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Create_an_MDN_account
2. How to create a new page: https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Create_and_edit_pages

I recommend you start by completing the stub for ::-ms-fill, it mostly need an example.

Comment 3

[Rupshree]

This is my bug.1231850 - Document non-standard pseudo-elements of HTML5 <progress>
element.please guide me for initial step.

Comment 4

[Jean-Yves Perrier [:teoli]]

So the first task involved here is to complete: https://developer.mozilla.org/en-US/docs/Web/CSS/::-ms-fill

It miss an example section that have to be added (click the edit button on the page once you have done what is described in comment 2.

An example of a complete pseudo-element article can be found there: https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-range-progress

Once ::-ms-fill has been completed, the next tasks are to create the two following pages:
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-bar
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-value

They share the structure of ::-ms-fill, with a different content (and they are specific to WebKit-based browsers, unlinke ::-ms-fill that is specific to IE and Edge).

Comment 5

[Chris Rebert]

(In reply to Jean-Yves Perrier [:teoli] from comment #4)
> Once ::-ms-fill has been completed, the next tasks are to create the two
> following pages:
> https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-bar
> https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-value

I presume you meant "complete" rather than "create"?

Comment 6

[Jean-Yves Perrier [:teoli]]

Yes, of course.

Comment 7

[Jean-Yves Perrier [:teoli]]

Rupshree, I have got a look at the first pass you did on ::-ms-fill.

I think you have mistakenly replace the section "Specifications" that were correct.

You added a kind of example, but this is only an HTML <progress> element: the article is about the pseudo-element ::-ms-fill, so I expect the addition of two sections:

1. A section syntax. You can adapt the one at ::-ms-clear [1] as most pseudo-elements have a really close syntax.
2. An example. You started doing this (with the HTML part), you need to put it into its own section, add the css part and make it a live sample (with a screenshot too or people without IE won't be able to benefit from the example). ::-ms-clear has such a section and if you click "edit" you can see how macros are used to do them.

You can find an example of use of ::-ms-fill  in [2]. Please don't just copy adapt it (and make it better).

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/::-ms-clear
[2] https://www.tjvantoll.com/2013/04/15/list-of-pseudo-elements-to-style-form-controls/#progress_element

Thank you for your help.

Comment 8

[Rupshree]

Sir,I have made some changes and attached also screenshot in ::-ms-fill.

Comment 9

[Jean-Yves Perrier [:teoli]]

Rupshree: I'm not sure you followed what is in comment 7.

I've that Chris restored the spec section for example.

Please read carefully comment 7 and apply the changes. If you don't understand some of the requests, feel free to ask here.

Comment 10

[Sebastian Zartner [:sebo]]

Rupshree, do you still want to work on this? If not, I'll unassign you, so others get the chance to work on this.

Sebastian

Comment 11

[Sebastian Zartner [:sebo]]

No feedback until now, so I unassign the bug.

Sebastian

Comment 12

[Pratik Patel]

Hi, I added an example and screenshot to ::-ms-fill.

Comment 13

[Sebastian Zartner [:sebo]]

(In reply to pkpatel88 from comment #12)
> Hi, I added an example and screenshot to ::-ms-fill.

Thank you for adding the example! I've added some headings and a live sample for it and removed the 'NeedsExample' tag.

Do you feel up to also add examples to https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-bar and https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-value?

Sebastian

Comment 14

[Pratik Patel]

I added examples and screenshots to ::-web-kit-progress-bar and -webkit-progress-value. 

The verbiage in "Summary" may need to be updated, because of the requirement of setting "-webkit-appearance" to "none".

Comment 15

[Sebastian Zartner [:sebo]]

Thank you for adding the examples! As you've fixed this bug, I've assigned it to you now.
Like before I've added the live samples and removed the 'NeedsExample' tags from the pages.

I've also added a note about the requirement of setting '-webkit-appearance' to 'none'.

Additionally, I have added an example to https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-inner-element, which was not mentioned in this bug but is part of it.

Sebastian