Skip to content

24 ways to impress your friends

Vote down?

Stephen Band

RE: Media querying the JavaScript….

C’mon, we can get dirtier than that! Hide the #media-test element by putting it in the <head> (maybe it could be a script tag with type=“text/unknown”?), then use its CSS ‘content’ property to pass arbitrary JSON into the JavaScript:

@media all and (min-width: 640px) {
#media-test { content: ‘{“size”: “small”}’; }
}
@media all and (min-width: 926px) {
#media-test { content: ‘{“size”: “big”}’; }
}

This way, in the CSS, you could define lists of scripts to load for different media queries…

:)