Hace unos días descubrí una nueva posibilidad que ofrece HTML5: enlazar a una hoja de estilos diferente (o varias) si el usuario tiene desactivado JavaScript.

¿Cómo se puede conseguir? Muy fácil: poniendo el link al archivo CSS dentro de una etiqueta <noscript>. Esto, antes de HTML5, no era correcto. En la nueva versión, está aceptado.

Esta opción, que estaba deseando que existiera, la descubrí de casualidad mientras leía la documentación de adapt.js, un “compañero” de 960.gs para adaptar las páginas a dispositivos con diferentes pantallas (móviles, tablets, etc). De hecho, usan esta opción para servir el CSS por defecto.

Utilidad

¿Para qué puede servir? Pongamos por ejemplo que creas una galería de fotos (tú mismo desde 0 o con algún tipo de librería), que se irán mostrando poco a poco por pantalla. Si alguien entra en la página con JavaScript desactivado, pueden acabar pasando dos cosas:

  • En el mejor de los casos verá todas las fotos en pantalla y podrías darle un estilo aceptable con CSS igualmente.
  • En el peor, el diseño se rompería por todas partes y/o no se verían más que unas pocas fotos.

Conseguir, en el primer caso, que la página se siga viendo bien suele implicar establecer los estilos sin JavaScript en el archivo CSS y luego sobreescribirlos de alguna forma con JavaScript. Esto implica que, para que una gran minoría de usuarios (los que tienen JS desactivado) vean la página, los navegadores de la mayoría de usuarios tienen que soportar el doble de carga de trabajo (y descarga).

La etiqueta <noscript> al rescate

Esto se invierte usando la etiqueta <noscript>. Por si no la conocéis, esta etiqueta muestra el contenido incluído en su interior sólo a los usuarios que navegan con JavaScript desactivado. El problema era que, hasta ahora, sólo se podía usar en el <body> del HTML y los archivos CSS se cargan en el <head> . Por eso, su uso más habitual acababa siendo simplemente mostrar algún tipo de mensaje de “necesitas activar JavaScript para navegar por esta página”.

Sin embargo, al poder incluirla en la cabecera podemos hacer cosas más útiles, como en este caso. La idea es establecer por defecto los estilos CSS para quien tenga JavaScript activado e incluirlos con normalidad:

<link rel="stylesheet" type="text/css" href="estilo_con_js.css"/> 
(más código)

Los estilos para la gente sin JavaScript se incluyen después dentro de la etiqueta <noscript>:

<noscript>
            <link rel="stylesheet" type="text/css" href="estilo_sin_js.css"/>
 </noscript>

Así, si tienen JavaScript desactivado (y sólo en ese caso), se descargarán la hoja de estilo CSS específica para ver los contenidos sin problemas. Es importante que estos estilos se incluyan después del primer archivo CSS para que puedan sobreescribir los estilos necesarios (consulta en librosweb si tienes dudas sobre la prioridad de las reglas CSS superpuestas).

Ejemplo práctico

Lo podemos probar con un ejemplo muy (MUY) sencillo:

<head> 
<title>Prueba con noscript</title>
        <link rel="stylesheet" type="text/css" href="estilo_con_js.css"/>
        <noscript>
            <link rel="stylesheet" type="text/css" href="estilo_sin_js.css" title="default"/>
         </noscript> 
</head>
<body>
        <h1>Este titular debería cambiar de color</h1>
</body>

El estilo por defecto, el incluido en el archivo “estilo_con_js.css” será este:

h1{
    color: blue;
}

Nada muy complicado, ¿verdad? 😉

La diferencia con “estilo_sin_js.css”, el archivo que verán los que tengan JavaScript desactivado, será que el titular cambia de color de azul a rojo:

h1{
    color: red;
}

Fijaos en que la regla de estilo es exactamente la misma. Si la etiqueta <noscript> no funciona como esperamos, todo el mundo verá el titular en color rojo y habremos fallado estrepitosamente.

Titular en azul para los usuarios con JavaScript

Titular en azul para los usuarios con JavaScript

Por suerte, funciona y el titular se ve azul. Además, como se puede ver en el panel de inspección de firebug, sólo se ha cargado uno de los estilos. ¡Todo ha salido a pedir de Milhouse!

Ahora sólo falta que si desactivamos JavaScript, el encabezado se vea rojo:

Titular en rojo para los usuarios sin JavaScript

Titular en rojo para los usuarios sin JavaScript

En efecto, el estilo cambia a rojo ya que, como muestra el panel de inspección, se ha cargado el estilo extra y este ha sobreescrito el estilo normal.

Este ejemplo es extremadamente sencillo, pero sirve para ver las nuevas posibilidades que nos ofrece HTML5. Para casos más complejos sólo habría que crear más reglas de estilo, pero la idea es la misma: sobreescribir estilos en un archivo CSS secundario.

La ventaja de esta técnica es que la gran mayoría de usuarios se ahorrarán el tener que descargarse y sustituir estilos CSS redundantes. Además, el código JavaScript también será más sencillo: al crearlo ya no tendremos que preocuparnos tanto de los visitantes que naveguen con este lenguaje desactivado. De eso se ocupará el CSS, como debe ser.

Esta entrada fue publicada en Tutorial

Deja un comentario

Facebook