• Share
  • Email
  • Embed
  • Like
  • Private Content
CSS3 Media Queries
 

CSS3 Media Queries

on

  • 63,479 views

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.

Statistics

Views

Total Views
63,479
Views on SlideShare
46,239
Embed Views
17,240

Actions

Likes
79
Downloads
1,146
Comments
14

99 Embeds 17,240

http://www.alexilin.ru 4588
http://www.splashnology.com 3764
http://www.robinvanwijngaarden.nl 2372
http://www.cssnolanche.com.br 1691
http://www.slideshare.net 870
http://uiandwe.tistory.com 674
http://blog.dreamcss.com 590
http://nundefined.tistory.com 457
http://wrmf.ca 243
http://blog.nundefined.com 213
http://webdesignintermediate.wordpress.com 212
http://naublog.ru 128
http://ggomzu.com 114
http://deathhell1121.blogspot.tw 111
http://deathhell1121.blogspot.com 93
http://semantic.pe.kr 90
http://moodle.kyledef.org 85
http://jrochelly.com 78
http://localhost:8888 74
http://leonkulik.com 60
http://www.yuploo.com 53
http://wolf.metrotype.com 53
http://localhost 48
http://xss.yandex.net 47
http://hoctudau.com 39
http://webcontentmanagers.blogspot.com 27
http://static.slidesharecdn.com 24
http://deathhell1121.blogspot.jp 22
http://mag.splashnology.com 21
http://www.semantic.pe.kr 21
http://flavors.me 21
http://nikhilbhalla.com 20
http://blog.company100.net 20
http://webcontentmanagers.blogspot.mx 19
http://digitalmediaexperts.com 17
http://www.dannynjust.byethost22.com 16
http://deathhell1121.blogspot.hk 15
http://www.vooshare.biz 14
http://www.jrochelly.com 14
http://vposts.blogspot.com 13
http://blog.wingzero.tw 12
http://sumerator.blogspot.com 12
http://sarmanov.com 10
http://www.giovanimartini.com.br 10
http://www.maxdesign.com.au 9
http://jrochelly.blogspot.com.br 8
http://gd6d.fr 8
http://feeds.feedburner.com 8
http://www.digitalmediaexperts.com 8
http://translate.googleusercontent.com 8
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

110 of 14 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Very nice job on this presentation (as well as on other authored by you).

    I do have to comment this: shouldn't you use min-width instead of max-width on your 'quick step by step example' for targetting the widest screen? By using min-width you will be excluding any screen that has more than 999px on its width, right?
    Are you sure you want to
    Your message goes here
    Processing…
  • Thank you so much!!!
    Are you sure you want to
    Your message goes here
    Processing…
  • nice presentation!
    Are you sure you want to
    Your message goes here
    Processing…
  • I liked it. Thanks.
    Are you sure you want to
    Your message goes here
    Processing…
  • Thanks.
    Are you sure you want to
    Your message goes here
    Processing…

110 of 14 previous next

Post Comment
Edit your comment

    CSS3 Media Queries CSS3 Media Queries Presentation Transcript

    • CSS3 MEDIA QUERIES
    • 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.
    • 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!
    • We’re done