Carga tu css dependiendo de la resolución de la pantalla

Según este artículo (Adios a la resolución de 800x600), ya podemos despedirnos de la resolución de 800x600 y le damos la bienvenida a otras como 1024 x 768 que según estadísticas se usa un 56,15% en todo internet, le sigue 1280x1024 que es usada un 15.79%, pero que por obvias razones pasará a reemplazar la de 1024x768.

Hoy en día es muy importante el tema de los estándares, se habla de la web 2.0 y temas como saber diseñar tu página web, tener en cuenta la usabilidad... en fin. Por tanto es indispensable tener en cuenta, que tipo de usuario va a interactuar con tu página, como se le va a formatear la información y si está cumple con los estándares. Este ejemplo puede ser muy útil si quieres cargar distintos css dependiendo de la resolución del cliente. Puede llegar a ser muy útil cuando se tienen imágenes que para una determinada resolución parezca pequeña, pero que para otras sea demasiado grande causando que se vea antiestética la página o molestando al usuario al tener que hacer más scroll. Bueno no siendo más el código...

1. Primer paso: Preparar el enlace del estilo

Bueno el primer paso es definir un enlace a un archivo .css de esta forma, pero ojo sin especificar la propiedad href, es decir sin hacer link a ningúna hoja de estilos. Quedará algo así:

Observaciónes: Esta línea debe estar en la cabecera de tu página. idDeTuEstilo es el identificador con el que se hará referencia desde javascript.

2. Segundo Paso: Usar DOM javascript.

Luego sólo queda definir con javascript que estilo se cargará. El truco utilizado es crear con anterioridad los archivos css cuyos nombres tendrán como valor el ancho de la resolución del cliente, ejemplo:1024.css, 800.css. Ahora utilizando DOM, se obtendrá el objeto que contendrá el enlace a la respectiva hoja de estilos:

document.getElementById("idDeTuEstilo"): Sirve para obtener referencia al objeto que tenga como valor del parámetro id = "idDeTuEstilo".

En nuestro caso, obtenemos referencia al objeto que enlaza a los archivos .css. Luego por medio de la propiedad href le asignamos el nombre de la hoja de estilo a la que dicho enlace hará referencia. He aquí el truco !! se obtiene el ancho de la pantalla del cliente con screen.width y se le concatena ".css":

screen.width+".css"

Quedando entonces de la forma: 1024.css o 800.css. Cabe agregar que como única desventaja es que la ejecución de tus estilos dependerán por completo de si el usuario tiene activado o no la ejecución de javascript, algo que estos días es muy inusual y no muy recomendado.