Skip to content

Update rule for nested lists in normalize.css and opinionated.css #27

Open
@germanfrelo

Description

@germanfrelo

This rule is in both normalize.css and opinionated.css:

/**
 * Remove the margin on nested lists in Chrome, Edge, and Safari.
 */

:where(dl, ol, ul) :where(dl, ol, ul) {
  margin-block-end: 0;
  margin-block-start: 0;
}

I think it can be updated to:

/**
-* Remove the margin on nested lists in Chrome, Edge, and Safari.
+* Remove the margin on nested lists in Chrome and Edge.
 */

-:where(dl, ol, ul) :where(dl, ol, ul) {
+:where(dir, dl, menu, ol, ul) :where(dir, dl, menu, ol, ul) {
  margin-block-end: 0;
  margin-block-start: 0;
}

Explanation:

For one hand, WebKit's UA stylesheet was updated on May 14, 2023 to "Partial Sync UA stylesheet rules as per HTML Spec for 'lists'":

:is(dir, dl, menu, ol, ul) :is(dir, dl, menu, ol, ul) {
    margin-block-start: 0;
    margin-block-end: 0;
}

So I think the ", and Safari" part could be removed from the comment.

On the other hand, Blink (Chrome and Edge) has not yet updated its rule for nested lists:

ol ul, ul ol, ul ul, ol ol {
    margin-block-start: 0;
    margin-block-end: 0
}

which does not include dir, dl, or menu.

The current rule from normalize.css does include dl, but not dir or menu, as Gecko, WebKit, and the HTML spec do. I suggest changing it to match them all for consistency until Blink is updated.

What do you think?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions