Elementos details e summary da HTML5

Tom Leadbetter publicou esta matéria no site html5Doctor sob licença Creative Commons que eu traduzi para meus leitores.

Nota: Atualizei essa matéria em 2020-04-18, mantendo o texto original marcado com a tag <del>texto original</del>

Quantas vezes você precisou escrever código JavaScript para criar um widget interativo destinado a obter o efeito mostrar/esconder conteúdos? Talvez você tenha até usado uma biblioteca JavaScript inteira para conseguir este efeito. Bem, alegre-se! a HTML5 provê um mecanismo capaz de criar o efeito com uso de umas poucas linhas de marcação HTML e sem qualquer JavaScript (dependendo do navegador, é claro, mas veremos isto adiante). (para suporte nos navegadores atuais consulte caniuse — link abre em nova janela)

Assim, apresento-lhes o elemento <details>:

O elemento details destina-se a criar um widget interativo que tem por finalidade fornecer ao usuário informações adicionais sobre um conteúdo em ações revelar/esconder.

— Especificação WHATWG HTML5

Em resumo, podemos usar o elemento <details> para criar um widget tipo acordeão que o usuário poderá abrir e fechar. Dentro do elemento <details> podemos inserir qualquer tipo de conteúdo.

Suporte nos navegadores

Antes de prosseguirmos é bom saber que atualmente, somente o navegador Chrome suporta o elemento <details>. Opera irá suportá-lo em breve (link para conteúdo em inglês), mas neste meio tempo podemos usar alguns polyfills. Então, abra seu Chrome e vamos em frente.
Para suporte nos navegadores atuais consulte caniuse — link abre em nova janela)

Uso de <details>

Existem dois elementos relevantes: <details> e, opcionalmente <summary>. <details> é o container para todo o conteúdo a mostrar/esconder e <summary> contém, — bem, o sumário e o título da seção. Tecnicamente não há necessidade de se usar <summary>. Se não usarmos, o navegador se encarregara de renderizar um texto padrão para o elemento (no Chrome: “details”). Observe a marcação a seguir:

<details>
<summary>mostrar/esconde</summary>
<p class="dest">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eleifend, purus quis laoreet faucibus, ante augue malesuada mi, id rhoncus augue lorem eget elit. Ut sollicitudin sodales purus. Phasellus libero felis, blandit nec, commodo ut, imperdiet ut, nibh. Suspendisse potenti. Donec ullamcorper cursus dolor. Duis vitae ipsum..</p>
</details>

Você pode ver o resultado desta marcação a seguir. Trata-se de um exemplo bem simples, mas ilustra com clareza o efeito mostrar/esconder. Tudo isso sem uso de JavaScript!

mostrar/esconder

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eleifend, purus quis laoreet faucibus, ante augue malesuada mi, id rhoncus augue lorem eget elit. Ut sollicitudin sodales purus. Phasellus libero felis, blandit nec, commodo ut, imperdiet ut, nibh. Suspendisse potenti. Donec ullamcorper cursus dolor. Duis vitae ipsum.

Atributo open

No exemplo anterior o conteúdo é escondido quando a página é carregada. Podemos inverter isto e mostrar o conteúdo usando o atributo boleano open no elemento <details> como mostrado a seguir.

<details open>
<summary>mostrar/esconder</summary>
<p class="dest">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eleifend, purus quis laoreet faucibus, ante augue malesuada mi, id rhoncus augue lorem eget elit. Ut sollicitudin sodales purus. Phasellus libero felis, blandit nec, commodo ut, imperdiet ut, nibh. Suspendisse potenti. Donec ullamcorper cursus dolor. Duis vitae ipsum.</p>
</details>

Observe a seguir o efeito do uso desse atributo.

mostrar/esconder

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eleifend, purus quis laoreet faucibus, ante augue malesuada mi, id rhoncus augue lorem eget elit. Ut sollicitudin sodales purus. Phasellus libero felis, blandit nec, commodo ut, imperdiet ut, nibh. Suspendisse potenti. Donec ullamcorper cursus dolor. Duis vitae ipsum.

Não existe um atributo closed . O conteúdo é escondido por padrão.

Elemento <summary>

Acabamos de ver, rapidamente, <summary> em ação. Como se trata de um elemento para conteúdo textual, nele podemos inserir elementos inline tais como, <span> ou <strong>. Para que iríamos querer isto? Talvez para criar uma referência para estilização ou, tal como as especificações sugerem: criar um rótulo para controle de formulário. Isto seria bem apropriado se funcionasse adequadamente quando implementado:

<details>
<summary>
<label for="name">Name:</label>
</summary>
<input type="text" id="name" name="name" />
</details>

Em geral clicando em qualquer lugar de summary revela-se o conteúdo do elemento <details>. Mas, no exemplo mostrado isto não acontece porque você está clicando no elemento <label> o que resulta em dar o foco ao controle <input> — ainda que ele esteja oculto pelo elemento <details>.

E evidente que este comportamento precisa ser considerado, e você, o que você acha que deve acontecer? Talvez algum fabricante de navegador ao ler esta matéria dê uma olhada neste assunto. 🙂

Aninhando elementos <details>

Se você quiser, pode aninhar <details> dentro de <details>, conforme mostrado neste exemplo válido:

