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.