Scriptia. Javascript y buenas prácticas en español

Ocultar elementos por CSS si y solo si disponemos de javascript

Saltar a Anotaciones relacionadas

Supongamos una linda interfaz en la que algunos elementos no se muestran hasta que el usuario realiza alguna acción. Supongamos que somos hombres de buen corazón y queremos que nuestra aplicación sea accesible sin necesidad de javascript.

1. Si ocultamos esos elementos mediante CSS, quien no tenga javascript no tendrá, jamás de los jamases, acceso a ellos.
2. Si ocultamos los elementos mediante javascript, se producirá algún que otro feo parpadeo (y si son muchos los elementos a ocultar, aumentará el tiempo de proceso).

Veamos cómo podemos evitar ambos problemas con una pequeña combinación de CSS y scripting.

Lo ideal sería que nuestra hoja de estilo supiera si disponemos o no de las funcionalidades javascript necesarias. ¿Imposible? No, amigo, nada es imposible.

Empezaremos por averiguar si el navegador utilizado es lo suficientemente poderoso como para manejar nuestro script:

var isSupported = document.getElementById && document.getElementsByTagName;

Si lo es, modificaremos el árbol del documento añadiendo una clase al elemento html:

if (isSupported) {
    document.documentElement.className = "js";
}

Un par de notas:

1. Para modificar document.documentElement no es necesario esperar a que se complete la carga del documento.
2. 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.

Y en el CSS, la magia:

.js #eula {
    display: none;
}

Pruébalo, merece la pena.