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 ...
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.
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.
So, what are
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.
Method 1:
<link> within HTML
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/
Method 4:
@import within CSS
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.
Method 5:
@media within CSS
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
Let’s talk
media queries
Media queries are a CSS3
extension to media types that gives
us more control over rendering
across different devices.
<link rel="stylesheet"
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.
Media query
syntax
A media query generally consists of
a media type and zero or more
expressions.
<link rel="stylesheet"
type="text/css" href="a.css"
media=”screen and (color)">
Media type Expression
An expression consists of zero or
more keywords and a media
feature.
<link rel="stylesheet"
type="text/css" href="a.css"
media=”screen and (color)">
Keyword Media feature
Media features are placed within
brackets.
<link rel="stylesheet"
type="text/css" href="a.css"
media=”screen and (color)">
Media feature
A media feature can be used
without 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 used
without a value.
<link rel="stylesheet"
type="text/css" href="a.css"
media="screen and (color)">
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)
The full media
feature list
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
A simple example
The CSS file in this example
should be applied to screen
devices that are capable of
representing color.
<link rel="stylesheet"
type="text/css" href="a.css"
media="screen and (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; }
}
Multiple expressions
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.
<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 be
applied to screen with color or
handheld 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 a
media query if you want your CSS
to be ignored by a specific device.
The CSS file in this example will be
applied 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 be
applied only to all devices with
color screens.
<link rel="stylesheet"
type="text/css" href="a.css"
media="only screen and (color)">
Support for
media queries
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
What do other
browsers see?
Browsers that do not support
media queries should still
support the media type.
<link rel="stylesheet"
type="text/css" href="a.css"
media="screen and (color)">
The “only” keyword is sometimes
used 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 the
iPhone
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.
<link rel="stylesheet"
type="text/css" href="a.css"
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
<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 @media
rule.
Your CSS file should be structured
something like this:
Wide page layout CSS rules
@media screen and (max-width:999px)
{
Medium page layout CSS rules
}
@media screen and (max-width:480px)
{
Narrow page layout CSS rules
}
A note on the CSS
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.
What does this
mean?
This means that rules written inside
each @media statements must
override the previous rules.
A quick
recap
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!
MSL Formación
'media queries friendly slideshow' ... I was wrong....
Pretty cool slideshow none the less - thanks for sharing 1 year ago
i {love: css;} 2 years ago