Eric lippert - Amazon Web Services

CSS – Media Queries
Level 3
CSS Media Types
CSS Media types have been around
since CSS 2, however there was no
built in support for ‘querying’ based
on media type. One of the common
examples of media type usage was
to have different css for ‘print’ and
‘screen’ media types. One could define
different style-sheets for these two
media types as follows.
Apart from Media types, CSS expands
Media support with addition of Media
Features.
Media features
Features help with the actual
‘Media Queries’. The 11 features
currently in the draft spec are
- width
- height
- device-width
- device-height
- orientation
- aspect-ratio
- device-aspect-ratio
- color
- color-index
- monochrome
- resolution
- scan
- grid
Let’s see how Media Features are
used in Media Queries to gain a
better idea of why do we need
Media Features in the first place!
CSS Media Queries
Level 3 draft proposal specifies ‘Media
Queries’ as a syntax that contain a media
type and one or more expressions that
checks for conditions of a particular
‘Media Feature’. For example
The above has a ‘media’ query that uses
the Media Features, screen as well as
monochrome to imply that if the current
output is going to the printer (as
opposed to the screen etc.) and the
printer is monochrome, one should use
the classes in example-bw.css.
Media Queries and
Responsive UI
As we saw above, we can pick and choose
what CSS to apply based on media and
condition of a media feature. If we go
back to the list of features, we’ll see that
we have width/height, device-width/
device-height as features. These can be
used in media queries to pick various
CSS styles for various types of devices.
Let’s see a few examples
Example 1:
The above query implies that if the
current media is a screen and its width
is between 701 pixels and 800 pixels, it
should use the medium.css.
Example 2:
The above query can be used in-line as
well and would look something like this
@media only screen and (max-width:
850px) and (max-width: 850px)
{
…
}
Media Features – width,
device-width and what’s the
viewport meta tag
When we setup a MVC application in
Visual Studio, any template other than
the ‘basic’ template includes the _Layout.
cshtml file. In this file, in the
section, we’ll see there is a line similar to
the line below
ViewPort is actually CSS Level 2.1
defined spec, which was originally meant
for defining the window used by
continuous media like Video streams.
However, with the advent of
smart-phones, viewport is increasingly
used to determine scaling and rendering
in Mobile web browsers.
The above setting sets the ‘width’ media
feature’s value to the ‘device-width’
declared by the browser.
To Quote W3C specs – The Width Media
Feature describes the width of the
targeted display area of the output
device.
Similarly ‘device-width’ media feature
describes the width of the device’s
entire screen irrespective of the browser
window’s width. On a desktop with
screen resolution 1280x768 for example,
the device-width is always 1280. On an
iPhone -including iPhone 4- the
device-width is 320.
We use the viewport meta-tag to set the
width to the device-width like this:
DNcmagazine www.dotnetcurry.com | 49