Add new information about recent CSS inheritance changes with CSS selection and highlight pseudo-classes #38989
Conversation
github-actions
bot
added
Content:CSS
|
Preview URLs (comment last updated: 2025-04-08 15:12:08) |
There was a problem hiding this comment.
@dbarabashh thanks for the contribution! I've added some thoughts on how I think this could be handled.
| @@ -56,6 +56,14 @@ Color contrast ratio is found by comparing the luminosity of the selected text a | |||
| - [MDN Understanding WCAG, Guideline 1.4 explanations](/en-US/docs/Web/Accessibility/Guides/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) | |||
| - [Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) | |||
|
|
|||
| ## Inheritance Behavior | |||
There was a problem hiding this comment.
Some quick thoughts:
- This isn't a standard section we normally include in MDN reference pages. If we did have such a section, it would be better placed under a "Description" section (see https://developer.mozilla.org/en-US/docs/Web/CSS/::picker#description for an example).
- These are pseudo-elements, not pseudo-classes (double-colon)
- This section isn't really providing any information at all. It gives a very vague idea that some behavior has changed, and then links to the DCC blogpost for the specifics. Generally, on MDN, we provide the information, rather than linking to somewhere else for it.
My suggestion would be to:
- Add a section to a more general page, such as https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements, or maybe a small guide underneath the page tree of the module where this behavior is defined (under https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_pseudo-elements#guides, perhaps), to explain the behavior.
- Add compat data table entries to all of the affected pseudo-element pages, to explain when the change was made (to https://developer.mozilla.org/en-US/docs/Web/CSS/::selection#browser_compatibility, for example). Link to the section or page added in 1., in the data point descriptions.
- Optionally also add a "Description" section to all pseudo-element pages relevant to this behavior, which briefly explains the behavior and links to the section or page added in 1. for more information.
There was a problem hiding this comment.
Thanks for the feedback! Really helpful and gives a lot more clarity on how this should be implemented.
I’ll make these changes and let you know as soon as I commit.
There was a problem hiding this comment.
@dbarabashh you are most welcome. Don't hesitate to ping me if you have any questions.
|
I made some changes and updated the text, but I have a feeling its a bit hard to understand. Considering less experienced developers, this explanation might be too complex. What do you think? /cc @chrisdavidmills |
There was a problem hiding this comment.
@dbarabashh It's getting there. A couple more comments for you.
I also wondered if you could link to this section from all the pseudo-element reference pages that follow this inheritance model?
|
|
||
| Highlight pseudo-elements, such as {{CSSxref("::selection")}}, {{CSSxref("::target-text")}}, {{CSSxref("::highlight()")}}, {{CSSxref("::spelling-error")}}, and {{CSSxref("::grammar-error")}}, follow a consistent inheritance model that differs somewhat from regular element inheritance. | ||
|
|
||
| Styles applied to highlight pseudo-elements inherit from their parent elements. This means that if you apply a style to a parent element and then to the highlight pseudo-element of its child, the latter will inherit from both its parent element and the highlight pseudo-element styles of its parent. |
There was a problem hiding this comment.
I'm finding it hard to understand the inheritance model as described. Maybe it would be clearer if you added a quick code example to explain what you mean. You could show the live rendered result using the EmedLiveSample macro; see https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Page_structures/Live_samples for an explanation.
|
|
||
| Styles applied to highlight pseudo-elements inherit from their parent elements. This means that if you apply a style to a parent element and then to the highlight pseudo-element of its child, the latter will inherit from both its parent element and the highlight pseudo-element styles of its parent. | ||
|
|
||
| For detailed information and examples of how this inheritance model works in practice, refer to the [CSS Custom Highlight API](/en-US/docs/Web/API/CSS_Custom_Highlight_API) documentation. |
There was a problem hiding this comment.
Looking at the API landing page, I can't see any explanation of the inheritance model. Is it in a particular subpage?
BTW, you could always link to the Chrome page that you linked to previously for the detailed explanation if it is not already on MDN. We just need some information on MDN as well.
Fix #36458