Como ya he comentado más de una vez por aquí, cuando necesitamos ocultar un elemento HTML para mostrarlo u ocultarlo mediante Javascript (un menú desplegable, una capa colapsable, etc), no debemos ocultarlo previamente en el HTML, ya que ese elemento deberá permanecer visible cuando no haya Javascript.
Para ello se pueden utilizar varias técnicas como ocultar estos elementos mediante Javascript añadiendo el estilo display: none, (sí, en la mayoría de casos no será incorrecto que el elemento oculto también lo esté para lectores de pantalla), o bien añadiendo una clase “oculto”, “hidden” o similar definida en la CSS que se encargue de ocultar elementos.
El problema de esta técnica es que cuando no podemos usar alguno de los métodos que nos ofrecen las librerías Javascript para ejecutar funciones cuando el DOM está disponible (ready de jQuery, domready de Mootools o dom:loaded de Prototype), nos encontramos con el feo efecto de que nuestros elementos ocultos aparecen un instante visibles hasta que toda la página está cargada (onload).
Para evitar esto se suelen utilizar otras técnicas no muy limpias de la vieja escuela, como colocar el código Javascript en el HTML, o lo que es peor, usar estilos en línea en la capa o elemento que se ha de ocultar.
Pues bien, gracias a Scriptia, descubro este otro método para ocultar elementos que se basa en añadir una clase al elemento HTML mediante la propiedad documentElement del objeto document. Y cito lo que nos comenta Choan sobre document.documentElement:
- Para modificar ‘document.documentElement’ no es necesario esperar a que se complete la carga del documento.
- La especificación HTML 4.01 no permite el uso del atributo ‘class’ en el elemento ‘html’. En mi opinión, como la jugada la hacemos por scripting, esto no invalida el documento.
Para utilizarlo nos propone usar una variable en la que detectamos el soporte del DOM por el navegador:
var isSupported = document.getElementById && document.getElementsByTagName;
Y una sencilla instrucción:
if (isSupported) {
document.documentElement.className = "js";
}
Por último, para evitar tener rondando por ahí una variable global, podemos colocarlo todo dentro de una función anónima autoejecutable, o lo que también se conoce como closure, si no estoy equivocada:
(function(){
var isSupported = document.getElementById && document.getElementsByTagName;
if(isSupported){
document.documentElement.className = "js";
}
})();
En la CSS aplicaríamos el display none sólo a los elementos hijos de los que tienen la clase “js”:
.js .oculto{ display: none; }
He probado esta técnica en una página en la que he usado 4 imágenes pesadas, para comprobar que la capa que se oculta mediante Javascript, efectivamente lo hace sin necesidad de que la página esté cargada y ¡funciona!
Demo ocultación de elementos mediante javascript.
Por si alguien se pregunta quién va por el mundo con Javascript deshabilitado, no hace falta irse a buscar al usuario de Lynx o a ese otro que por alguna extraña razón decide rebuscar la opción de deshabilitar Javascript en su navegador aunque no sepa lo que es ni le importe. El individuo que va por ahí sin Javascript existe y puede ser perfectamente un usuario avanzado que usa un lector de feeds, un móvil con soporte limitado de Javascript, o ve una web desde su cliente de correo.
