I've got another proposal for making <summary> and <details> easier to implement and - what's more important - easier to understand and thus easier to use. Instead of making <summary> inside <details> working as <legend> inside <fieldset>, we can throw away the <details> tag and make <summary> work like <label> element with form element. There's no need for "open" attribute, instead already existing "hidden" attribute can be used on any HTML element. Clicking on <summary> adds or removes "hidden" attribute from element with given id.

        Here's default UA style:

summary {
  display: list-item;
  list-style-type: -o-disclosure-closed;
}
[hidden] {
  display: none;
}

        Here's example HTML:

<summary for="detailsId">This is summary. Click to show/close details.</summary>
<div id="detailsId" hidden>...</div>

Pros:
1. Simple to understand by web page authors - its representation and semantics play well together.
2. No XBL involved.
3. Nicely rendered by browsers not supporting <summary> tag.
4. No quirky rendering.
5. Less keywords to memorize by web authors, reusing existing keywords in semantically correct way.
Cons:
6. Error-prone for web developers using copy-and-paste method.
7. Additional burden for web developer to maintain summary - id matching. It's equivalent of absent <summary> element in current specification.
8. Magic when it comes to displaying expand marker inside <summary>.

--
Best Regards,
Tomasz Jamroszczak

Reply via email to