Add Pseudo selectors #1869
Merged
Add Pseudo selectors #1869
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
the
feature definition
ddbeck
approved these changes
Sep 30, 2024
features/before-after.yml
Outdated
| @@ -0,0 +1,13 @@ | |||
| name: ::before and ::after | |||
| description: The `::before` and `::after` CSS pseudo-elements select the first and last children of an element for styling, and are often used with the `content` property to add generated cosmetic content. | |||
There was a problem hiding this comment.
As written, I think this might be confused with :first-child and :last-child. What do you think of this?
Suggested change
| description: The `::before` and `::after` CSS pseudo-elements select the first and last children of an element for styling, and are often used with the `content` property to add generated cosmetic content. | |
| description: The `::before` and `::after` CSS pseudo-elements select inline boxes preceding and following an element. They are often used with the `content` property to generate cosmetic content. |
Comment on lines
+44
to
+64
| # baseline: high | ||
| # baseline_low_date: ≤2017-03-27 | ||
| # baseline_high_date: ≤2019-09-27 | ||
| # support: | ||
| # chrome: "26" | ||
| # chrome_android: "26" | ||
| # edge: "12" | ||
| # firefox: "4" | ||
| # firefox_android: "4" | ||
| # safari: ≤10.1 | ||
| # safari_ios: ≤10.3 | ||
| - css.selectors.before.animation_and_transition_support | ||
|
|
||
| # baseline: false | ||
| # support: | ||
| # chrome: "26" | ||
| # chrome_android: "26" | ||
| # edge: "12" | ||
| # firefox: "4" | ||
| # firefox_android: "4" | ||
| - css.selectors.after.animation_and_transition_support |
There was a problem hiding this comment.
This data is pretty bad, but I'm OK with using compute_from to not worry about it for now: mdn/browser-compat-data#18109
There was a problem hiding this comment.
features/placeholder-shown.yml
Outdated
| @@ -0,0 +1,11 @@ | |||
| name: :placeholder-shown | |||
| description: The `:placeholder-shown` CSS pseudo-element selects `<input>` and `<textarea>` elements when no value is set and placeholder text is shown. | |||
There was a problem hiding this comment.
Two ideas here:
- Avoid circularity with "…is shown"
- Distinguish with similarly-named pseudo?
Suggested change
| description: The `:placeholder-shown` CSS pseudo-element selects `<input>` and `<textarea>` elements when no value is set and placeholder text is shown. | |
| description: The `:placeholder-shown` CSS pseudo-element selects `<input>` and `<textarea>` elements when no value is set and the element's `placeholder` attribute is not empty. Not to be confused with `::placeholder`, which selects the placeholder text itself. |
features/placeholder.yml
Outdated
| @@ -0,0 +1,7 @@ | |||
| name: ::placeholder | |||
| description: The `::placeholder` CSS pseudo-element selects text in `<input>` and `<textarea>` elements when no value is set. | |||
There was a problem hiding this comment.
Random idea: hint at the use case here?
Suggested change
| description: The `::placeholder` CSS pseudo-element selects text in `<input>` and `<textarea>` elements when no value is set. | |
| description: The `::placeholder` CSS pseudo-element selects help text in `<input>` and `<textarea>` elements when no value is set. |
| description: The `::placeholder` CSS pseudo-element selects text in `<input>` and `<textarea>` elements when no value is set. | ||
| spec: https://drafts.csswg.org/css-pseudo-4/#placeholder-pseudo | ||
| caniuse: css-placeholder | ||
| group: selectors |
There was a problem hiding this comment.
I wondered whether this should live with the placeholder attribute. I think they're distinct because they have dramatically different support histories. That said:
Suggested change
| group: selectors | |
| group: selectors | |
| # TODO: create some kind of "input placeholders" feature when https://github.com/web-platform-dx/web-features/issues/971 is resolved, combining placeholder selectors and the element attr |
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.
Per #1764 (comment), I used
selectas the verb.