Opera Developer News

At Opera HQ, we're implementing the HTML5 <details> element. It's a groovy interactive element that functions as "a disclosure widget from which the user can obtain additional information or controls".

Most browsers will implement it as an expando box: when the user clicks on some browser-generated icon (such as a a triangle or down arrow) or the word "details" - which can be replaced by an author supplying their own rubric in a child <summary> element - the element will slide open revealing some further details inside. These could be a full description of an image or graph; a description of a complex table structure; advanced options for a search form; or just about anything else, and wouldn't need JavaScript to function.

It is vital that browsers implement HTML interoperably. So Opera's Lachlan Hunt has written to the WHATWG (the group speccing HTML5 with the W3C) to detail how Opera is implementing it, in the hope of getting feedback from developers, other browser vendors and (we hope) encouraging vendors to share information and implement similarly.

Our main aims in implementing <details> are:

• The disclosure triangle must be styleable by authors using CSS without complex hacks, either to replace with their own icon, remove it entirely, or adjust other common styles. Ditto with <summary>: we cannot require, nor expect, authors to use XBL to restyle these elements.
• Styles we use internally in the shadow tree shouldn't do weird things to author styles or surrounding content. Generally, the way that authors style the element and users interact with it should be simple and not contain any nasty surprises.
• Accessibility: The summary element must be focussable by default and keyboard activation must be possible.
• Internationalisation: The disclosure triangle and any applicable margins and padding must render on the opposite side and point the opposite direction for RTL languages.
• We should reuse as much existing CSS styles as possible to achieve the effects, avoiding unnecessary creation of special properties or values without a good reason.

(I've summarised and paraphrased Lachy's fuller explanation.)

So: if you're a web author or an implementor, please read the email and respond on the WHATWG list (anyone can join).

Hurray for open discussion that leads to an interoperable Web! (But please, do it on the mailing list and not here!)