Verifica con javascript si tus @Media Queries se ejecutan 2.5.12

Verifica con javascript si tus @Media Queries se ejecutan

Crédito: Artículo original: "Conditional CSS".

Al método de Paul Hayes basado en transiciones para verificar si las declaraciones incluidas en las @Media Queries se ejecutan, ahora se suma éste el realizado con javascript. La diferencia está en que en el primero la constatación es visual, en éste segundo te lo imprime en pantalla.

Todo pasa por utilizar un pseudoelemento, ::after por ejemplo, y la propiedad content tal que así:


@media all and (min-width: 45em) {
    body:after {
        content: 'widescreen';
        display: none;
    }
}

Que por sí mismo no hará nada, hasta que le pasa el valor el javascript:


var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');
 if (size == 'widescreen') {
   // carga más contenido
 }

Y esto es todo. Prueba y coméntanos en qué lo has usado y tus conclusiones.

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.