Your SlideShare is downloading. ×
0
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
CSS3 Media Queries
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

CSS3 Media Queries

61,446

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 …

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
14 Comments
84 Likes
Statistics
Notes
  • 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
  • Thanks.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
61,446
On Slideshare
0
From Embeds
0
Number of Embeds
47
Actions
Shares
0
Downloads
1,290
Comments
14
Likes
84
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×