Nowadays it's almost required to have the layout of a web page change to accommodate different devices. And it may be nice too to make the the web page layout adjust instantly to device changes (such as rotating from portrait orientation to landscape orientation). Changing on the fly like this requires quick changeovers to alternate chunks of CSS. Techniques for making web pages adapt to different devices coalesce under various rubrics: liquid layout or fluid layout or adaptive design or responsive design. When pointing different environments to different chunks of CSS, likely all that's needed is the CSS feature Media Queries.
Several different detailed strategies for handling varying devices are possible. Some strategies are mainly concerned with the size of the physical screen, while others are mainly concerned with the size of the logical viewport. Some strategies tightly restrict (or even try to eliminate) the viewport, while others control it only loosely (or even leave it entirely unconstrained). Regardless, all such strategies are likely to be implemented using Media Queries.
In theory, Media Queries can handle everything. The conventional wisdom seems to be that Media Queries are the best thing since sliced bread.
But when I started to use Media Queries extensively in real life, I discovered that as a practical matter they bring along quite a few issues. Media Queries can work quite well in environments -such as some corporate intranets- where the audience is either restricted to only the latest standards and browsers or is uniform (or both). But when websites are visited by the general public using a very wide range of browsers that should all be well supported, Media Queries become problematic.
Problems with Media Queries include:
(This was written in Fall 2012. Technology marches on. Some of the problems listed above are probably less significant these days.)
I find trying to deal with all these issues with only the non-procedural specifications of HTML/CSS awfully frustrating. I'm confident that if I could just write a program, I could skirt the majority of these problems. If only I could move my CSS decisions into some procedural language (i.e. any computer language with at least a conditional statement and a looping construct).
Here's a specific example. Please note that:
The specific densities, dimensions and aspect ratios hard coded in this example code are all magic numbers, determined by methods not discussed here. Supposedly they do a good job of distinguishing different categories of device. You may or may not wish to use these same specific numbers.
Several tricks for supporting the widest possible range of browers are embedded in this example code but not discussed in any detail. Also, this code may have been optimized to the point of not being immediately fully comprehensible. So depending on what your goal is, you may wish to analyze this example code rather closely. Of course, it's assumed that for actual production use, similar code will be minified and compressed.
Although I have not actually tested either the defer or async attributes of the <script tag with this example code, I expect they would not work reliably with some browsers.
Some of the properties that Media Queries can test may change as the user manipulates the browser. For example window size and device orientation (portrait or landscape) may change. Other properties that Media Queries can test don't ever change on a given device. They are properties of the device itself. For example screen size and pixel density never change.
The above specific example (and probably this whole technique) is applicable only to properties that never change (i.e device properties). Since it works only with unchanging properties, it can correctly be done only once before the page displays, then never done again.
Media-Query-like tests of properties that might change must be redone every time the browser signals a possible shift (i.e whenever it fires the onresize event). It's not immediately clear how to modify the specific example above so it can be redone. In fact, it's not even clear this alternative to Media Queries can be used at all with properties that might change.
(I don't find this to be a significant limitation, becase in my opinion responsive design should only be testing and responding to unchanging/device properties anyway. I personally think if the page layout changes when the user grows or shrinks the window on the same device, something is wrong. But not everyone shares that opinion. And no such limitation is intrinsic to the way CSS Media Queries are specified or implemented.)
The desired sequence of events, where each step completes before the next one begins, is:
To force events to hew to this sequence, yet not reduce performance terribly, requires a few tricks. These are all done by the specific example above, but that may not be immediately obvious:
(Note that a few alternate sequences of events will seem to more or less work anyway. These cases are ultimately undesirable and should be avoided because the user will see a flash of unstyled or incorrectly styled content when the page first loads.)