css3 media queries
DESCRIPTION
Media queries are one of the most exciting aspects about CSS today. They will allow us to change our layouts to suit the exact need of different devices - without changing the content. This presentation explains what Media queries are, how to use them, how to target the iPhone and how to create flexible layouts.TRANSCRIPT
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