Ajusta tu CSS a los usuarios con Javascript activado

Tip rapido para ofrecer diferente CSS a los que tienen javascript activado usando jquery. Basta con incluir en un script la siguiente linea:


$(document).ready(function(){  $("body").addClass("js");  } );

Con eso añadimos una clase js al elemento body y ya así, solo hace falta utilizar la propiedad de cascada del CSS para definir reglas que solo veran los que tengan jalando el javascript.



/* supongamos que #slider contiene un control que solo sirve si tenemos js activado, que necesidad de mostrarlo a quienes no, asi que lo desactivamos por default */

#slider{
  display:none;
}

/* ahora lo mostramos para  quienes tengan activado js*/

.js #slider{
  display:block;
}

Es una cosa muy simple, pero es un inicio para hacer cosas mas interesantes.

3 Responses

  1. Ignatius says:

    Te olvidaste de algo en el css, debería ser algo así:

    body.js #slider{

    display:box;
    }

    Saludos!

  2. sosa says:

    @Ignatius:

    Duh! Tienes razon, ademas es era “display:block” no “box”.

    Corregido, gracias.

  3. bárbaro, muy útil como simpre, gracias! :)

Leave a Reply

Dupermag ↑ regresar arriba