Add docs for :open pseudo-class #37869
Open
+130
−22
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
github-actions
bot
added
Content:CSS
|
This pull request has merge conflicts that must be resolved before it can be merged. |
estelle
reviewed
Jan 30, 2025
|
|
||
| The `:open` pseudo-class selects any element currently in the "open" state, which includes the following elements: | ||
|
|
||
| - {{htmlelement("details")}} and {{htmlelement("dialog")}} elements that are in an open state, that is, they hae the `open` attribute set. |
There was a problem hiding this comment.
Suggested change
| - {{htmlelement("details")}} and {{htmlelement("dialog")}} elements that are in an open state, that is, they hae the `open` attribute set. | |
| - {{htmlelement("details")}} and {{htmlelement("dialog")}} elements that are in an open state, that is, they have the `open` attribute set. |
| The `:open` pseudo-class selects any element currently in the "open" state, which includes the following elements: | ||
|
|
||
| - {{htmlelement("details")}} and {{htmlelement("dialog")}} elements that are in an open state, that is, they hae the `open` attribute set. | ||
| - {{htmlelement("input")}} elements that display a picker for the user to choose a value from (for example [`<input type="color">`](/en-US/docs/Web/HTML/Element/input/color)), when the picker is displayed. |
There was a problem hiding this comment.
Suggested change
| - {{htmlelement("input")}} elements that display a picker for the user to choose a value from (for example [`<input type="color">`](/en-US/docs/Web/HTML/Element/input/color)), when the picker is displayed. | |
| - {{htmlelement("input")}} elements that display a picker interface for the user to choose a value from (for example [`<input type="color">`](/en-US/docs/Web/HTML/Element/input/color)), when the picker is displayed. |
| - {{htmlelement("input")}} elements that display a picker for the user to choose a value from (for example [`<input type="color">`](/en-US/docs/Web/HTML/Element/input/color)), when the picker is displayed. | ||
| - {{htmlelement("select")}} elements that display a drop-down box for the user to choose a value from, when the drop-down is displayed. | ||
|
|
||
| Note that the "open" and "closed" states are semantic states, and don't necessary correlate with the visibility of the element in question. For example, a `<details>` element that is expanded to show its content is open, and will be selected by the `details:open` selector, even if it is hidden with a {{cssxref("display")}} value of `none`. |
There was a problem hiding this comment.
display: none are not in the DOM. https://codepen.io/estelle/pen/gbYERmm
|
|
||
| Note that the "open" and "closed" states are semantic states, and don't necessary correlate with the visibility of the element in question. For example, a `<details>` element that is expanded to show its content is open, and will be selected by the `details:open` selector, even if it is hidden with a {{cssxref("display")}} value of `none`. | ||
|
|
||
| {{domxref("Popover API", "popover")}} element "showing" and "hidden" states are also distinct semantic states, which can coexist alongside "open" and "closed" states. You can use the {{cssxref(":popover-open")}} pseudo-class to target styles at popovers that are in the "showing" state. |
There was a problem hiding this comment.
Do you mean elements with the popover attribute? Not sure what this paragraph is trying to say.
If the :open doesn't work with the attribute, let's state that directly.
|
|
||
| ### Custom `<select>` styling with `:open` | ||
|
|
||
| In this example, we have a basic {{htmlelement("select")}} element with some custom styling applied. The `:open` pseudo-class is used to apply a styling enhancement to its "open" state, that is, when the drop-down is displayed. |
There was a problem hiding this comment.
I don't think we need to put "open" in quotes here and elsewhere.
Suggested change
| In this example, we have a basic {{htmlelement("select")}} element with some custom styling applied. The `:open` pseudo-class is used to apply a styling enhancement to its "open" state, that is, when the drop-down is displayed. | |
| In this example, we have a basic {{htmlelement("select")}} element with some custom styling applied. The `:open` pseudo-class is used to apply a styling enhancement to its open state, when the dropdown menu is displayed. |
I wasn't 100% sure what the name of the options pop up was. I got "dropdown menu" from the select page.
|
|
||
| #### HTML | ||
|
|
||
| There is nothing special about our fruit selector, except that we have put it inside a wrapper element to make it easier to apply generated content to the example ({{cssxref("::after")}} and {{cssxref("::before")}} do not play well with `<select>` elements because their content is fully controlled by the browser). |
There was a problem hiding this comment.
Suggested change
| There is nothing special about our fruit selector, except that we have put it inside a wrapper element to make it easier to apply generated content to the example ({{cssxref("::after")}} and {{cssxref("::before")}} do not play well with `<select>` elements because their content is fully controlled by the browser). | |
| There is nothing special about our fruit selector, except that we have put it inside a wrapper element to make it easier to apply generated content to the example ({{cssxref("::after")}} and {{cssxref("::before")}} do not play well with `<select>` elements). |
suggest removing "because their content is fully controlled by the browser" because it may cause confusion; easier to remove it than to add explanatory text and exceptions.
| } | ||
| ``` | ||
|
|
||
| We set some generated content on the select wrapper that looks like a collapsed "expansion arrow", and position it to the left of the `<select>`. We then change the generated content on the wrapper to an expanded "expansion arrow", only when the descendant `<select>` is open. This is done using a combination of the `:open` and {{cssxref(":has()")}} pseudo-classes to create a parent selector. We are literally saying "select the `::before` pseudo-element of the wrapper, but only when its descendant `<select>` is open." |
There was a problem hiding this comment.
We need a different example. The effect in this example is not good user experience so not an example we want to show.
Comment on lines
+185
to
+186
| - The {{htmlelement("details")}}, {{htmlelement("dialog")}}, {{htmlelement("select")}}, and {{htmlelement("input")}} elements | ||
| - The {{cssxref(":popover-open")}} pseudo-class |
There was a problem hiding this comment.
Suggested change
| - The {{htmlelement("details")}}, {{htmlelement("dialog")}}, {{htmlelement("select")}}, and {{htmlelement("input")}} elements | |
| - The {{cssxref(":popover-open")}} pseudo-class | |
| - {htmlelement("details")}}, {{htmlelement("dialog")}}, {{htmlelement("select")}}, and {{htmlelement("input")}} elements | |
| - {{cssxref(":popover-open")}} pseudo-class |
| @@ -9,7 +9,7 @@ browser-compat: html.elements.details | |||
|
|
|||
| The **`<details>`** [HTML](/en-US/docs/Web/HTML) element creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label must be provided using the {{HTMLElement("summary")}} element. | |||
|
|
|||
| A disclosure widget is typically presented onscreen using a small triangle that rotates (or twists) to indicate open/closed status, with a label next to the triangle. The contents of the `<summary>` element are used as the label for the disclosure widget. The contents of the `<details>` provide the {{glossary("accessible description")}} for the `<summary>`. | |||
| A disclosure widget is typically presented onscreen using a small triangle that rotates (or twists) to indicate "open"/"closed" state, with a label next to the triangle. The contents of the `<summary>` element are used as the label for the disclosure widget. The contents of the `<details>` provide the {{glossary("accessible description")}} for the `<summary>`. | |||
There was a problem hiding this comment.
As noted in the previous suggestions, I prefer and think we should stick with the original (no qotes). Is there a grammar rule surrounding this, either way (pro/con), on MDN that I am unaware of?
There are a bunch of quotes states before and after this comment; so not commenting further.... but would prefer no quotes (reverting the edits) unless there's a reason i am not aware of. Thanks.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR documents the
:openpseudo-class, which is now supported in Chrome 133: see the ChromeStatus entry.Specifically, I have:
:open, and linked that page from appropriate places:openinstead of e.g.dialog[open]x[open]as a fallback if:openis not supported.:openhas already been added to BCD.Motivation
Additional details
Related issues and pull requests