HTML and CSS Reference
In-Depth Information
“Details” or a localized equivalent (in browsers localized in other languages). The
summary
element can
only contain text or phrasing elements; sorry, no headings allowed.
Figure 8-32.
Two examples of the
details
and
summary
elements in Chrome, with a bit of additional styling. The box
on the left shows a
details
element in the opened state and the one on the right is closed.
Chrome is the only browser to support collapsing
details
elements without JavaScript at the time we're
writing this. These elements are still very new and there are lingering questions about styling, interaction,
and accessibility that need to be hammered out, but more browsers should implement these elements
soon.
Required Attributes
Neither the
details
nor
summary
elements require any attributes.
Optional Attributes
open
: a Boolean attribute indicating that the
details
element should be open when the page
initially loads.
menu
The
menu
element represents a list of commands or actions the user can trigger. In a supporting browser,
the menu might be presented in a contextual “right click” menu, as a menu in the browser's toolbar, or as
an ordinary list on the page (which could be styled any number of ways with CSS). You can indicate the
type of menu with the optional
type
attribute and the values
context
,
toolbar
, or
list
, with
list
being
the default type if the attribute is missing or empty.
This element was first introduced long ago, but was formally deprecated in HTML 4, only to be resurrected
and redefined in HTML5. Unfortunately it's rather difficult for us to demonstrate how the
menu
element
works because not a single browser in the land has properly implemented it at the time of writing. Some
browsers (Firefox, for example) do support a form of contextual menus using the
menu
element, but the
particular implementation is outdated and not compliant with the current state of the HTML5 specification.
So we're afraid our coverage of the
menu
and
command
elements will be pure theory from here on.