Bert Bos | CSS tutorial – media queries

Media Queries

Media Queries

Media Queries

Style sheets can be applied to…

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 interactive
paper print visual paginated niet-interactive
computer screen screen visual not paginated interactive
video projection projection visual paginated interactive
mobile handheld visual/auditief paginated/not gepagineerd interactive
speech synthesis speech auditief - interactive

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

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

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:

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) {...}