Media Queries

Style sheets can be applied to…

… all media
(insofar as the properties apply)
… or to a specific media
(screen, print, projection, tv, handheld, speech…)
… or to media with specific characteristics
(screen size, window size, color, resolution…)

At first, HTML added a media attribute to be able to specify for each (style) link which kind of media the link was useful for. CSS added the @media and @import rules so that the media could also be indicated directly in CSS itself.

SMIL added system attributes, to indicate that a specific video, sound or other resource was meant for certain kinds of systems, e.g., with a large screen or with enough bandwidth.

CSS then combined those ideas and defined a syntax that allows to add device characteristics after the media name. This way you can not only distinguish between a computer screen and a printer, but also between large and small screens, e.g. This new syntax can be used in CSS, HTML and XML.

The various media

●●●●●●●●

media	CSS name	sense	paginated/continuous
paper	`print`
computer screen	`screen`
video projection	`projection`
mobile	`handheld`	/	/
speech synthesis	`speech`		-
…

A continuous medium, such as 'screen,' can in principle also be paginated. The CSS properties to display a document or an element as a set of pages, without a scrolling mechanism, are still in development. (The current idea is to add keywords 'paged-x' and 'paged-y' to 'overflow'.)

See below for problems with handheld.

Some device characteristics

●●●●●●●●

width of the window or the screen
width, device-width
height of the window or the screen
height, device-height
resolution in pixels/cm or pixels/inch
resolution
width-height ratio
aspect-ratio
etc.

Some characteristics aren't so interesting anymore. E.g., screens with less then 24-bit colors are rare.

A separate W3C Recommendation, „The 'view-mode' Media Feature” defines view-mode, for the state of a window on a virtual desktop: maximized, minimized, full-screen, etc.

This is meant for applications, e.g., to suppress the scrollbar when in full-screen mode, or to stop animations when minimized.

Of the various characteristics, by far the most used is 'width'. Typically, it is used to select between layouts with one, two or more columns.

Four methods

●●●●●●●●

In CSS:
@media ... { ... }
Links in CSS:
@import url(...) ...
In HTML:
<style media="...">...</style>
Links in HTML:
<link media="..." href="...">

Demo media queries

●●●●●●●●

From the demo:

@media all and (min-width: 60em)
{
  h2 {float: left; width: 20%}
  .menu {float: right; width: 20%}
  .main {float: right; width: 49%}
}

More, less, exactly

●●●●●●●●

@media all and (min-width: 60em) {...}

Three ways to test device characteristics:

(width: 600px) – exactly 600px wide
(min-width: 600px) – 600px or wider
(max-width: 600px) – 600px or narrower

The 'all' media

●●●●●●●●

Use a comma to test for several media queries at once:

@media screen and (min-width: 60em),
  handheld and (min-width: 60em),
  projection and (min-width: 60em),
  print and (min-width: 60em) {...}

Use 'all' to indicate the media type is unimportant:

@media all and (min-width: 60em) {...}