INTROD  UCTION                      TO - CSS 3 -FOR                       WEB DEVELOPERSMonday, 23 May 2011
RACHEL ANDREWMonday, 23 May 2011
RACHEL ANDREW                      @rachelandrew                      rachelandrew.co.uk                      edg eofmysea...
C SS 3Monday, 23 May 2011
CSS3 IS                      THE NEXT VERSION OF CSSMonday, 23 May 2011
CSS3 IS                      MODULARMonday, 23 May 2011
SOME CSS3 MODULES                      ARE MORE COMPLETE                         THAN OTHERSMonday, 23 May 2011
W3C MATURITY LEVELS                      •Working Draft                      •Candidate Recommendation                    ...
CSS3 IS                      SUPPORTED BY BROWSERS                       Some browsers and some (parts of) modules.Monday,...
VENDOR-SPECIFIC EXTENSIONS                            Implementing early stage CSS3Monday, 23 May 2011
border-radiusMonday, 23 May 2011
border-radius                      .box {                         -moz-border-radius: 10px;                         -webki...
IN DEFENCE OF VENDOR-SPECIFIC                               EXTENSIONSMonday, 23 May 2011
IN DEFENCE OF VENDOR-SPECIFIC                                         EXTENSIONS                      •W3C Approved way to...
IN DEFENCE OF VENDOR-SPECIFIC                                           EXTENSIONS                      •W3C Approved way ...
IN DEFENCE OF VENDOR-SPECIFIC                                            EXTENSIONS                      •W3C Approved way...
USING CSS3Monday, 23 May 2011
USING CSS3                      SelectorsMonday, 23 May 2011
SELECTORS MODULE                         W3C Proposed Recommendation                      http://www.w3.org/TR/css3-select...
THE PROBLEM WITH CSS2                                    SELECTORS                                          Not precise   ...
CSS3 SELECTORS                                 “Common sense” new selectors                      target elements more prec...
first-child                      target an element when it is the first child of a parent elementMonday, 23 May 2011
first-childMonday, 23 May 2011
first-child                      div#wrapper p:first-child {                      ! ! font-size: 1.5em;                    ...
first-childMonday, 23 May 2011
last-child                      target an element when it is the last child of a parent elementMonday, 23 May 2011
last-childMonday, 23 May 2011
last-child                      ul#navigation li:last-child {                      ! ! border-bottom: none;               ...
last-childMonday, 23 May 2011
nth-child                      select multiple elements according to their position in the document                       ...
nth-childMonday, 23 May 2011
nth-child                      tr:nth-child(odd) td {                      ! ! background-color: #f0e9c5;                 ...
NTH-CHILDMonday, 23 May 2011
nth-child                      tr:nth-child(2n+1) td {                      ! ! background-color: #f0e9c5;                ...
Adjacent Sibling                      div#wrapper h1 + p {                      ! font-size: 1.5em;                      }...
Adjacent SiblingMonday, 23 May 2011
Attribute Selectors                      form input[type="text"] {                      }                      !          ...
ATTRIBUTE SELECTORSMonday, 23 May 2011
Attribute Selectors                      label[for="fContact"] {                          ! float: none;                  ...
BROWSER                      SUPPORTMonday, 23 May 2011
BROWSER SUPPORTMonday, 23 May 2011
DOES IT MATTER?Monday, 23 May 2011
THAT DEPENDS...Monday, 23 May 2011
YES, IT MATTERS.Monday, 23 May 2011
JAVASCRIPT                      Plug the holes in browser support using JavaScript.Monday, 23 May 2011
ROLL YOUR OWNMonday, 23 May 2011
jQuery: first-child                      div#wrapper p:first-child,                      div#wrapper p.first {             ...
jQuery: last-child                      ul#navigation li:last-child, ul#navigation li.last {                      ! ! bord...
jQuery: nth-child                      tr:nth-child(odd) td, td.odd {                      ! background-color: #f0e9c5;   ...
USE A “POLYFILL”                      “A polyfill, or polyfiller, is a piece of code (or plugin) that provides the          ...
CSS3 POLYFILLS                        http://ecsstender.org                        http://selectivizr.com/Monday, 23 May 2...
CAUTION REQUIRED                      Remember some users may have an old browser AND no JavaScriptMonday, 23 May 2011
USING CSS3Monday, 23 May 2011
USING CSS3                      ColorMonday, 23 May 2011
COLOR MODULE                               Working Draft                      http://www.w3.org/TR/css3-color/Monday, 23 M...
OPACITY                      specify the opacity of an elementMonday, 23 May 2011
opacityMonday, 23 May 2011
opacity                      ul#gallery li {                      ! ! opacity: 0.4;                      }                ...
RGBA                      specify the opacity of a colour with ‘alpha’Monday, 23 May 2011
RGBAMonday, 23 May 2011
RGBA                      div#feature .caption {                          background-color: rgba(255,255,255,0.5);        ...
24WAYS.ORGMonday, 23 May 2011
BROWSER                      SUPPORT?Monday, 23 May 2011
USING CSS3Monday, 23 May 2011
USING CSS3                      FontsMonday, 23 May 2011
FONTS MODULE                               Working Draft                      http://www.w3.org/TR/css3-fonts/Monday, 23 M...
@FONT-FACE                      using a font other than one installed on your user’s computerMonday, 23 May 2011
@font-face                      @font-face {                        !                        font-family: KaffeesatzBold; ...
BROWSER COMPATIBILITY                      We need to use different types of fonts for different browsers and             ...
LICENSING ISSUES                      Most commercial fonts have a license which prohibits them being                     ...
FONTS WITH FONT SQUIRREL                            http://www.fontsquirrel.comMonday, 23 May 2011
FONT SQUIRRELMonday, 23 May 2011
FONT SQUIRREL                      @font-face {                      ! font-family: YanoneKaffeesatzBold;                 ...
HOSTED FONT SERVICES                            http://www.typekit.com                             http://fontdeck.com/   ...
EDGEOFMYSEAT.COMMonday, 23 May 2011
USING CSS3Monday, 23 May 2011
USING CSS3                      Backgrounds &                      BordersMonday, 23 May 2011
BACKGROUNDS & BORDERS                                   MODULE                             W3C Candidate Recommendation   ...
MULTIPLE BACKGROUNDS                      Apply more than one background image to an elementMonday, 23 May 2011
backgrounds                      blockquote {                      ! ! background: url(quote-left.gif) top left           ...
backgroundsMonday, 23 May 2011
BORDER-RADIUS                       Yes! CSS rounded cornersMonday, 23 May 2011
border-radius                      .box1   {                      ! !      background-color: #a18c83;                     ...
border-radiusMonday, 23 May 2011
BOX-SHADOW                      drop shadows without imagesMonday, 23 May 2011
box-shadow                      .box1   {                      ! !      background-color: #333;                      ! !  ...
box-shadowMonday, 23 May 2011
BROWSER                      SUPPORTMonday, 23 May 2011
CSS3 POLYFILLS                         http://css3pie.com/Monday, 23 May 2011
USING CSS3Monday, 23 May 2011
USING CSS3                      CSS Media QueriesMonday, 23 May 2011
MEDIA QUERIES                           W3C Candidate Recommendation                      http://www.w3.org/TR/css3-mediaq...
MEDIA QUERIES                      target browser characteristics, for example screen resolution, width                   ...
Media Queries                      div#wrapper {                      !   width: 780px;                      !   margin-le...
Media QueriesMonday, 23 May 2011
Media Queries                      @media screen and (max-device-width: 480px) {                      !   !    div#wrapper...
Media QueriesMonday, 23 May 2011
Media Queries                      <link media="screen and (max-device-width:                      480px)" href="small.css...
MEDIAQUERI.ESMonday, 23 May 2011
RESPONSIVE DESIGN                      http://www.alistapart.com/articles/responsive-web-design/Monday, 23 May 2011
MOBILE                      BROWSER                      SUPPORTMonday, 23 May 2011
YES!Monday, 23 May 2011
YES!                      Unless you are targeting Windows Phone 7Monday, 23 May 2011
PROVIDING CSS TO WINDOWS                               PHONE 7                           http://adactio.com/journal/4494/M...
DESKTOP                      BROWSER                      SUPPORTMonday, 23 May 2011
MEDIA QUERY SUPPORTMonday, 23 May 2011
MEDIA QUERIES POLYFILLS                       http://code.google.com/p/css3-mediaqueries-js/                            ht...
THAN K YOU!                      Photo credit for Media Queries example: http://www.flickr.com/photos/dominicspics/46258088...
THAN K YOU!                                                @ rachelandrew                                                h...
Upcoming SlideShare
Loading in...5
×

Microsoft TechDays - CSS3 Presentation

2,752

Published on

An Introduction to CSS3 for Web Developers

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,752
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
160
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Microsoft TechDays - CSS3 Presentation

  1. 1. INTROD UCTION TO - CSS 3 -FOR WEB DEVELOPERSMonday, 23 May 2011
  2. 2. RACHEL ANDREWMonday, 23 May 2011
  3. 3. RACHEL ANDREW @rachelandrew rachelandrew.co.uk edg eofmyseat.com grabaperch.comMonday, 23 May 2011
  4. 4. C SS 3Monday, 23 May 2011
  5. 5. CSS3 IS THE NEXT VERSION OF CSSMonday, 23 May 2011
  6. 6. CSS3 IS MODULARMonday, 23 May 2011
  7. 7. SOME CSS3 MODULES ARE MORE COMPLETE THAN OTHERSMonday, 23 May 2011
  8. 8. W3C MATURITY LEVELS •Working Draft •Candidate Recommendation •Proposed Recommendation •W3C Recommendation http://www.w3.org/2005/10/Process-20051014/tr#maturity-levelsMonday, 23 May 2011
  9. 9. CSS3 IS SUPPORTED BY BROWSERS Some browsers and some (parts of) modules.Monday, 23 May 2011
  10. 10. VENDOR-SPECIFIC EXTENSIONS Implementing early stage CSS3Monday, 23 May 2011
  11. 11. border-radiusMonday, 23 May 2011
  12. 12. border-radius .box { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }Monday, 23 May 2011
  13. 13. IN DEFENCE OF VENDOR-SPECIFIC EXTENSIONSMonday, 23 May 2011
  14. 14. IN DEFENCE OF VENDOR-SPECIFIC EXTENSIONS •W3C Approved way to add extensionsMonday, 23 May 2011
  15. 15. IN DEFENCE OF VENDOR-SPECIFIC EXTENSIONS •W3C Approved way to add extensions •If a module changes browser doesn’t need to change and break older codeMonday, 23 May 2011
  16. 16. IN DEFENCE OF VENDOR-SPECIFIC EXTENSIONS •W3C Approved way to add extensions •If a module changes browser doesn’t need to change and break older code •Use with care - and always include the real propertyMonday, 23 May 2011
  17. 17. USING CSS3Monday, 23 May 2011
  18. 18. USING CSS3 SelectorsMonday, 23 May 2011
  19. 19. SELECTORS MODULE W3C Proposed Recommendation http://www.w3.org/TR/css3-selectors/Monday, 23 May 2011
  20. 20. THE PROBLEM WITH CSS2 SELECTORS Not precise Led to “classitis” If we can’t access mark-up it is hard to target thingsMonday, 23 May 2011
  21. 21. CSS3 SELECTORS “Common sense” new selectors target elements more precisely without adding classesMonday, 23 May 2011
  22. 22. first-child target an element when it is the first child of a parent elementMonday, 23 May 2011
  23. 23. first-childMonday, 23 May 2011
  24. 24. first-child div#wrapper p:first-child { ! ! font-size: 1.5em; }Monday, 23 May 2011
  25. 25. first-childMonday, 23 May 2011
  26. 26. last-child target an element when it is the last child of a parent elementMonday, 23 May 2011
  27. 27. last-childMonday, 23 May 2011
  28. 28. last-child ul#navigation li:last-child { ! ! border-bottom: none; }Monday, 23 May 2011
  29. 29. last-childMonday, 23 May 2011
  30. 30. nth-child select multiple elements according to their position in the document treeMonday, 23 May 2011
  31. 31. nth-childMonday, 23 May 2011
  32. 32. nth-child tr:nth-child(odd) td { ! ! background-color: #f0e9c5; }Monday, 23 May 2011
  33. 33. NTH-CHILDMonday, 23 May 2011
  34. 34. nth-child tr:nth-child(2n+1) td { ! ! background-color: #f0e9c5; } http://reference.sitepoint.com/css/understandingnthchildexpressionsMonday, 23 May 2011
  35. 35. Adjacent Sibling div#wrapper h1 + p { ! font-size: 1.5em; }Monday, 23 May 2011
  36. 36. Adjacent SiblingMonday, 23 May 2011
  37. 37. Attribute Selectors form input[type="text"] { } ! form input[type="submit"] { }Monday, 23 May 2011
  38. 38. ATTRIBUTE SELECTORSMonday, 23 May 2011
  39. 39. Attribute Selectors label[for="fContact"] { ! float: none; ! width: auto; } a[href ^="mailto:"] { ! ! padding-right: 20px; ! ! background-image:url(email.png); ! ! background-repeat: no-repeat; ! ! background-position: right center; }Monday, 23 May 2011
  40. 40. BROWSER SUPPORTMonday, 23 May 2011
  41. 41. BROWSER SUPPORTMonday, 23 May 2011
  42. 42. DOES IT MATTER?Monday, 23 May 2011
  43. 43. THAT DEPENDS...Monday, 23 May 2011
  44. 44. YES, IT MATTERS.Monday, 23 May 2011
  45. 45. JAVASCRIPT Plug the holes in browser support using JavaScript.Monday, 23 May 2011
  46. 46. ROLL YOUR OWNMonday, 23 May 2011
  47. 47. jQuery: first-child div#wrapper p:first-child, div#wrapper p.first { ! ! font-size: 1.5em; } <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ ! $("div#wrapper p:first-child").addClass("first"); }); </script>Monday, 23 May 2011
  48. 48. jQuery: last-child ul#navigation li:last-child, ul#navigation li.last { ! ! border-bottom: none; } <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ ! $("ul#navigation li:last-child").addClass("last"); }); </script>Monday, 23 May 2011
  49. 49. jQuery: nth-child tr:nth-child(odd) td, td.odd { ! background-color: #f0e9c5; } <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ ! $("tr:nth-child(odd) td").addClass("odd"); }); </script>Monday, 23 May 2011
  50. 50. USE A “POLYFILL” “A polyfill, or polyfiller, is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively. Flattening the API landscape if you will.” Remy Sharp - http://remysharp.com/2010/10/08/what-is-a-polyfill/Monday, 23 May 2011
  51. 51. CSS3 POLYFILLS http://ecsstender.org http://selectivizr.com/Monday, 23 May 2011
  52. 52. CAUTION REQUIRED Remember some users may have an old browser AND no JavaScriptMonday, 23 May 2011
  53. 53. USING CSS3Monday, 23 May 2011
  54. 54. USING CSS3 ColorMonday, 23 May 2011
  55. 55. COLOR MODULE Working Draft http://www.w3.org/TR/css3-color/Monday, 23 May 2011
  56. 56. OPACITY specify the opacity of an elementMonday, 23 May 2011
  57. 57. opacityMonday, 23 May 2011
  58. 58. opacity ul#gallery li { ! ! opacity: 0.4; } ul#gallery li:hover { ! ! opacity: 1; }Monday, 23 May 2011
  59. 59. RGBA specify the opacity of a colour with ‘alpha’Monday, 23 May 2011
  60. 60. RGBAMonday, 23 May 2011
  61. 61. RGBA div#feature .caption { background-color: rgba(255,255,255,0.5); }Monday, 23 May 2011
  62. 62. 24WAYS.ORGMonday, 23 May 2011
  63. 63. BROWSER SUPPORT?Monday, 23 May 2011
  64. 64. USING CSS3Monday, 23 May 2011
  65. 65. USING CSS3 FontsMonday, 23 May 2011
  66. 66. FONTS MODULE Working Draft http://www.w3.org/TR/css3-fonts/Monday, 23 May 2011
  67. 67. @FONT-FACE using a font other than one installed on your user’s computerMonday, 23 May 2011
  68. 68. @font-face @font-face { ! font-family: KaffeesatzBold; ! src: url(YanoneKaffeesatz-Bold.ttf); } h1 { ! font-family: KaffeesatzBold, sans-serif; ! font-weight: normal; }Monday, 23 May 2011
  69. 69. BROWSER COMPATIBILITY We need to use different types of fonts for different browsers and operating systemsMonday, 23 May 2011
  70. 70. LICENSING ISSUES Most commercial fonts have a license which prohibits them being uploaded to a webserver.Monday, 23 May 2011
  71. 71. FONTS WITH FONT SQUIRREL http://www.fontsquirrel.comMonday, 23 May 2011
  72. 72. FONT SQUIRRELMonday, 23 May 2011
  73. 73. FONT SQUIRREL @font-face { ! font-family: YanoneKaffeesatzBold; ! ! src: url(yanonekaffeesatz-bold-webfont.eot); ! ! src: local(☺), url(yanonekaffeesatz-bold-webfont.woff) format (woff), url(yanonekaffeesatz-bold-webfont.ttf) format(truetype), url (yanonekaffeesatz-bold-webfont.svg#webfontUcEp3Pt5) format(svg); ! font-weight: normal; ! font-style: normal; }Monday, 23 May 2011
  74. 74. HOSTED FONT SERVICES http://www.typekit.com http://fontdeck.com/ http://webfonts.fonts.com/Monday, 23 May 2011
  75. 75. EDGEOFMYSEAT.COMMonday, 23 May 2011
  76. 76. USING CSS3Monday, 23 May 2011
  77. 77. USING CSS3 Backgrounds & BordersMonday, 23 May 2011
  78. 78. BACKGROUNDS & BORDERS MODULE W3C Candidate Recommendation http://www.w3.org/TR/css3-background/Monday, 23 May 2011
  79. 79. MULTIPLE BACKGROUNDS Apply more than one background image to an elementMonday, 23 May 2011
  80. 80. backgrounds blockquote { ! ! background: url(quote-left.gif) top left no-repeat, ! ! url(quote-right.gif) bottom right no- repeat; ! }Monday, 23 May 2011
  81. 81. backgroundsMonday, 23 May 2011
  82. 82. BORDER-RADIUS Yes! CSS rounded cornersMonday, 23 May 2011
  83. 83. border-radius .box1 { ! ! background-color: #a18c83; ! ! border: 3px solid #6d4d6b; ! ! -moz-border-radius: 15px; ! ! -webkit-border-radius: 15px; border-radius: 15px; ! ! color: #fff; ! ! padding: 10px; ! ! margin: 0 0 20px 0; ! } ! ! .box2 { ! ! border: 5px solid #6d4d6b; ! ! -moz-border-radius-topleft: 50px; ! ! -webkit-border-top-left-radius: 50px; border-top-left-radius: 50px; ! ! padding: 10px 5px 5px 20px; ! }Monday, 23 May 2011
  84. 84. border-radiusMonday, 23 May 2011
  85. 85. BOX-SHADOW drop shadows without imagesMonday, 23 May 2011
  86. 86. box-shadow .box1 { ! ! background-color: #333; ! ! -moz-border-radius: 15px; ! ! -webkit-border-radius: 15px; border-radius: 15px; -moz-box-shadow: 10px 10px 5px #666; -webkit-box-shadow: 10px 10px 5px #666; box-shadow: 10px 10px 5px #666; ! ! color: #fff; ! ! padding: 10px; ! ! margin: 0 0 20px 0; ! }Monday, 23 May 2011
  87. 87. box-shadowMonday, 23 May 2011
  88. 88. BROWSER SUPPORTMonday, 23 May 2011
  89. 89. CSS3 POLYFILLS http://css3pie.com/Monday, 23 May 2011
  90. 90. USING CSS3Monday, 23 May 2011
  91. 91. USING CSS3 CSS Media QueriesMonday, 23 May 2011
  92. 92. MEDIA QUERIES W3C Candidate Recommendation http://www.w3.org/TR/css3-mediaqueries/Monday, 23 May 2011
  93. 93. MEDIA QUERIES target browser characteristics, for example screen resolution, width and heightMonday, 23 May 2011
  94. 94. Media Queries div#wrapper { ! width: 780px; ! margin-left: auto; ! margin-right: auto; } ! div#header { ! background-image: url(media-queries-browser.jpg); ! height: 349px; ! position: relative; } ! #content { ! float: left; ! width: 540px; } ! #navigation { ! float:right; ! width: 200px; }Monday, 23 May 2011
  95. 95. Media QueriesMonday, 23 May 2011
  96. 96. Media Queries @media screen and (max-device-width: 480px) { ! ! div#wrapper { ! ! ! width: 400px; ! ! } ! ! ! div#header { ! ! ! background-image: url(media-queries-phone.jpg); ! ! ! height: 93px; ! ! ! position: relative; ! ! } ! ! ! ! div#header h1 { ! ! ! font-size: 140%; ! ! } ! ! ! ! #content { ! ! ! float: none; ! ! ! width: 100%; ! ! } ! ! ! #navigation { ! ! ! float:none; ! ! ! width: auto; ! ! } ! }Monday, 23 May 2011
  97. 97. Media QueriesMonday, 23 May 2011
  98. 98. Media Queries <link media="screen and (max-device-width: 480px)" href="small.css" type= "text/css" rel="stylesheet" />Monday, 23 May 2011
  99. 99. MEDIAQUERI.ESMonday, 23 May 2011
  100. 100. RESPONSIVE DESIGN http://www.alistapart.com/articles/responsive-web-design/Monday, 23 May 2011
  101. 101. MOBILE BROWSER SUPPORTMonday, 23 May 2011
  102. 102. YES!Monday, 23 May 2011
  103. 103. YES! Unless you are targeting Windows Phone 7Monday, 23 May 2011
  104. 104. PROVIDING CSS TO WINDOWS PHONE 7 http://adactio.com/journal/4494/Monday, 23 May 2011
  105. 105. DESKTOP BROWSER SUPPORTMonday, 23 May 2011
  106. 106. MEDIA QUERY SUPPORTMonday, 23 May 2011
  107. 107. MEDIA QUERIES POLYFILLS http://code.google.com/p/css3-mediaqueries-js/ https://github.com/scottjehl/RespondMonday, 23 May 2011
  108. 108. THAN K YOU! Photo credit for Media Queries example: http://www.flickr.com/photos/dominicspics/4625808875/ Font for web fonts example: http://www.yanone.de/typedesign/kaffeesatz/Monday, 23 May 2011
  109. 109. THAN K YOU! @ rachelandrew http://wp.me/PorPc-cf Photo credit for Media Queries example: http://www.flickr.com/photos/dominicspics/4625808875/ Font for web fonts example: http://www.yanone.de/typedesign/kaffeesatz/Monday, 23 May 2011
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×