<details>
<summary>Question 1</summary>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
  <details>
  <summary>Related documents</summary>
  <ul>
  <li><a href="#">Lorem ipsum dolor sit amet,  consectetuer adipiscing elit.</a></li>
  <li><a href="#">Aliquam tincidunt mauris eu  risus.</a></li>
  <li><a href="#">Lorem ipsum dolor sit amet,  consectetuer adipiscing elit.</a></li>
  <li><a href="#">Aliquam tincidunt mauris eu  risus.</a></li>
  </ul>
  </details>
</details>

Exemplos

Então, quando usar <details>? FAQs é a primeira resposta que ocorre. As pessoas normalmente usam o efeito mostrar/enconder para FAQs, assim elas são uma grande candidata a <details>.

Considere também usar este elemento para criar índices. O índice pode ser uma área fixa na tela. Talvez algo como mostrado neste exemplo?

Você pode usar <details> para alterar a visibilidade dos comentários em um blog, perfis de usuários, detalhes de download, formulários complexos ou em aplicações web como mostrado no exemplo a seguir, constante das especificações:

Exemplo de uso de <details> retirado das especificações.

Na verdade, uma simples olhada no WordPress nos mostra uma série de lugares para uso <details>. Por favor, compartilhe, nos comentários, sua opinião e ideias a respeito do uso de <details>.

Estilização

Como podemos estilizar este efeito? Bem para estilizar o widget em enginesWebKit você pode usar a pseudo classe CSS ::-webkit-details-marker. Veja aqui uma pequena demonstração:

details summary::-webkit-details-marker {
background: red;
color: #fff;
font-size: 500%;
}

Podemos ainda posicionar o widget. Aqui ele foi flutudo à direita. Bem, isto é o que temos por ora.

Como substituir o ícone padrão do widget por um personalizado? Usando um seletor de atributo você pode detectar se o elemento <details> está aberto ou fechado e aplicar uma imagem de fundo adequada. Criamos este exemplo para demonstrar a mudança do ícone, mas em vez de usar uma imagem de fundo inserimos o ícone com uso do pseudo-elemneto :after:

summary::-webkit-details-marker {
display: none
}
summary:after {
background: red;
border-radius: 5px;
content: "+";
color: #fff;
float: left;
font-size: 1.5em;
font-weight: bold;
margin: -5px 10px 0 0;
padding: 0;
text-align: center;
width: 20px;
}
details[open] summary:after {
content: "-";
}

No exemplo, usamos os caracteres “+” e “-” como ícone no widget. Dependendo do caso você poderá usar o pseudo-elemento :before no lugar de :after, mas convém ressaltar que ambos permitem o uso de imagem.

O seletor de atributo details[open] cria algumas possibilidades interessantes. E, como nós somos doutores em estética, criamos um exemplo mais refinado como mostrado na imagem a seguir:

Elemento <details> estilizado no navegador Chrome

Seria interessante (embora não necessariamente boa solução) usar as funcionalidades CSS para transições para animar a abertura e fechamento de <details>, mas por enquanto não podemos contar com isto .

Acessibilidade

Lamentavelmente à época que este artigo foi escrito o elemento <details> não é acessível via teclado. Steve Faulkner escreveu:

Em resumo, hoje em dia não há suporte para acesso via teclado e a informação não é passada às tecnologias assistivas.

Tente você mesmo . Se você abrir <details> com o mouse você poderá navegar pelo conteúdo exposto com uso do teclado, mas seria necessário também, poder abrir e fechar o widget com o teclado. Isto não é ideal, mas tenho certeza que os desenvolvedores do Chrome resolverão o problema em breve. (não é mesmo?).

Alternativas

Antes que alguém diga que isto não funciona no IE6, eu digo que sei disto. Graças e obrigado a pessoas talentosas existem alternativas elegantes. Conforme consta desta conveniente lista de cross-browser polyfills existem duas opções e ambas requerem o uso de jQuery:

• <details> fallback via jQuery por Mathias Bynens
• Another <details> alternative, also based on jQuery por Manuel Bieh

Muitos de vocês usam Modernizr para detecção de funcionalidades, mas Modernizr atualmente não verifica suporte para details. Como explicado na opção criada por Mathias, podemos usar o seguinte JavaScript para detecção:

<script>
if (!('open' in document.createElement('details'))) {
alert("No details");
}
</script>

Atualização: Mathias postou um comentário no artigo original observando que o código acima não é 100% confiável, pois retorna falso em algumas versões do navegador Chrome. Assim, considere usar este código Modernizr para detecção do elemento details.

Por quê este tipo de interação?

A funcionalidade está aí gratuitamente, mas por que criar este widget na HTML5? Bem, como tantas outras funcionalidades da HTML5 criar widgets é muito fácil com HTML5. Seletores de datas, controles corrediços, barras de progresso e agora acordeão podem ser implementados facilmente sem JavaScript. Quem sabe o que virá por aí? Abas nativas seria uma grande funcionalidade. 🙂

Sumário

Neste artigo mostramos como usar os elementos <details> e <summary>. <details> é um elemento novo que usado em conjunto com o elemento <summary> cria, nativamnete no navegador, widget interativos para o efeito mostrar/esconder.

Hoje em dia <details> funciona somente no Chrome, mas esperamos que isto mude muito em breve. Existe somente um truque CSS a usar, trata-se de — ::-webkit-details-marker — mas as demais funcionalidades das CSS podem ser largamente usadas. Se você tem alguma experiência ou ideias sobre o elemento <details> compartilhe nos comentários.