🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

【CSS】Método básico para ocultar elementos｜Uso de .d-none

Este guia explica como usar display: none; no CSS para ocultar facilmente elementos específicos do HTML. Ele permite ocultar os elementos sem removê-los da estrutura HTML.

🔹 Código parcial

<div class="d-none">
  Este elemento será ocultado.
</div>

<style>
.d-none {
  display: none;
}
</style>

💻 Código totalmente funcional (basta copiar este código para funcionar no HTML)

<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <title>Exemplo de Ocultação</title>
  <style>
    .d-none {
      display: none;
    }
  </style>
</head>
<body>
  <div class="d-none">
    Este elemento será ocultado.
  </div>
</body>
</html>

🧩 Aplicações práticas e usos

display: none; é o método mais básico para ocultar elementos da tela do usuário. Ele é comumente usado em interfaces dinâmicas, pois pode ser facilmente alternado com JavaScript ou CSS.

Entretanto, mesmo que o elemento esteja oculto, ele ainda existe no HTML, portanto, deve-se tomar cuidado em relação ao SEO e à acessibilidade, pois leitores de tela ou outras tecnologias assistivas podem detectar esse conteúdo.

Em frameworks como o Bootstrap, a classe .d-none é padronizada, e a alternância de visibilidade responsiva também é possível, utilizando classes como .d-md-none.

🎯 Explicação adicional sobre as técnicas de ocultação

Usar display: none; permite ocultar elementos sem removê-los da estrutura HTML. Isso é útil para mostrar ou ocultar elementos conforme a interação do usuário ou outras condições com JavaScript.

No entanto, ao usar esse método, o elemento será considerado "inexistente", o que significa que elementos de formulário ocultos não receberão foco e não afetarão o layout.

Em contrapartida, visibility: hidden; oculta o elemento, mas mantém o espaço reservado para ele. Ao usar display: none;, o elemento é ocultado completamente; quando se deseja manter o layout, mas ocultar o conteúdo, utiliza-se visibility: hidden;.

Se você deseja ocultar um elemento apenas em dispositivos móveis, pode usar uma consulta de mídia como @media (max-width: 768px) { .d-none-mobile { display: none; } }. Isso permite ocultar elementos de maneira flexível com base no tamanho da tela ou outras condições.

Copiado!

Modelos Relacionados