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

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

Esta guía explica cómo usar display: none; en CSS para ocultar fácilmente elementos específicos del HTML. Permite ocultar elementos sin eliminarlos de la estructura HTML.

🔹 Código parcial

<div class="d-none">
  Este elemento se ocultará.
</div>

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

💻 Código completamente funcional (basta con copiar este código para que funcione en HTML)

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Ejemplo de Ocultación</title>
  <style>
    .d-none {
      display: none;
    }
  </style>
</head>
<body>
  <div class="d-none">
    Este elemento se ocultará.
  </div>
</body>
</html>

🧩 Aplicaciones prácticas y usos

display: none; es la forma más básica de ocultar elementos de la pantalla del usuario. Se utiliza comúnmente en interfaces dinámicas porque puede alternarse fácilmente con JavaScript o CSS.

Sin embargo, aunque el elemento está oculto, sigue existiendo en el HTML, por lo que es importante tener cuidado con el SEO y la accesibilidad, ya que los lectores de pantalla u otras tecnologías asistivas pueden detectar este contenido.

En frameworks como Bootstrap, la clase .d-none está estandarizada y también es posible alternar la visibilidad de manera responsiva con clases como .d-md-none.

🎯 Explicación adicional sobre las técnicas de ocultación

Usar display: none; permite ocultar elementos sin eliminarlos de la estructura HTML. Esto es útil para mostrar u ocultar elementos según la acción del usuario o condiciones usando JavaScript.

Sin embargo, cuando se usa este método, el elemento se considera "inexistente", lo que significa que los elementos de formulario ocultos no recibirán enfoque y no afectarán al diseño.

En cambio, visibility: hidden; oculta el elemento pero mantiene su espacio. Usa display: none; cuando desees ocultar completamente el elemento, y visibility: hidden; cuando quieras preservar el diseño pero ocultar el contenido.

Si deseas ocultar elementos solo en dispositivos móviles, usa consultas de medios como @media (max-width: 768px) { .d-none-mobile { display: none; } }. Esto te permitirá ocultar elementos de manera flexible según el tamaño de la pantalla u otras condiciones.

¡Copiado!

Plantillas Relacionadas