Media Queries

The latest draft CSS3 ushers in the idea of "media queries," which extends the idea of media types (such as "tv" and "print") so that the display properties of a Web page can be more precisely customized for these devices by the Web author. The idea is to better tailor the display of Web pages without having to change anything in terms of content. It also allows room for expansion to media types other than those already mapped out under the CSS2 specification.

Since this has not been finalized, what follows should be considered a "heads up" of what we may soon expect from browsers of the future — there is no guarantee that this is exactly how they will be implemented.

Media queries are expressions that are either true or false; either they are correctly laid out and match an existing setting, or they are rejected by the browser and not used.

Media "query" may not in fact be the best name for this function, as it does not actively seek out a setting and then programmatically return a result that can then be further manipulated. Instead, they are passive settings contained within the header of a Web page or embedded in a separate style sheet. But they will change the display of content given the right values for a given media query. In practice, it is a way of cascading display parameters — if a match is found, it is used, otherwise the next available setting is used instead. If no match is found, a default setting is used. Think of media queries as being akin to a font property with various specific and generic font types listed and you'll get the idea.

Media queries can either be written in HTML, using the link element, or written in CSS, using the @media rule. When taking the HTML path, you use the media attribute to set the media query, which is then linked to an external page containing specific information on formatting for a given display device. When setting things using @media, you name the media types in sequential order, and then link to the defining external formatting style sheet. Both types can also use operational expressions such as "only", "and" and "not".

Whether written in HTML or CSS, the rule format is the same:

media query + media type(s) + media feature + URL