CSS3MEDIA QUERIES

Why shouldyou care aboutmedia queries?

Media queries are one of themost exciting aspects about

CSS today.

Media queries will allow us tochange our layouts to suit the

exact need of different devices- without changing the content.

For example, we will be able tomove away from “one-size-fits-

all” solutions such as liquid,elastic and fixed width layouts.

Let’s take a standard3 column 1000px wide layout…

Imagine if it could become a2 column 800px wide if the user

has a narrower browserwindow…

…or a single column 400pxwide layout if the user has a

mobile device or a very narrowbrowser window…

And all done with CSS alone - noJavaScript…

This is just one quick exampleof how media queries can

help us deliver CSS innew and exciting ways

But… before we talk aboutmedia queries, we need to do aquick overview of media types.

So, what aremedia types?

CSS can be used to specifyhow a document is presented

in different media.

There are ten media typesdefined in CSS 2.1

suitable for all devicesfor speech synthesizersfor Braille tactile feedback devicesfor paged Braille printersfor handheld devicesfor print materialfor projected presentationsfor color computer screensfor teletypes and terminalsfor television type devices

allaural

brailleembossedhandheld

printprojection

screenttytv

There are five methods that canbe used to specify media

for style sheets.

Method 1:<link> within HTML

You can use a <link> element inthe head of your HTML documentto 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 documentto 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 headif your HTML document to specify

the target media of an externalstyle sheet.

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

Warning:@import should be avoided as it

can cause issues in someversions of Internet Explorer.

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

Method 4:@import within CSS

You can specify the target mediumwithin a CSS file using @import

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

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

Method 5:@media within CSS

You can specify the target mediumwithin a CSS file using @media

@media screen {

body { color: blue; }}

Why should we careabout these five

methods?

Because you can use these fivemethods to define not only media

types, but media queries

Let’s talkmedia queries

Media queries are a CSS3extension to media types that gives

us more control over renderingacross different devices.

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

A media query is a logicalexpression that is either

true or false.

The CSS associated with themedia query expression is only

applied to the device if theexpression is true.

Media querysyntax

A media query generally consists ofa media type and zero or more

expressions.

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

Media type Expression

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

An expression consists of zero ormore keywords and a media

feature.

Keyword Media feature

Media features are placed withinbrackets.

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

Media feature

A media feature can be usedwithout a media type or keyword.

The media type is assumed to be “all”.

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

Media feature

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

<link rel="stylesheet" type="text/css" href="a.css" media="screen and (min-height: 20em)">

Media features can often be usedwithout a value.

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

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

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

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

The full mediafeature list

Featureaspect-ratiocolorcolor-indexdevice-aspect-ratiodevice-heightdevice-widthgridheightmonochromeorientationresolutionscanwidth

Valueratio (integer/integer) integerintegerratio (integer/integer)lengthlengthintegerlengthintegerkeyword (portrait/landscape)resolution (dpi)keyword (progressive/interlace)length

min/maxyesyesyesyesyesyesnoyesyesnoyesnoyes

A simple example

The CSS file in this exampleshould be applied to screendevices that are capable of

representing color.

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

This same media enquiry could beused 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; }}

Multiple expressions

You can use multipleexpressions in a media query if

you join them with the “and”keyword.

The CSS file in this example will beapplied by hand-held devices, but

only if the viewport width is at> 20em and < 40em.

<link rel="stylesheet" type="text/css" href="a.css" media="handheld and (min-width:20em) and (max-width:40em)">

Comma separated

You can also use multiple,comma-separated media queries.

The comma acts like an “or”keyword.

The CSS file in this example will beapplied to screen with color orhandheld devices with color.

<link rel="stylesheet" type="text/css" href="a.css" media="screen and (color), handheld and (color)">

Using the “not”keyword

You can use the not keyword in amedia query if you want your CSSto be ignored by a specific device.

The CSS file in this example will beapplied to all devices except those

with color screens.

<link rel="stylesheet" type="text/css" href="a.css" media="not screen and (color)">

Using the “only”expression

The CSS file in this example will beapplied only to all devices with

color screens.

<link rel="stylesheet" type="text/css" href="a.css" media="only screen and (color)">

Support formedia queries

Browser support for media queries:

Safari 4 yes

Firefox 3.6 yes

IE8 no

Opera 10 yes

Chrome 5 yes

* Based on basic testing only

What do otherbrowsers see?

Browsers that do not supportmedia queries should stillsupport the media type.

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

The “only” keyword is sometimesused to hide CSS from devices

that do not support media queries,but may read the media type.

<link rel="stylesheet" type="text/css" href="a.css" media="only screen and (color)">

Targeting theiPhone

The iPhone does not supporthandheld media type. Apple

recommends targeting the iPhoneusing media queries.

This rule will be applied by theiPhone which has a maximumdevice width (screen width) of

480px.

<link rel="stylesheet" type="text/css" href="a.css"media="only screen and (max-device-width: 480px)" >

Using mediaqueries to

control layouts

So, how could we use mediaqueries to change a page layout

so that it can appear wide, mediumor narrow depending on the width

of the screen?

Here is a quick stepby step example

Step 1:Add a link to your style sheet

<link rel="stylesheet" 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

@media screen and (max-width:480px){

/* add your rules here */}

Step 6:Add your “narrow page layout”

CSS rules inside this new @mediarule.

@media screen and (max-width:999px) {

}

@media screen and (max-width:480px){

}

Wide page layout CSS rules

Medium page layout CSS rules

Narrow page layout CSS rules

Your CSS file should be structuredsomething like this:

A note on the CSS

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

Devices narrower than 1000px willsee the “wide page layout” CSSAND the “medium page layout”

CSS.

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

What does thismean?

This means that rules written insideeach @media statements mustoverride the previous rules.

A quickrecap

I believe that as media queriesbecome supported, we will see aradical change in the way wedevelop websites in the future.

Now is a good time to getyour head around these

powerful CSS3 expressionsso that you are ready when

the time comes!

We’re done