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 comments

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

    body.js #slider{

    display:box;
    }

    Saludos!

  2. @Ignatius:

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

    Corregido, gracias.

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

Leave a comment

Notify me of followup comments via e-mail. You can also subscribe without commenting.