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.

This entry was posted in No body cares. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

3 Comments

  1. Ignatius
    Posted July 21, 2007 at 7:22 am | Permalink

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

    body.js #slider{

    display:box;
    }

    Saludos!

  2. sosa
    Posted July 21, 2007 at 1:48 pm | Permalink

    @Ignatius:

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

    Corregido, gracias.

  3. Posted August 1, 2007 at 6:14 pm | Permalink

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

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*