Con eCSSential me pasa lo mismo que con Prefix-free: no entiendo por qué usar JS para solucionar cuestiones de CSS –
— Abel Sutilo (@abelsutilo) junio 13, 2012
Eso mismo comentaba en dicho tweet al descubrir el proyecto eCSSential de Scott Jehl en github. Se trata de una solución mediante javascript cuyo objetivo es evitar que se descarguen archivos CSS cuando media query no lo ha evitado.
Por resumirlo brevemente, el argumento de Scott Jehl se basa en su prueba de carga, donde demuestra que el navegador carga primero todos los estilos y después aplica los valores de CSS para las reglas de medios definidas. En definitiva, según Jehl, estamos descargando archivos CSS, valga el chiste recurrente, «por encima de nuestras posibilidades»; excesivos para dispositivos móviles y tablets, sin contar que las reglas aplicadas a solucionar problemas mayores (como el asunto de las imágenes), se aplican a posteriori. He aquí su solución con este javascript:
eCSSential({
"all": "css/all.css",
"(min-width: 20em)": "css/min-20em.css",
"(min-width: 37.5em)": "css/min-37.5em.css",
"(min-width: 50em)": "css/min-50em.css",
"(min-width: 62.5em)": "css/min-62.5em.css"
});
El argumento de Scott Jehl parece sólido —capturas de una prueba de carga ejercen un efecto «te lo juro por mi santa madre»—. La conversación generada en Twitter lo acompaña. Así que, por muy absurdo que vea solucionar problemas de CSS utilizando javascript, si tenemos algo de cintura y menos escepticismo, quizás eCSSential sería la solución ideal para gestionar eficientemente la carga en los diferentes medios.
Así lo pensaba hasta leer el artículo de Ilya Grigorik, «Debunking Responsive CSS Performance Myths» — chivatazo de @nobuti, gracias—, que aporta datos reales de cómo funciona y gestiona el browser la carga de dichos CSS según la consulta previa a la resolución con la que cuenta el cliente y el propio browser. Según Ilya Grigorik, el navegador sabe qué hacer en cada momento, lo que desmonta la teoría de Jehl, a pesar de su prueba de carga. Finalmente, Grigorik concluye animando a una metodología bastante clara:
Concatenate and compress your CSS, use media queries in your link tags and let the browser do its job.
Posteriormente en los comentarios del artículo de Ilya Gregorik, Scott Jehl mantiene con el autor un interesante debate, a ratos algo espeso y con pinceladas de trolleo ilustrado, que deberéis seguir si queréis algo más de luz sobre este asunto.
Y a vosotros ¿qué método os parece mejor?