El atributo “oculto” es visiblemente débil | Programar Plus

0

Hay un atributo HTML que hace exactamente lo que cree que debería hacer:

<div>I'm visible</div>
<div hidden>I'm hidden</div>

Incluso tiene un gran soporte para navegadores. ¿Es útil? Uhm. Quizás. Realmente no.

A Adam Laki le gusta la semántica:

Si usamos el atributo oculto, mejoramos un poco nuestra semántica. Cualquiera entenderá qué significa un atributo “oculto” en un elemento.

Monica Dinculescu lo llama mentira:

el hidden La regla es un estilo de agente de usuario, lo que significa que es menos específica que un estornudo moderado. Esto significa que tu favorito display el estilo lo anulará:

<style>
  div { display: block; }
</style>
<div hidden>
  lol guess who's not hidden anymore
  hint: it's this thing
</div>

Entonces, dos problemas relacionados …

  1. Es extremadamente débil. Literalmente cualquier cambio en el display propiedad que no sea la none el valor en el elemento con cualquier selector de fuerza lo anulará. Al igual que cualquier otra propiedad de visualización, como width o lo que sea, excepto que de alguna manera se siente peor tener un hidden atributo activamente en un elemento y que no esté realmente oculto.
  2. El display La propiedad está tristemente sobrecargada de responsabilidades. Sería genial si hidden era una propiedad de CSS que podría estar a cargo de la visibilidad / acceso de los elementos en lugar de la misma propiedad que controla el tipo de bloque que es. Pero, por desgracia, la compatibilidad con versiones anteriores 4-lyfe de la web detiene eso (lo cual es bueno para la salud de la web en general).

Si realmente amas la semántica del atributo, Monica sugiere:

[hidden] { display: none !important; }

Parece una buena adición a cualquier “reinicio” o hoja de estilo base.

De lo contrario, la técnica clásica de ocultar cosas con una clase está absolutamente bien. Normalmente tengo una clase de utilidad:

.hide, .hidden {
  display: none;
}

Pero recuerde que siempre hay un millón de formas de hacer las cosas. Regularmente me encuentro haciendo mecanismos únicos de ocultar / mostrar. Por ejemplo, un menú en el que necesita alternar la visibilidad con estilo, pero permanecer accesible en todo momento …

.menu {
   opacity: 0;
   visibility: hidden;
   transition: 0.2s;
   transform: translateX(20px);
   &[data-open] {
     opacity: 1;
     visibility: visible;
     transform: translateX(0);
   }
}