Normalize.css: Set <summary> elements to display:list-item

Created on 2 Jul 2016 · 10Comments · Source: necolas/normalize.css

The disclosure triangle of <summary> blocks does not show in Firefox when it is set to display:block; According to the bugzilla report (linked below), this is the expected behavior. Therefore it's default setting should be set as display:list-item (CC @silverwind).

References:

https://gist.github.com/ericclemmons/b146fe5da72ca1f706b2ef72a20ac39d
https://bugzilla.mozilla.org/show_bug.cgi?id=1283989
https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements

bug

Source

Mottie

👍1

Most helpful comment

This is also live in v5.0.0 which has been tagged and published to npm as normalize.css.

jonathantneal on 3 Oct 2016

🎉4

All 10 comments

I think this is more of an GitHub bug than anything, they explicitely set summary {display:block} which causes the incorrect rendering on Firefox.

silverwind on 2 Jul 2016

If you look at GitHub's current css source, they are using:

/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */

Mottie on 2 Jul 2016

Ah, didn't realize that display: block is happening in normalize.css, so it's a valid issue indeed!

silverwind on 3 Jul 2016

Thanks for letting me know, and also for the link in the spec. I’ll take care of this as soon as I can validate this in a test. Looks like the new display property will work just fine per https://developer.mozilla.org/en-US/docs/Web/CSS/display#compat-desktop (but again, testing to be sure)

jonathantneal on 4 Jul 2016

Implementation status:
Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1283989
Chrome: https://bugs.chromium.org/p/chromium/issues/detail?id=590014

Browser “Last 2” test results: https://app.crossbrowsertesting.com/public/i76b092cd2b52b86/screenshots/z344607e8fe6c4982ab8

Pull Request:
https://github.com/necolas/normalize.css/pull/606

jonathantneal on 6 Jul 2016

👍1

Odd... the internal Firefox stylesheet (v47.0.1; resource://gre-resources/html.css) sets summary with a display:block initially. But if it is wrapped inside a <details> element, this definition applies:

details > summary::-moz-list-bullet {
  list-style-type: disclosure-closed;
  /* Prevent elements in summary being selected when clicking on the triangle. */
  -moz-user-select: none;
}

details[open] > summary::-moz-list-bullet {
  list-style-type: disclosure-open;
}

So I think the tests need to be updated.

Mottie on 6 Jul 2016

The UA sheet looks alright for me in Firefox 49. The pref was flipped on in 49, resulting in display:list-item for details > summary, and display:block for standalone summary, presumably for compatibilty reasons.

summary {
  display: block;
}

@supports -moz-bool-pref("dom.details_element.enabled") {
  details > summary:first-of-type,
  details > summary:-moz-native-anonymous {
    display: list-item;
  }
}

silverwind on 6 Jul 2016

<details> and <summary> will ship in Firefox 49 so the stylesheet before this version is outdated.