Skip to content

Fix CSS pseudo-class lists#38576

Merged
dipikabh merged 15 commits intomdn:mainfrom
atjn:fix-css-pseudo-class-lists
Mar 20, 2025
Merged

Fix CSS pseudo-class lists#38576
dipikabh merged 15 commits intomdn:mainfrom
atjn:fix-css-pseudo-class-lists

Conversation

@atjn
Copy link
Copy Markdown
Contributor

@atjn atjn commented Mar 11, 2025

Description

MDN has three lists that enumerate all CSS pseudo-classes, but none of the lists include all pesudo-classes. I have added the missing pseudo-classes to all three lists.

I have also made some minor tweaks:

  • edited the spec links because the old spec links were incorrect.
  • moved a few pesudo-classes around because they were not in alphabetical order.
  • removed/added the experimental icon from pesudo-classes where it was incorrect.
  • edited the descriptions of :playing and :paused because they were very long and incorrect.
  • edited the names and links of a few pseudo-classes that had incorrect names or links.

Motivation

The lists are confusing and misleading when they are incomplete.

Additional details

A few of the new pseudo-classes do not link anywhere because MDN does not have a page for that pseudo-element. I tried to add the link anyways because I expect that the pages will be added in the future, but then the links are redirected to other pseudo-classes that start with the same letters. I think that would create a bad user experience, so I have opted to not add any links instead.

Related issues and pull requests

atjn added 5 commits March 11, 2025 13:03
@atjn
Update spec links in CSS Pseudo-classes page
e758620 
- Fix broken HTML spec link
- Remove CSS UI spec link as it does not define any pseudo-classes
- Add CSS Scoping spec link, as it defines shadow-structural pseudo-classes
- Add CSS Page spec link, as it defines page pseudo-classes
@atjn
Add missing entries in CSS Pseudo-classes page
bd4e564 
- Added: 20 new pseudo-classes and 4 new categories
- Edited a few existing pesudo-classes to put them in the right order or fix a name display issue
@atjn
Add missing entries in CSS Pseudo-classes alphabetical index
497423f 
- Added 11 new pseudo-classes
- Edited a few existing pseudo-classes to put them in the right order or fix a name display issue
@atjn
Add missing entries in CSS Selectors page
099d6f8 
- Added 3 new pseudo-classes
- Moved :indeterminate so it follows alphabetical order
@atjn
Add missing entries in CSS Selectors Related concepts
5f5193e 
- Added 5 new pseudo-classes and 1 new module
- Moved :popover-open to the Selector list where it belongs
@atjn atjn requested a review from a team as a code owner March 11, 2025 12:39
@atjn atjn requested review from dipikabh and removed request for a team March 11, 2025 12:39
@github-actions github-actions bot added Content:CSS Cascading Style Sheets docs size/m [PR only] 51-500 LoC changed labels Mar 11, 2025
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 11, 2025

Preview URLs

dipikabh
dipikabh requested changes Mar 18, 2025
View reviewed changes
Copy link
Copy Markdown
Contributor

@dipikabh dipikabh left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks a lot @atjn for adding the missing pieces and fixing the attribution. I have a few comments and suggestions. LMK what you think.

@atjn @dipikabh
volume-locked: user agent -> browser
acb11d6 
Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 19, 2025 •
edited
Loading

Preview URLs

(comment last updated: 2025-03-20 07:38:27)

atjn and others added 2 commits March 19, 2025 10:09
@atjn @dipikabh
Custom element pseudo -> Custom state pseudo
bcc046e 
Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>
@atjn @dipikabh
blank: show experimental_inline after name
ebcfeb3 
Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>
@atjn
Copy link
Copy Markdown
Contributor Author

atjn commented Mar 19, 2025 •
edited
Loading

Thanks @dipikabh :)
You have a lot of suggestions to remove entries because they are not implemented in browsers yet. But MDN is full of documentation for features that have not yet been implemented or is in some form of experimental stage. Why would it not be okay to add these entries, but it is okay to have an entry for blank or local-link which are also not implemented in any browser?

I find it very useful to surface this documentation even though no one is implementing it, it allows people to:

  • plan for future features, for example by halting costly development processes to solve issues that might soon be solved natively
  • engage in the standards process if they see something that they think could be improved
  • vote for implementation in browsers if they see something they really want

I don't think we should remove these entries, especially not now that I have already spent the time to document them.

Would it help if I made pages for the nth-col() and noth-last-col() classes? Then if people are interested in them, they would be able to quickly check the browser compatibility chart and find that they are not implemented anywhere.

@dipikabh
Copy link
Copy Markdown
Contributor

dipikabh commented Mar 19, 2025

Hi @atjn, thank you for the work you've put in to update these pages.

You have a lot of suggestions to remove entries because they are not implemented in browsers yet. But MDN is full of documentation for features that have not yet been implemented or is in some form of experimental stage. Why would it not be okay to add these entries, but it is okay to have an entry for blank or local-link which are also not implemented in any browser?

I understand your concern. I'm only suggesting to remove :nth-col() and :nth-last-col() from the list because we don't have corresponding pages for them since they are not supported in any browser yet. Additionally, I think there is no need to add :current() when :current itself is not supported.

We do have a policy for what we document. An experimental feature (landing in one or more browsers behind a preference) is different from a feature not supported at all in any browser. We do sometimes document features that are still experimental when there is clear momentum towards the implementation becoming standard and landing in more browsers.

All these pages - :blank, :local-link, :target-within - were added more than 5 years ago. It's possible at the time there was an indication for some upcoming browser implementation.

We did remove the :current page but brought it back. Pinging @estelle to see if she remembers the decision behind keeping these pages for unimplemented features.

atjn and others added 3 commits March 20, 2025 08:24
@atjn @dipikabh
Pesudo classes overview: remove current()
8199f30 
Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>
@atjn @dipikabh
Pesudo classes overview: remove grid-structural
13ea128 
Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>
@atjn @dipikabh
Pesudo classes list: remove current()
af91845 
Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>
github-actions[bot]
github-actions bot reviewed Mar 20, 2025
View reviewed changes
atjn and others added 4 commits March 20, 2025 08:26
@atjn @dipikabh
Pesudo classes list: remove grid-structural
b85bcd2 
Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>
@atjn @github-actions
Fix formatting
c10d705 
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
@atjn
Selectors list: remove grid-structural
c602cce
@atjn
Selectors list: remove grid-structural
944b0d1
@atjn
Copy link
Copy Markdown
Contributor Author

atjn commented Mar 20, 2025

You're the boss, I have removed the entries in question :)

@dipikabh
Copy link
Copy Markdown
Contributor

dipikabh commented Mar 20, 2025

You're the boss, I have removed the entries in question :)

Thank you. We do appreciate you highlighting the issue about MDN having pages for features that are not implemented in browsers. I've brought this up with the team and we'll be looking into removing such pages so we better adhere to our policy :)

dipikabh
dipikabh approved these changes Mar 20, 2025
View reviewed changes
Copy link
Copy Markdown
Contributor

@dipikabh dipikabh left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks a lot for these updates

@dipikabh dipikabh merged commit 16e8ac8 into mdn:main Mar 20, 2025
8 checks passed
@atjn atjn deleted the fix-css-pseudo-class-lists branch March 20, 2025 22:46
@estelle
Copy link
Copy Markdown
Member

estelle commented Mar 21, 2025

