Verifica con javascript si tus @Media Queries se ejecutan

Verifica con javascript si tus @Media Queries se ejecutan

Por Kseso ✎ 0

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.

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

Comentarios: 0

EsCss RSS del Blog RSSS Comentarios ᛯ Licencia Beerware Humans.txt ᛯ Diseño por Kseso SiteMap