Webkit Pseudo Elements Documentation

Question

I actually acomplished what I wanted to do: hiding some webkit pseudo-elements from the page when I want to print it, the code looks like below.

The problem is that I didnt learn anything from my research to do tha and I couldn't find any documentation about it, and every answer I saw about this topic only shows the code, without any further explanation.

::-webkit-resizer,
::-webkit-calendar-picker-indicator {
    display: none; 
    -webkit-appearance: none;
}

Some sources:

https://developer.mozilla.org/en-US/docs/Web/CSS/WebKit_Extensions
- This one show some extensions, but the callendar one is not listed here and I wasn't able to find elsewhere.
https://gist.github.com/afabbro/3759334
- This gist has a lot of those pseudo elements, classes or properties, but the guy who did it didnt explain how he have acomplished that, and those doenst show on my dev tools.
Use pseudo classes for selecting webkit pseudo elements
- This guy talks about the shadow-dom, I didnt heard of it before, but on my research I couldn't understand how it would help-me.

Some similar answers: 6195329, 11418289, 17340038, 15530850, 53483852

Also visited the wikipedia article and this site: https://webkit.org/

I really want to understand the concept behind this webkit things and any help would be appeciated.

To be more specific: if any time in the future I want to override a component, how can I know what pseudo-element has being aplied on an compnonet given the browser?

https://www.tjvantoll.com/2013/04/15/list-of-pseudo-elements-to-style-form-controls/ — zer00ne, Feb 17 '22 at 23:44
@zer00ne On my research I passed by this article, it unfortunately doesnt have all pseudo-elements neither the the way to find them, but it sure is a good article! Thank you! — guilfer, Feb 18 '22 at 00:06
https://stackoverflow.com/questions/16382108/hide-form-controls-when-printing-an-html-page-with-css — adampweb, Feb 23 '22 at 18:33

score 1 · Answer 1 · answered Feb 24 '22 at 15:24

The best way to know which pseudo-elements you can work with is by reading specifications (like W3C standards) and realiable docs and resources (like MDN). If you can't find a particular pseudo-element there (or if it's only referred with a vendor prefix), you should probably avoid using it.

It seems ::-webkit-calendar-picker-indicator is supported by Blink and WebKit (follow the links for little pieces of information), but since it's poorly documented and also non-standard I would refrain from adopting it at all.

guilfer · Accepted Answer · 2022-03-27T18:42:16.907

1

There is no specific documentation for pseudo-elements, but I finally could find, while tinkering on the Chrome Dev Tools' preferences a setting that shows the "Shadow-Dom" from the user-agent.

Go to "Preferences" and scroll to the "Elements" section, where there is a oprtion for that:

edited Mar 27 '22 at 18:42

answered Mar 27 '22 at 18:37

guilfer

164
1
12

Webkit Pseudo Elements Documentation

2 Answers2

Linked