Bert Bos |
CSS tutorial – media queries
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…)
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.
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) {...}
Deprecate some media types?
Some media types cover too wide a class of devices
E.g., projection
is paginated, but how exactly?
- Paginate at hard page breaks and scroll overfull pages. (As Opera did.)
- Paginate like a book, at hard and soft page breaks.
So, proposal is to deprecate the projection
keyword
and instead add two or three media features instead, e.g.:
- Does the device scroll or paginate overfull pages? (vertical)
- Can the device scroll overfull lines? (horizontal)
- Does the device have a pointer that can “hover” over an element?
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.