Document ::-webkit-inner-spin-button and ::-webkit-outer-spin-button pseudo-elements

RESOLVED FIXED

Status

RESOLVED FIXED
3 years ago
2 years ago

People

(Reporter: mozilla, Assigned: poshakajay, Mentored)

Tracking

(Blocks: 1 bug)

Details

(Whiteboard: [good first bug][lang=css], URL)

(Reporter)

Description

3 years ago
MDN currently lacks documentation for the ::-webkit-inner-spin-button and ::-webkit-outer-spin-button pseudo-elements.

Reference: https://www.tjvantoll.com/2013/04/15/list-of-pseudo-elements-to-style-form-controls/#webkit-3
For a eventual mentee: the page lack a live sample.

See https://developer.mozilla.org/en-US/docs/MDN/Contribute/Structures/Live_samples

You'll need Blink, Safari or Opera to test it.
Mentor: saurabh
Whiteboard: [good first bug][lang=css]

Comment 2

3 years ago
This would be my first contribution to open source. I would like to work on this! can you assign me this bug for me to fix.
Assignee: nobody → vidhimittal1996

Comment 4

3 years ago
SORRY the link i have send is not correct .this is the right link .
https://developer.mozilla.org/en-US/docs/MDN/Contribute/Structures/Live_samples
Hi Vidhi,

Thanks for the effort. Unfortunately the edit wasn't correct (but don't worry, another editor has already fixed the edit).

So, basically, what Jean-Yves meant when he gave the link to https://developer.mozilla.org/en-US/docs/MDN/Contribute/Structures/Live_samples above was for reading up on how to create live samples on MDN. That page is not the one that needs to be edited.

The task at hand is to create a new page for the CSS pseudo elements ::-webkit-inner-spin-button and ::-webkit-outer-spin-button. And once the pages are created with the basic info, you can go ahead and add a live sample to the article (and refer to the link Jean-Yves provided on how to create live samples).
I'm worried I complicated the matter. So let me try to break it down into smaller doable portions.

# First you need to create the reference page for the CSS pseudo-element called "::-webkit-inner-spin-button".

# To create the page, go here - https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3A-webkit-inner-spin-button

# You can use the content structure from the reference page of ::after pseudo-element (https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3Aafter) to create the new page.

PS: If you are not already familiar with pseudo-elements, it will help to learn a bit about that. Also this link (https://www.tjvantoll.com/2013/04/15/list-of-pseudo-elements-to-style-form-controls/#webkit-3) will help you understand the particular pseudo-elements you need to document for this bug.

Hope this helps :)

Comment 7

3 years ago
The bug is already fixed by another editor. so should i still work on it or move on with another @saurabhnair.
Vidhi, what make you believe that the bug is fixed by another editor? You should still work on it :-) (if you still want, of course :-) )

Comment 9

3 years ago
Hi Jean , I have created page for webkit . please take a review and let me know if there is any mistake. link:https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-inner-spin-button
Hi! Thank you a lot for your work!

A few comments:
1. You'll need to create two pages here: one for ::-webkit-inner-spin-button and the other for ::-webkit-outer-spin-button. This the reference areas of MDN, we do not combine concepts. You have the adequate text lower in the page under the "Webkit (Inner Spin Button And Outer Spin Button) section"

2. The introduction should be about ::-webkit-inner-spin-button, not about pseudo-elements in general. You can assume that people know what a pseudo-elements is, and by linking this very same term to the pseudo-element page you allow people who don't know to reach a complete and detailed article with much more details that you can put on this page.

3. As a collorary to the previous, the notice about double colon and single colon has nothing to do there (I'm not even sure that the single colon notation will work for ::-webkit-inner-spin-button)

4. Do not use fancy styling (like the image for the notice box): we want the MDN to be coherent: use the default style. That means, that the separation line has to be removed.

5. The example seems to be copied from another site:
<body>
        <img src="https://s3.amazonaws.com/codecademy-blog/assets/46838757.png"/>
        <p>We're Codecademy! We're here to help you learn to code.</p><br/><br/>
        <input type="number"></input>
        <div>
            <a href="https://www.facebook.com/codecademy">Friend us on <span>Facebook!</span></a>
        </div>
    </body>
</html>

You can't do this: it is likely illegal (unless a license has bben explicitely granted) and we want to have original content.

In this case, you have the simple example in the last paragraph (you made screenshots)

6. The example
Try to use ::-webkit-inner-spin-button in isolation (if possible): what will happen? Will the UA hide one of the 2 buttons, or do something different? This is interesting: on the web all the examples I found were using both :-)

Put the live sample in action using the {{LiveSampleMacro("Example")}} macro, right before the screenshots.

7. Browser compatibility
This is obviously wrong: you marked that Firefox and Opera supports it but not Chrome. Clearly Chrome, Opera and Safari support it.

8. Add the sidebar
To do this, add the {{CSSRef}} macro at the top of the page, it will generate automatically a sidebar

9. Syntax
You describe ::-webkit-inner-spin-button, so use it not the generic pseudo-element placeholder.

Thank you again for your help: it is quite complex to see and understand all our conventions at the first attempt. You'll see, once this page will be fixed, creating ::-webkit-outer-spin-button will be much much easier.
One more thing: do not hot link to external images. Create you own ones (copyright!) and upload them with the button Attachment in the Edit interface.

You linked to the image there: http://stackoverflow.com/questions/24286506/number-input-always-show-spin-buttons [There are even annotation that are meaningless in the context of the MDN page]
Vidhi, how are things going? Do you need more information?
Flags: needinfo?(vidhimittal1996)

Comment 13

3 years ago
Hi Jean, i made it here is the link -(https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-inner-spin-button)and could you tell me why its necessary to make two different pages even if i put inner spin button then also the outer spin button is coming  automatically(default),that'swhy its little bit confusing for me.I know that the bottom button is used to go down in counting  and vice-versa.
Flags: needinfo?(vidhimittal1996)
I've adjusted the documentation ::-webkit-inner-spin-button. The one for ::-webkit-outer-spin-button is still missing. Vidhi, do you still plan to work on this?

Sebastian
Status: NEW → ASSIGNED
Flags: needinfo?(vidhimittal1996)
Because there was no feedback, I'm unassigning this bug now.

Sebastian
Assignee: vidhimittal1996 → nobody
Status: ASSIGNED → NEW
Flags: needinfo?(vidhimittal1996)
(Assignee)

Comment 18

2 years ago
I have created a page for webkit-outer-spin-button.  Please review it and let me know of any changes.
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-outer-spin-button
Thank you Ajay for creating that page! I've assigned this bug to you.

I fixed the live sample and the browser compatibility table and info (Blink obviously doesn't support ::-webkit-outer-spin-button). Also, the tags were missing, so I've added them.

With those changes I call this bug fixed.

Sebastian
Assignee: nobody → poshakajay
Status: NEW → RESOLVED
Last Resolved: 2 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.