Entendendo os elementos "details" e "summary"

() translation by (you can also view the original English article)

Uma variedade de bibliotecas JavaScript são desenvolvidas para melhorar a interatividade de websites através de widgets. Da mesma forma, o HTML5 vem incorporando esses componentes interativos, transformando em estes recursos web nativos (integrado ao HTML5, sem dependências). Neste post, vamos dar uma olhada neste elemento chamado <details> (e consequentemente o elemento <summary>) que nos possibilita criar uma espécie de menu accordion.

Utilizando o `<details>` e `<summary>`

O elemento <details> pode ser utilizado em qualquer parte do arquivo HTML desde que esteja dentro do <body>. Dê uma olhada no exemplo abaixo:

1	<details>
2	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, impedit.</p>
3	</details>

O exemplo acima apresenta o elemento <details> com um parágrafo. Note a similaridade com outros elementos HTML. Este define uma seção semântica que pode conter elementos filho, como imagens, através do elemento <figure>, formulários com o elemento <input> ou <textarea>, ou até mesmo outros elementos <details>.

A unica diferença significativa seria como diferentes navegadores exibem o elemento no front-end, ou seja, na parte visual/design do código. Navegadores como o Chrome, Safari, e a ultima versão do Opera, apresentam o elemento com o pequeno triangulo com a nomenclatura Detail, ou detalhes.

O elemento <details> se parece com um menu accordion, onde os detalhes inicialmente ficam escondidos. Clicando na seta, ou triangulo, o conteúdo escondido é apresentado. Também podemos selecionar o elemento com a tecla Tab e então pressionar a tecla Espaço ou Enter para acionar o elemento.

Nota: a AccesibleCulture analisa a acessibilidade do recurso em Screen Readers and details/summary.

Estado aberto (ou Open State)

Ao abrir o elemento de detalhes, e analisar através do devtools, você vai notar que o navegador adicionou o atributo open ao elemento enquanto ele está apresentando os detalhes. Também podemos adicionar o atributo open manualmente no elemento <details>, se a intenção for apresentar o conteúdo dos detalhes por padrão.

1	<details open>
2	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, impedit.</p>
3	</details>

O elemento Summary

O elemento <details> opera junto com outro elemento chamado <summary>; estes dois elementos devem ser utilizados em conjunto, mas utilizar o elemento <summary> é opcional.

O que acontece quando utilizamos o Summary?

1	<details open>
2	<summary>Hello World</summary>
3	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, impedit.</p>
4	</details>

No exemplo acima, o padrão exibido no Details será substituído por Hello World.

Agrupamento (ou Nesting)

Conforme mencionado, o elemento <details> pode ter outros elementos <details> agrupados dentro dele, como por exemplo:

<details>
    <summary>Hello World</summary>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, impedit.</p>
    <details>
        <summary>Hi, How are you?</summary>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, impedit.</p>
    </details>
</details>

Essa prática pode apresentar problemas na interface (o que não seria o caso com listas agrupadas) do navegador. Como você pode ver, o elemento filho agrupado é alinhado ao lado do elemento pai, o que pode afetar a hierarquia das informações.

Podemos contornar essa situação com alguns estilos CSS. Bom, vamos ver que estilos podemos utilizar:

Estilizando o Details com CSS

Os elementos <details> e <summary> aceitam estilos CSS como qualquer outro elemento HTML; Selecione o elemento através de um selector, class ou id, e adicione as seguintes propriedades de estilo.

details {
    padding: 15px;
    background-color: #f6f7f8;
    margin-bottom: 20px;
}

Você também pode usar atributos do elemento no selector para especificar estilos quando o elemento estiver no estado aberto.

1	details[open] {
2	/* the style goes here */
3	}

O elemeto <summary> também pode ser estilizado. Quando passamos o cursor do mouse sobre elementos clicáveis, como um botão ou um link, o cursor normalmente apresenta o pointer (simbolo que indica que o item pode ser clicado). Mas esse não é o caso para o elemento <summary>, que também é clicável. O cursor vai na verdade, apresentar o cursor text, que não agrada muito. Para contornar a situação, ao invés disso, podemos definir o cursor como pointer através de estilos.

1	summary {
2	cursor: pointer;
3	}

Estilizando o Triangulo (triangle)

Agora, a pergunta que não quer calar: podemos estilizar o pequeno triangulo que simboliza os detalhes? Ainda não existe um padrão, mas o Webkit utiliza o seguinte pseudo-elemento para isso, ::-webkit-details-marker. Assim podemos customizar os indicadores padrões, alterando a cor, o plano de fundo, e até mesmo o seu tamanho.

1	summary::-webkit-details-marker {
2	color: #fff;
3	background-color: #000;
4	}

Infelizmente, não é possível trocar o indicador através do ::-webkit-details-marker — pelo menos, enquanto escrevo este artigo. A unica maneira de substitui-lo é utilizando o ::before ou ::after.

summary::-webkit-details-marker {
    display: none;
}
summary:before {
    content: "\2714"; /* the new icon */
    color: #696f7c;
    margin-right: 5px;
}

Suporte dos Navegadores (Browser Support)

O suporte dos navegadores para os dois elementos só tem aumentado durante os últimos dois anos. Em 2011 e 2012, o Chrome era o único navegador capaz de renderizar os elementos <details> e <summary> - por outro lado, a implementação pecava em relação falhas de acessibilidade. Apenas recentemente o Safari e o Opera aplicaram o recurso.

Então, como o suporte no FireFox e Internet Explorer é duvidoso, podemos utilizar alguns polyfills para imitar a funcionalidade, como essa solução criada pelo Mathias Bynens, jQuery Details. Apesar desse polyfill ter dependências do jQuery, ele é menos que a biblioteca jQuery UI (que possui o mesmo workaround).

Uma vez implementado, o estilo segue o mesmo padrão anterior.

summary:before {
    content: "\25B8"; /* unicode character of the litle triangle  */
    color: #000;
    margin-right: 5px;
}

Mais informações sobre o suporte dos navegadores ao recurso podem sem encontradas em caniuse.com.

Exemplos de Utilização do Recurso

Você já deve ter visto estes elementos por aí na web. Em sites de compras, por exemplo, você ja deve ter notado que alguns websites incluem informações adicionais dos produtos em um menu sanfona. Ou, eles podem ser utilizados em conjunto com a barra lateral, conforme a imagem abaixo.

Os elementos <details> e <summary> também são perfeitos para organização de documentações e FAQs. Eu criei uma demonstração, que você pode acessar aqui. Sinta-se livre para alterar o código.

Conclusão

Como Aaron Lumsden disse neste post

"os websites estão utilizando mais informações e se parecendo cada vez mais com um app"

sendo assim, esse elemento é muito bem vindo. Algum dia, talvez com o ascensão dos web components, criar um website ou webapp possa ser mais simples e menos dependente de bibliotecas JS, como no caso da utilização de um simples menu sanfona.

E você, já utilizou alguma vez o elemento <details> e <summary> em algum projeto web?