Media queries open on media types and currently there are two types of media which are supported – ‘screen’ and ‘print’. Media queries provide extensibility to the functionality of media types by allowing more precise labeling of style sheets.

 

What is a media query?

A media query, like other CSS artifacts, is a way to control the presentation of content. It consists of a media type and 0+ expressions that check for conditions of the specified media features.

 

As mentioned before, the supported media types are ‘screen’ and ‘print’.

 

The supported media features are ‘width’, ‘height’ and ‘color.

 

By having conditional presentation clauses, the content can be rendered differently on various media types without sacrificing on the content.

 

How to define a media query?

A simple media query can be defined in HTML as under:

<link rel="stylesheet" media="print" href="myexample.css" />

In the above example, we have specified that for ‘print’ media type, the user agent needs to use myexample.css style sheet.

The same can also be declared as an @import-rule in CSS.

@import url(myexample.css) print;

 

 

When the useragent processes the above media query, it evaluates whether the current type is ‘print’ media type or not. If it is, it will apply ‘myexample.css’ style sheet. Hence, media queries can be also visualized as conditional operations.

 

If no media type is specified or ‘all’ is specified, the styling would apply for all media types.

For example,

<link rel="stylesheet" href="myexample.css" />

<link rel="stylesheet" media="all" href="myexample.css" />

 

In the above example, the styling would apply for both ‘print’ and ‘screen’. They are equivalent declarations. Similarly, as CSS

@media all { … }

@media { … }

 

Media queries can be combined to make complex media queries.

 

<link rel="stylesheet" media="print, projection" href="myexample.css" />

This can also be declared as

@media print, projection { … }

 

Media queries also support logical NOT using the ‘NOT’ keyword.

 

<link rel="stylesheet" media="not print, screen" href="myexample.css" />

In the above example, we are specifying that the styling will not apply to print, and only apply to screen.

 

Media features available for use in media queries

Here is the complete list of media features available for use in media queries.

• color

• color-index

• device-aspect-ratio

• device-height

• device-width

• grid

• height

• monochrome

• resolution

• scan

• width

 

 

Summary

In this article, we learned about CSS3 media queries. I hope you have found this information useful.

 

About the author

Vipul Patel is a Program Manager currently working at Amazon Corporation. He has formerly worked at Microsoft in the Lync team and in the .NET team (in the Base Class libraries and the Debugging and Profiling team). He can be reached at vipul.patel@hotmail.com

 

 

References

http://www.w3.org/TR/css3-mediaqueries/