Mink Machine

Media queries and JavaScript

Mobile development and responsive design are all the rage these days and media queries are mentioned everywhere. It’s a CSS3 extension of the media types frequently used in HTML4 and CSS2. The following (very simplified) example hides an element if the browser device has a max width of 500 pixels.

@media (max-device-width: 500px) { .sidebar { display: none; } }

This is of course only the tip of the iceberg. There are tons of resolutions and variations to consider (for instance have a look at Andy Clarke’s Hardboiled CSS3 Media Queries), media queries are not supported by IE8 or older (live with it) and so on. But when used correctly, media queries can be a powerful tool.

However, media queries are indeed a nice asset when it comes to CSS, but unfortunately they will not prevent the browser from downloading many other things which may be superfluous on mobile devices.

Since many external scripts are large, this could be a problem. For instance, the minified and Gzipped version of JQuery is about ten times smaller in filesize than the regular version. It could also download a lot of images which may be unused on certain devices.

It would be nice to have a media query equivalent for JavaScript and other resources. There are some work-arounds, such as the one described by Peter-Paul Koch in Combining media queries and JavaScript, but I hope this area will improve in the future.

Related posts

Comments

No comments yet.

Post a comment

Your email address will not be published. Required fields are marked *

Featured stories

Historic locations in Gothenburg

Historic locations in Gothenburg

"Hundreds of houses were quickly build, but unfortunately all of it was burned to the ground in 1611 by Danish forces."
Roaming the cobblestones of Istanbul

Roaming the cobblestones of Istanbul

"Inside the church there are still traces of rune inscriptions made during the Viking age by Varangians, an elite guard made up of Scandinavian immigrant warriors."
Bunker safari

Bunker safari

"The area contains 54 excavated bunkers along with gun emplacements, scattered around the town’s most visible landmark."
A journey through Iran

A journey through Iran

"I woke up freezing on a Persian rug with aching back. Behind a corner I saw the damned rooster that kept me awake during many hours."
Roaming in Valletta

Roaming in Valletta

"I passed the statue of Jean de Valette, the 49th Grand Master who laid the foundation stone to Valletta in 1566, to gaze at the golden interior of St. John’s Co-Cathedral, where he is buried in the crypt."
Eating my way through Basque country

Eating my way through Basque country

"Not too bad to wash it all down with a local Txakoli, the young white wine typical of the Basque country."

Instagram

Seville
Venice
Fever Ray
Rome
Basel
Kuala Lumpur