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.