Responsive Web Design took a big step forward on June 19, when a highly influential W3C Working Group published a draft recommendation stating that an additional slate of media queries should be incorporated into web browsers.
The CSS Working Group’s proposal would enable browsers to render web design layouts in a much more flexible manner, based on factors such as screen size, color depth, and device orientation.
Media queries consist of a media type (ex. screen or print), combined with defining expressions that pertain to specific media features, like height and width, in the following general format:
@media type { HTML tag { expression: value } }
The growing influence of Responsive Web Design has ushered in more fluid design styles that can automatically adapt page content to a user’s viewing device. It is most commonly associated with the industry mandate to develop websites that are compatible with desktops and laptops, as well as on smartphones.
Media Query Support
Established W3C standards, like HTML4 and CSS2, already support style variances based on media types.
For example, a stylesheet can specify that different fonts be utilized for screen viewing and for print.
In CSS format, this looks like:
@media screen
{
body {font-family: tahoma, sans-serif; font-size: 14px;}
}
@media print
{
p {font-family: times new roman, serif; font-size: 12px;}
}The above command directs a user agent to display a 14px Tahoma font on screen, but if the text content is printed the designated font will be Times New Roman, at 12px.
The HTML directive to use a certain stylesheet, based on the desired media type, is expressed as:
<link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css">
<link rel="stylesheet" type="text/css" media="print" href="serif.css">In general, ‘sans-serif’ fonts (like Tahoma and Verdana) are more readily viewable on a computer screen, while serif fonts such as Times New Roman are typically utilized for printing purposes. This is reflected in the stylesheet designations above.
Media Query Specifics
As defined, a media query will only be deployed when the user agent determines that the answer for a given directive is ‘true’.
A query can address more than one feature in the same expression – for instance:
@media screen and (min-width: 400px) and (max-width: 700px) { … }
Limiting statements, such as ‘not’ and ‘only’ can also be utilized:
<link rel="stylesheet" media="not screen and (color)" href="example-1.css" />
<link rel="stylesheet" media="only screen and (color)" href="example-2.css" />Media Features
‘Features’ act as qualifiers for media queries, and describe the requirements for an output device.
One such feature is ‘device-aspect-ratio’, which correlates with device orientation, and would be shown as:
<link rel="stylesheet" media="device-aspect-ratio: 16/9" href="widescreen.css" />In a mobile device that allowed for both landscape and portrait views, the above stylesheet command would ensure that if the widescreen orientation was selected (landscape), then a browser would render web pages according to the correct set of style rules.
Other features have a ‘min-‘ or ‘max-‘ prefix, and are tied to a specific measure, like:
<link rel="stylesheet" media="max-device-width: 500px" href="mobile.css" />In the above case, a mobile device possessing a screen width of less than 500px would be targeted by the mobile.css stylesheet.
Say, for instance, you wanted to target devices with a minimum color-index of 256, the command would look like this:
<link rel="stylesheet" media="screen and (min-color-index: 256)" href=”color.css" />In another example, if you desired to ensure that a document was printed by an output device of least 300dpi capability, the CSS media query would be in the following format:
@media print and (min-resolution: 300dpi)
{
p {font-family: arial; font-size: 12px;}
{The complete list of media features addressed in the W2C draft proposal are: width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan, and grid.
Browser Implementation
The CSS Working Group has complied a comprehensive media queries implementation report for the major browsers.
As of this writing, 361 pass/fail tests had been performed on Chrome, Firefox, Internet Explorer, and Opera.
Conclusion
The W3C draft Media Queries recommendation was promulgated to open the door to a much greater range of web design flexibility based on user device parameters.
It is aimed at bringing the industry closer to an era of true Responsive Web Design, in which user agents can eyeball a plethora of style options before a page is rendered in a browser, based on stylesheet instructions.
Reportedly, even more exciting deployments of media queries are on the horizon for CSS4, and are expected to address such issues as whether a given device possesses a touch or keyboard input, and support for hover styles.
