CSS3 Media Queries: Why and How to Use Them

Why should
you care about
media queries?

Media queries are one of the
most exciting aspects about
CSS today.

Media queries will allow us to
change our layouts to suit the
exact need of different devices
- without changing the content.

For example, we will be able to
move away from “one-size-fits-
all” solutions such as liquid,
elastic and fixed width layouts.

Let’s take a standard
3 column 1000px wide layout…

Imagine if it could become a
2 column 800px wide if the user
has a narrower browser
window…

…or a single column 400px
wide layout if the user has a
mobile device or a very narrow
browser window…

And all done with CSS alone - no
JavaScript…

This is just one quick example
of how media queries can
help us deliver CSS in
new and exciting ways

But… before we talk about
media queries, we need to do a
quick overview of media types.

CSS can be used to specify
how a document is presented
in different media.

There are ten media types
defined in CSS 2.1

all suitable for all devices
aural for speech synthesizers
braille for Braille tactile feedback devices
embossed for paged Braille printers
handheld for handheld devices
print for print material
projection for projected presentations
screen for color computer screens
tty for teletypes and terminals
tv for television type devices

There are five methods that can
be used to specify media
for style sheets.

You can use a <link> element in
the head of your HTML document
to specify the target media of an
external style sheet.

<link rel="stylesheet"
href="a.css" type="text/css"
media=”screen" />

Method 2:
<?xml stylesheet>
within XML

You can use <?xml-stylesheet ?>
in the head of your XML document
to specify the target media of an
external style sheet.

<?xml-stylesheet
media="screen" rel="stylesheet"
href="example.css" ?>

Method 3:
@import within
HTML

You can use @import in the head
if your HTML document to specify
the target media of an external
style sheet.

<style type="text/css"
media="screen">
@import "a.css";</style>

Warning:
@import should be avoided as it
can cause issues in some
versions of Internet Explorer.

http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

You can specify the target medium
within a CSS file using @import

@import url("a.css") screen;

Media-types within @import
rules are not supported by IE5,
IE6 or IE7. The rule is ignored.

You can specify the target medium
within a CSS file using @media

@media screen
{
body { color: blue; }
}

Why should we care
about these five
methods?

Because you can use these five
methods to define not only media
types, but media queries

Media queries are a CSS3
extension to media types that gives
us more control over rendering
across different devices.

type="text/css" href="a.css"
media="screen and (color)">

A media query is a logical
expression that is either
true or false.

The CSS associated with the
media query expression is only
applied to the device if the
expression is true.

A media query generally consists of
a media type and zero or more
expressions.

media=”screen and (color)">

Media type Expression

An expression consists of zero or
more keywords and a media
feature.


Keyword Media feature

Media features are placed within
brackets.


Media feature

A media feature can be used
without a media type or keyword.
The media type is assumed to be “all”.

media=”(color)">

Media feature

Most media features accept
“min-” or “max-” prefixes.

media="screen and
(min-height: 20em)">

Media features can often be used
without a value.


Media features only accept single
values: one keyword, one number,
or a number with a unit identifier.

Except aspect-ratio and device-aspect-ration which require two numbers

(orientation: portrait)
(min-width: 20em)
(min-color: 2)
(device-aspect-ratio: 16/9)

Feature Value min/max
aspect-ratio ratio (integer/integer) yes
color integer yes
color-index integer yes
device-aspect-ratio ratio (integer/integer) yes
device-height length yes
device-width length yes
grid integer no
height length yes
monochrome integer yes
orientation keyword (portrait/landscape) no
resolution resolution (dpi) yes
scan keyword (progressive/interlace) no
width length yes

The CSS file in this example
should be applied to screen
devices that are capable of
representing color.


This same media enquiry could be
used with @import via HTML.

<style type="text/css"
media="screen and (color) ">
@import "a.css";</style>

It could be used with
@import via CSS.

@import url("a.css")
screen and (color);

Or using @media via CSS.

@media screen and (color)
{
body { color: blue; }
}

You can use multiple
expressions in a media query if
you join them with the “and”
keyword.

The CSS file in this example will be
applied by hand-held devices, but
only if the viewport width is at
> 20em and < 40em.

media="handheld and (min-width:20em)
and (max-width:40em)">

You can also use multiple,
comma-separated media queries.
The comma acts like an “or”
keyword.

applied to screen with color or
handheld devices with color.

media="screen and (color),
handheld and (color)">

Using the “not”
keyword

You can use the not keyword in a
media query if you want your CSS
to be ignored by a specific device.

applied to all devices except those
with color screens.

media="not screen and (color)">

Using the “only”
expression

applied only to all devices with
color screens.

media="only screen and (color)">

Browser support for media queries:

IE8 no
Firefox 3.6 yes
Safari 4 yes
Opera 10 yes
Chrome 5 yes

* Based on basic testing only

Browsers that do not support
media queries should still
support the media type.


The “only” keyword is sometimes
used to hide CSS from devices
that do not support media queries,
but may read the media type.

media="only screen and (color)">

The iPhone does not support
handheld media type. Apple
recommends targeting the iPhone
using media queries.

This rule will be applied by the
iPhone which has a maximum
device width (screen width) of
480px.

media="only screen and
(max-device-width: 480px)" >

Using media
queries to
control layouts

So, how could we use media
queries to change a page layout
so that it can appear wide, medium
or narrow depending on the width
of the screen?

Here is a quick step
by step example

Step 1:
Add a link to your style sheet

type="text/css" href=”master.css"
media="screen" >

Step 2:
Add your “wide page layout” CSS
rules into your CSS file

Step 3:
Add a @media rule with a media
query

@media screen and (max-width:999px)
{
/* add your rules here */
}

Step 4:
Add your “medium page layout”
CSS rules inside this @media rule.

Step 5:
Add a second @media rule with a
media query

{
/* add your rules here */
}

Step 6:
Add your “narrow page layout”
CSS rules inside this new @media
rule.

Your CSS file should be structured
something like this:

Wide page layout CSS rules

{
Medium page layout CSS rules
}

{
Narrow page layout CSS rules
}

Devices wider than 1000px will see
the “wide page layout” CSS only.

Devices narrower than 1000px will
see the “wide page layout” CSS
AND the “medium page layout”
CSS.

Devices narrower than 480px will
see the “wide page layout”,
“medium page layout” and
“narrow page layout” CSS.

This means that rules written inside
each @media statements must
override the previous rules.

I believe that as media queries
become supported, we will see a
radical change in the way we
develop websites in the future.

Now is a good time to get
your head around these
powerful CSS3 expressions
so that you are ready when
the time comes!

CSS3 Media Queries: Why and How to Use Them

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (11)

Similar to CSS3 Media Queries: Why and How to Use Them

Similar to CSS3 Media Queries: Why and How to Use Them (20)

More from Russ Weakley

More from Russ Weakley (20)

Recently uploaded

Recently uploaded (20)

CSS3 Media Queries: Why and How to Use Them