We did remove the :current page but brought it back. Pinging @estelle to see if she remembers the decision behind keeping these pages for unimplemented features.

  • If something is in the specification, we list it on MDN.
  • If it has no support and is not documented on MDN, we include it only in a paragraph that says "X is not supported in any browser", so if someone is looking for something from the specs, they can at least find a note about the lack of support when searching MDN. (example: the geometricUtils interface text on https://developer.mozilla.org/en-US/docs/Web/CSS/CSSOM_view )
  • If it has support and is not documented, we link to the page where the feature should be. (Example: the CaretPosition interface methods on https://developer.mozilla.org/en-US/docs/Web/CSS/CSSOM_view )
  • If it has no support and is documented, whether we keep it varies. I don't think there is a steadfast rule. It likely partially depends on the likelihood of it being supported soon versus if it's at risk of being removed from the spec. When kept, these should be listed in the sentence "X is not supported,..." rather than in the list of features.

wbamberg added a commit to wbamberg/content that referenced this pull request Apr 4, 2025
@wbamberg
Merge remote-tracking branch 'upstream/main' into cross-site-leaks
540aff6 
* upstream/main: (172 commits)
  chore: improve code style guide (mdn#38715)
  fix: typo on `Error.isError()` page (mdn#38754)
  plural consistency (mdn#38747)
  fix: auto-cleanup by bot (mdn#38695)
  Synchronize with BCD v5.7.4 (mdn#38709)
  Add docs for JS self-profiling API (mdn#37796)
  Better SameSite docs (mdn#38710)
  Added missing explanation for Array Literals (mdn#38745)
  Add a page on CSRF (mdn#38151)
  Fix description of several Range methods (mdn#38518)
  Remove extraneous span (mdn#38696)
  Add a definition for media containers, improve how the media files are defined and Remove wrong information (mdn#38721)
  Move visited selector guide to CSS selectors module (mdn#38642)
  Make JSON learning article more technically precise (mdn#38644)
  Make translate3d() interactive example code valid (mdn#38647)
  Clarity on Safari support for custom elements (mdn#38727)
  feat(css): Link to learning doc about text direction (mdn#38719)
  Fix typo (mdn#38739)
  move guide to module: inline formatting context (mdn#38637)
  Fix CSS pseudo-class lists (mdn#38576)
  ...
cssinate pushed a commit to cssinate/content that referenced this pull request Apr 11, 2025
@atjn @dipikabh
@github-actions @paul-grant-hs
Fix CSS pseudo-class lists (mdn#38576)
f50a38c 
* Update spec links in CSS Pseudo-classes page

- Fix broken HTML spec link
- Remove CSS UI spec link as it does not define any pseudo-classes
- Add CSS Scoping spec link, as it defines shadow-structural pseudo-classes
- Add CSS Page spec link, as it defines page pseudo-classes

* Add missing entries in CSS Pseudo-classes page

- Added: 20 new pseudo-classes and 4 new categories
- Edited a few existing pesudo-classes to put them in the right order or fix a name display issue

* Add missing entries in CSS Pseudo-classes alphabetical index

- Added 11 new pseudo-classes
- Edited a few existing pseudo-classes to put them in the right order or fix a name display issue

* Add missing entries in CSS Selectors page

- Added 3 new pseudo-classes
- Moved :indeterminate so it follows alphabetical order

* Add missing entries in CSS Selectors Related concepts

- Added 5 new pseudo-classes and 1 new module
- Moved :popover-open to the Selector list where it belongs

* volume-locked: user agent -> browser

Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>

* Custom element pseudo -> Custom state pseudo

Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>

* blank: show experimental_inline after name

Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>

* Pesudo classes overview: remove current()

Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>

* Pesudo classes overview: remove grid-structural

Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>

* Pesudo classes list: remove current()

Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>

* Pesudo classes list: remove grid-structural

Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>

* Fix formatting

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Selectors list: remove grid-structural

* Selectors list: remove grid-structural

---------

Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@github-actions github-actions[bot] github-actions[bot] left review comments

@dipikabh dipikabh dipikabh approved these changes

Assignees

No one assigned

Labels

Content:CSS Cascading Style Sheets docs size/m [PR only] 51-500 LoC changed

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@atjn @dipikabh @estelle @mdn-bot