Cambio de contraste con Javascript y CSS
Visita este artículo en http://www.estadobeta.com/2006/09/15/cambio-de-contraste-con-javascript-y-css/
Por Ismael en CSS, artículos, javascript, tipsEjemplo básico de modificación de atributos CSS con Javascript.
Mientras preparo un próximo artículo sobre Ajax en Prototype, los dejo con un ejemplo para ejercitar el músculo de Javascript y tonificar el cutis CSS (nadie lee EstadoBeta por mi poesía, no se quejen).
Pasaste horas con un diseño de delicados grises y medios tonos. Te ganaste la admiración de tus amigos diseñadores por tu sensibilidad visual y tu sentido de la armonía, pero hay un problema: estas diseñando para la Web. Con distintas resoluciones de pantalla, o con monitores mal balanceados tus páginas se ven tan ténues que casi no se leen. Tu abuela, que tiene mala vista, dice que esas manchas grises son muy modernas pero no entiende nada.
Hay dos soluciones. La primera involucra destruir tu precioso trabajo y aumentar el contraste entre los textos y el fondo. Tu contenido llegará a más gente pero privarás al mundo de una Obra Maestra del diseño.
La segunda opción es construir un selector de contraste. Con una clase CSS y un poco de Javascript podemos hacer un link o botón que, al apretarlo, aumente el contraste de las páginas.
Primero veamos el CSS. Necesitamos una clase CSS opcional para el body. Sin esa clase, tu diseño se ve como quieres, apto para una mayoría de lectores. Con la clase, todos los textos aumentan el contraste con respecto al fondo.
Usemos un CSS simple como ejemplo, con un fondo gris claro (#E7E4E4) y los textos ligeramente más oscuros (#CCCCCC, como toda Obra Maestra, no será apreciada en su tiempo). No incluyo el HTML completo, para resumir.
/*============ HTML =================*/
<body>
<h1>Miren mi estupendo diseño</h1>
<p>
Si puedes leer esto tienes buena vista.
</p>
</body>
/*============== CSS =================*/
body {
color:#E7E4E4;
background-color:#CCCCCC;
}
/* El titulo tiene otro color suave para efectos del ejemplo */
h1 {
color:#E6C3C3;
}
Ese es nuestro diseño original. Ahora agregaremos la clase .accesible al documento CSS. Al agregar esa clase al body, cambiarán todos los colores, incluyendo el H1.
...
body.accesible {
color: #000000; /* negro. También puedo poner black */
background-color:#FFFFFF; /* blanco */
}
/* si el H1 está en un body con clase accesible, también cambia */
.accesible h1 {
color: #FD0404; /* rojo */
}
Sólo resta agregar la clase al body para ver los cambios (<body class="accesible“>).
Lo que necesitamos ahora es una función Javascript que incluya o remueva la clase accesible al body, y un botón que gatille esa función. Primero el botón en el HTML, invocando a la función llamada, ingeniosamente, accesibiliza().
...
<button type="button" onClick="accesibiliza()">Accesibilidad</button>
...
Ahora la función, como correponde en un archivo Javascript independiente adjunto al HTML. Esta función debe responder a dos casos: si el elemento body no tiene la clase .accesible, debe agregarsela. Si ya la tiene, debe removerla. La función que muestro usa la librería Javascript Prototype.js, que tiene las útiles funciones hasClassName(), addClassName() y removeClassName(). Si no quieres usar Prototype o alguna otra librería, más abajo incluyo una implementación propia de la función.
/* Javascript */
function accesibiliza(){
var body = document.getElementsByTagName("body")[0];
var class_name = "accesible";
if(body.hasClassName( class_name ))//ya la tiene. Remueve
body.removeClassName( class_name );
else //no la tiene. Agrega.
body.addClassName( class_name );
}
Eso es lo básico. Por supuesto, el ejemplo se puede extender para cambiar el tamaño o familia de las fuentes, o incluso para mostrar layouts totalmente distintos. Todo está en aprovechar el poder de la cascada CSS para lograr los resultados que quieres cambiando tan sólo una clase. Para una página realmente funcional sería necesario cambiar el texto o imagen del botón según el estado de la página, pero eso queda para que lo desarrollen durante las fiestas de este fin de semana.
Aquí dejo un documento de ejemplo con todo lo visto en los ejemplos. Vayan a mostrarselo a sus abuelas!
Versión de accesibiliza() sin Prototype.js
Al no usar las utilidades de Prototype, esta función es algo más compleja, pero se usa de la misma manera.
function accesibiliza(){
var body = document.getElementsByTagName("body")[0];
var class_name = "accesible";
var bot = document.getElementById("bot-accesible");
var ya_tiene = new RegExp('\b'+class_name+'\b').test(body.className);
if(ya_tiene){//ya la tiene. Remueve.
var rep = body.className.match(' '+class_name)?' '+class_name:class_name;
body.className = body.className.replace(rep,'');
}
else {//no tiene, agrega clase.
body.className += " "+class_name;
}
}
- Servicios:
- Comentarios RSS
- Menear!
- Del.icio.us
9/19/2006 at 5:47 pm
Buen artículo, especialmente porque el cambio gráfico se realiza por medio de reglas CSS y no mediante funciones javascript que son mas dificiles de mantener.
Como guinda a la torta, creo que se podría almacenar en una cookie la opción escogida por el usuario, de esta manera al navegar por el sitio no tendrá necesidad de volver a cambiar el estilo en cada página. Además en visitas posteriores al sitio ya tendría preseleccionado el estilo que escogió previamente.
9/25/2006 at 2:16 am
El problema es que este método relega en Javascript. Los CSS switchers deberían funcionar sin necesidad de Javascript, en caso contrario si tu diseño no llega a los mínimos de contraste seguirías sin alcanzar el nivel A (WCAG).
De todos modos es un buen trabajo, y es mucho mejor utilizar esto que no utilizar nada (en ocasiones no podemos modificar el código de servidor).
11/5/2006 at 7:18 am
[…] CSS Lab » Cambiando la apariencia A List Apart: Alternative Style: Working With Alternate Style Sheets A List Apart: Invasion of the Body Switchers CssCreator User Preference Script Styleswitcher Dropdown Adactio: Jeremy Keith 24 ways: Introducing UDASSS! EstadoBeta - Cambio de contraste con Javascript y CSS « Anterior: Cambiar el tamaño de la letra Siguiente: Fuentes de texto o tipografías » […]
4/13/2007 at 5:51 pm
Hola, antes que nada muy buena pagina, estoy interesado en saber como se logra el efecto que tienen los links de los nombres que dejan comentarios, es decir que la caja tenga un fondo transparente pero con un color a la vez, en este caso es un fondo gris transparente, desde ya muchas gracias!!!.
7/4/2007 at 1:06 am
Sería bueno actualizar el artículo con la función toggleClassName de prototype, que seguramente no contemplaste por la fecha del texto. Muy buen artículo-