Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

Intent to Implement: HTML <details> and <summary> tags

110 views
Skip to first unread message

Ting-Yu Lin

unread,
Nov 19, 2015, 4:22:17 AM11/19/15
to dev-platform
Summary: The <details> is used as a disclosure widget from which the user
can
obtain additional information or controls. <summary> is used as a summary or
legend of the details. To expand the details, the user could click on the
summary or by adding a bool attribute 'open' to the details.

An example: Open the example in Chrome or Safari. http://simpl.info/details/

Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=591737

Link to standard:
https://html.spec.whatwg.org/multipage/forms.html#the-details-element

Platform coverage: All platforms.

Estimated or target release: Firefox 45 or 46.

Preference behind which this will be implemented: No preference yet. Will
add if needed.

DevTools bug: None.

Do other browser engines implement this: Implemented by Chrome and Safari.
http://caniuse.com/#feat=details

Jonas Sicking

unread,
Nov 19, 2015, 2:23:00 PM11/19/15
to Ting-Yu Lin, dev-platform
I'll give the same feedback here as I did for <input type=date>.

I don't think authors will use this very much unless they can style it.

In this case enabling styling might not actually be that hard either,
so especially worth looking into.

/ Jonas
> _______________________________________________
> dev-platform mailing list
> dev-pl...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/dev-platform

Xidorn Quan

unread,
Nov 19, 2015, 6:06:27 PM11/19/15
to Jonas Sicking, Ting-Yu Lin, dev-platform
On Fri, Nov 20, 2015 at 6:22 AM, Jonas Sicking <jo...@sicking.cc> wrote:
> I'll give the same feedback here as I did for <input type=date>.
>
> I don't think authors will use this very much unless they can style it.

This pair of tags has been widely used on the web.

The first example is experimental CSS specs like
https://drafts.csswg.org/css-backgrounds-4/ . The "Not Ready For
Implementation" notice there is actually a <details>/<summary> which
is collapsible in Chrome and Safari, but doesn't work in Firefox.

In addition, Drupal, a CMS framework which backs at least 2.1% of all
websites worldwide (according to Wikipedia), has adopted these tags in
version 8.0 which was released yesterday.

- Xidorn

Jonas Sicking

unread,
Nov 19, 2015, 7:01:39 PM11/19/15
to Xidorn Quan, Ting-Yu Lin, dev-platform
Cool. Maybe I was overly pessimistic. Though the first example here
does seem to significantly style how the elements are rendered.

I don't know if the second one does or not.

/ Jonas

L. David Baron

unread,
Nov 19, 2015, 7:46:10 PM11/19/15
to Jonas Sicking, Ting-Yu Lin, dev-platform
On Thursday 2015-11-19 11:22 -0800, Jonas Sicking wrote:
> I'll give the same feedback here as I did for <input type=date>.
>
> I don't think authors will use this very much unless they can style it.

There are some styling mechanisms in other browsers, but I don't
think they are standardized, and I don't know if all the existing
implementations of <summary>/<details> have a way to style the
disclosure triangle.

I previously told Ting-Yu that whether we want to gate shipping
<details>/<summary> in order to get some form of styling implemented
may depend on whether all of the existing implementations have a
styling mechanism (and perhaps even on how consistent they are).

Support for styling the disclosure triangle is covered by:
https://bugzilla.mozilla.org/show_bug.cgi?id=1221416

-David

--
𝄞 L. David Baron http://dbaron.org/ 𝄂
𝄢 Mozilla https://www.mozilla.org/ 𝄂
Before I built a wall I'd ask to know
What I was walling in or walling out,
And to whom I was like to give offense.
- Robert Frost, Mending Wall (1914)
signature.asc

Karl Dubost

unread,
Nov 19, 2015, 8:33:54 PM11/19/15
to Jonas Sicking, Ting-Yu Lin, dev-pl...@lists.mozilla.org
Jonas,

Le 20 nov. 2015 à 04:22, Jonas Sicking <jo...@sicking.cc> a écrit :
> I don't think authors will use this very much unless they can style it.

DetailsElement - 0.0856%
https://www.chromestatus.com/metrics/feature/timeline/popularity/480

(features are at risk of removal for Chrome when below 0.03%)

hope it helps.

--
Karl Dubost, Mozilla
http://www.la-grange.net/karl/moz

Jet Villegas

unread,
Nov 19, 2015, 9:16:24 PM11/19/15
to Karl Dubost, Ting-Yu Lin, group, mozilla.dev.platform, Jonas Sicking
On Thu, Nov 19, 2015 at 5:33 PM, Karl Dubost <kdu...@mozilla.com> wrote:

> Jonas,
>
> Le 20 nov. 2015 à 04:22, Jonas Sicking <jo...@sicking.cc> a écrit :
> > I don't think authors will use this very much unless they can style it.
>
> DetailsElement - 0.0856%
> https://www.chromestatus.com/metrics/feature/timeline/popularity/480
>
> (features are at risk of removal for Chrome when below 0.03%)
>
> hope it helps.
>

input=date seems clearly in that at-risk category--perhaps for the lack of
styling that Jonas noted:
https://www.chromestatus.com/metrics/feature/timeline/popularity/28

I expect we'll see more <details><summary> usage once all the browsers have
it:
http://caniuse.com/#feat=details

BTW, please ensure that we avoid the known issues noted on that caniuse
link.

Nice job, Ting-Yu!

--Jet

Anne van Kesteren

unread,
Nov 20, 2015, 4:11:56 AM11/20/15
to Jet Villegas, Karl Dubost, Ting-Yu Lin, group, mozilla.dev.platform, Jonas Sicking
On Fri, Nov 20, 2015 at 3:16 AM, Jet Villegas <jvil...@mozilla.com> wrote:
> I expect we'll see more <details><summary> usage once all the browsers have
> it: http://caniuse.com/#feat=details

Agreed, I think the same is true for <input type=date> et al. Styling
is an important consideration and we should solve it if we can. But
the bare basics for a feature is having it work across browsers. Only
shipping something on phones, because we have not solved custom
styling on desktop is rather lame.


--
https://annevankesteren.nl/

Cameron McCormack

unread,
Nov 20, 2015, 4:33:32 AM11/20/15
to Ting-Yu Lin, dev-platform
Ting-Yu Lin:
> Summary: The <details> is used as a disclosure widget from which the user
> can
> obtain additional information or controls. <summary> is used as a summary or
> legend of the details. To expand the details, the user could click on the
> summary or by adding a bool attribute 'open' to the details.
>
> An example: Open the example in Chrome or Safari. http://simpl.info/details/
>
> Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=591737

Great work Ting-Yu, and thanks very much for picking this up!

--
Cameron McCormack ≝ http://mcc.id.au/
0 new messages