Blog Web Standards

Soluções para os problemas enfrentados pelos desenvolvedores HTML e CSS no dia-a-dia

Após uma atualização do Google Chrome, percebemos que todos nossos códigos estavam bugados pois a forma que o navegador estava renderizando a tag details é diferente.

Procuramos formas para resetar essa novidade (seta abre e fecha) e chegamos a alguns códigos para esse HTML:

<details open>
  <summary>Blog Web Standards</summary>
  <aside>Soluções para os problemas enfrentados pelos desenvolvedores HTML e CSS no dia-a-dia.</aside>
</details>

Reset CSS

details summary::-webkit-details-marker { display: none; }

Inclua no CSS essa linha conforme o seus estilos.

Reset do comportamento (abre e fecha)

A princípio desabilitamos com javascript, então escolha alguma das duas opções que desejar, com jQuery ou apenas com javascript sem jQuery.

Com jQuery
$(document).ready(function(){
  $('details summary').click(function(){
    return false;
  });
});
Sem jQuery
window.onload = function() {
	var summary = document.getElementsByTagName("summary");
  for (var i = 0; i < summary.length; i++) { 
  	summary[i].onclick = function () {
    	return false;
  	}
  }
};

Inclua um desses trechos de javascript em seu código confome desejar.

Alguma dúvida, sugestão, melhoras ou outras formas de resolver estamos a disposição

Escreva seu comentário