Blog what I write

Detectar CSS con jQuery

post - - 2 replies -

Hay mucho escrito acerca de como detectar si un navegador soporta JavaScript, sin embargo conocer el soporte de CSS ya es algo más raro.

Un viejo amigo me ha mandado hoy esa duda por e-mail, así que aprovecho este post para compartir la forma que he usado para detectar si un navegador esta soportando nuestra hoja de estilo.

Cuando diseñamos un layout uno de los elementos comunes es el envoltorio (wrapper, el contenedor que recoge toda la web). Este puede servirnos como elementos clave para detectar si el navegador esta procesando la hoja de estilo.

En un fichero .js incluimos el siguiente código:

function detectCSS() {
	var result = ($('#wrapper').css('width') == '1000px')? true : false;
	return result;
}

Esta función se encarga de responder verdadero o falso tras analizar el elemento wrapper. Dicho elemento tiene en la hoja de estilos la propiedad width con valor 1000px.

Si el CSS no es procesado el selector de jQuery $('#wrapper').css('width') devolverá un width con un tamaño por defecto indicado por el navegador, pero que no debería coincidir con la medida que hemos especificado (1000px).

La idea es que el operador ternario determine a partir de la condición si hay o no CSS, almacenándolo en una variable. Luego esta es retornada con la respuesta.

Por último y en cualquier lugar podemos hacer la llamada a la función:

$(document).ready(function(){
	if(detectCSS()) {
		//lo que quieras hacer si el CSS es procesado...
	}
})

El ejemplo se encuentra en jQuery, de todas formas la conversión a mootools, otro framework o “javascript base” no presentaría ningún problema, únicamente cambiar la notación.

  • lloku

    Muchas gracias Quasi 😉
    Me salvaste la vida, un “truco” con todas las letras que ni se me había pasado por la cabeza.
    Al final mi solución para lo que te comentaba, desabilitar lightbox con javascript pero sin CSS (y tienes razón, es muy rebuscado) fue gracias a esto muyyy simple.
    Yo uso prototype y simplemente cambiando el:

    function initLightbox() { myLightbox = new Lightbox(); }
    Event.observe(window, ‘load’, initLightbox, false);

    por

    function initLightbox() {
    if($(‘center’).offsetWidth==”980″){
    myLightbox = new Lightbox();
    }
    }
    Event.observe(window, ‘load’, initLightbox, false);

    Todo Ok 😉

    Muchas gracias de nuevo genio 😛

  • PosTi

    La idea es buena, pero si da la casualidad de que la ventana del navegador está con las dimensiones justas para que el wrapper mida 1000px, se te va todo el invento. Así que no puedes confiar en eso de “no debería coincidir con la medida que hemos especificado”. Yo usaría otra propiedad que sólo se viera alterada desde el CSS, no precisamente un width y height que el navegador puede alterar fácilmenete.