CSS3 Media Queries

65,561 views

Published on

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.

Published in: Education
15 Comments
88 Likes
Statistics
Notes
  • Njce! Thanks for sharing.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 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?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Thank you so much!!!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • nice presentation!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I liked it. Thanks.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
65,561
On SlideShare
0
From Embeds
0
Number of Embeds
17,783
Actions
Shares
0
Downloads
1,454
Comments
15
Likes
88
Embeds 0
No embeds

No notes for slide

CSS3 Media Queries

  1. 1. CSS3 MEDIA QUERIES
  2. 2. Why should you care about media queries?
  3. 3. Media queries are one of the most exciting aspects about CSS today.
  4. 4. Media queries will allow us to change our layouts to suit the exact need of different devices - without changing the content.
  5. 5. For example, we will be able to move away from “one-size-fits- all” solutions such as liquid, elastic and fixed width layouts.
  6. 6. Let’s take a standard 3 column 1000px wide layout…
  7. 7. Imagine if it could become a 2 column 800px wide if the user has a narrower browser window…
  8. 8. …or a single column 400px wide layout if the user has a mobile device or a very narrow browser window…
  9. 9. And all done with CSS alone - no JavaScript…
  10. 10. This is just one quick example of how media queries can help us deliver CSS in new and exciting ways
  11. 11. But… before we talk about media queries, we need to do a quick overview of media types.
  12. 12. So, what are media types?
  13. 13. CSS can be used to specify how a document is presented in different media.
  14. 14. There are ten media types defined in CSS 2.1
  15. 15. 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
  16. 16. There are five methods that can be used to specify media for style sheets.
  17. 17. Method 1: <link> within HTML
  18. 18. 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" />
  19. 19. Method 2: <?xml stylesheet> within XML
  20. 20. 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" ?>
  21. 21. Method 3: @import within HTML
  22. 22. 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>
  23. 23. 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/
  24. 24. Method 4: @import within CSS
  25. 25. You can specify the target medium within a CSS file using @import @import url("a.css") screen;
  26. 26. Media-types within @import rules are not supported by IE5, IE6 or IE7. The rule is ignored.
  27. 27. Method 5: @media within CSS
  28. 28. You can specify the target medium within a CSS file using @media @media screen { body { color: blue; } }
  29. 29. Why should we care about these five methods?
  30. 30. Because you can use these five methods to define not only media types, but media queries
  31. 31. Let’s talk media queries
  32. 32. 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)">
  33. 33. A media query is a logical expression that is either true or false.
  34. 34. The CSS associated with the media query expression is only applied to the device if the expression is true.
  35. 35. Media query syntax
  36. 36. 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
  37. 37. 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
  38. 38. Media features are placed within brackets. <link rel="stylesheet" type="text/css" href="a.css" media=”screen and (color)"> Media feature
  39. 39. 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
  40. 40. Most media features accept “min-” or “max-” prefixes. <link rel="stylesheet" type="text/css" href="a.css" media="screen and (min-height: 20em)">
  41. 41. Media features can often be used without a value. <link rel="stylesheet" type="text/css" href="a.css" media="screen and (color)">
  42. 42. 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)
  43. 43. The full media feature list
  44. 44. 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
  45. 45. A simple example
  46. 46. 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)">
  47. 47. This same media enquiry could be used with @import via HTML. <style type="text/css" media="screen and (color) "> @import "a.css";</style>
  48. 48. It could be used with @import via CSS. @import url("a.css") screen and (color);
  49. 49. Or using @media via CSS. @media screen and (color) { body { color: blue; } }
  50. 50. Multiple expressions
  51. 51. You can use multiple expressions in a media query if you join them with the “and” keyword.
  52. 52. 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)">
  53. 53. Comma separated
  54. 54. You can also use multiple, comma-separated media queries. The comma acts like an “or” keyword.
  55. 55. 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)">
  56. 56. Using the “not” keyword
  57. 57. You can use the not keyword in a media query if you want your CSS to be ignored by a specific device.
  58. 58. 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)">
  59. 59. Using the “only” expression
  60. 60. 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)">
  61. 61. Support for media queries
  62. 62. 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
  63. 63. What do other browsers see?
  64. 64. 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)">
  65. 65. 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)">
  66. 66. Targeting the iPhone
  67. 67. The iPhone does not support handheld media type. Apple recommends targeting the iPhone using media queries.
  68. 68. 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)" >
  69. 69. Using media queries to control layouts
  70. 70. 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?
  71. 71. Here is a quick step by step example
  72. 72. Step 1: Add a link to your style sheet <link rel="stylesheet" type="text/css" href=”master.css" media="screen" >
  73. 73. Step 2: Add your “wide page layout” CSS rules into your CSS file
  74. 74. Step 3: Add a @media rule with a media query @media screen and (max-width:999px) { /* add your rules here */ }
  75. 75. Step 4: Add your “medium page layout” CSS rules inside this @media rule.
  76. 76. Step 5: Add a second @media rule with a media query @media screen and (max-width:480px) { /* add your rules here */ }
  77. 77. Step 6: Add your “narrow page layout” CSS rules inside this new @media rule.
  78. 78. 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 }
  79. 79. A note on the CSS
  80. 80. Devices wider than 1000px will see the “wide page layout” CSS only.
  81. 81. Devices narrower than 1000px will see the “wide page layout” CSS AND the “medium page layout” CSS.
  82. 82. Devices narrower than 480px will see the “wide page layout”, “medium page layout” and “narrow page layout” CSS.
  83. 83. What does this mean?
  84. 84. This means that rules written inside each @media statements must override the previous rules.
  85. 85. A quick recap
  86. 86. I believe that as media queries become supported, we will see a radical change in the way we develop websites in the future.
  87. 87. Now is a good time to get your head around these powerful CSS3 expressions so that you are ready when the time comes!
  88. 88. We’re done

×