Microsoft TechDays - CSS3 Presentation

  • 2,596 views
Uploaded on

An Introduction to CSS3 for Web Developers

An Introduction to CSS3 for Web Developers

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,596
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
156
Comments
0
Likes
5

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. INTROD UCTION TO - CSS 3 -FOR WEB DEVELOPERSMonday, 23 May 2011
  • 2. RACHEL ANDREWMonday, 23 May 2011
  • 3. RACHEL ANDREW @rachelandrew rachelandrew.co.uk edg eofmyseat.com grabaperch.comMonday, 23 May 2011
  • 4. C SS 3Monday, 23 May 2011
  • 5. CSS3 IS THE NEXT VERSION OF CSSMonday, 23 May 2011
  • 6. CSS3 IS MODULARMonday, 23 May 2011
  • 7. SOME CSS3 MODULES ARE MORE COMPLETE THAN OTHERSMonday, 23 May 2011
  • 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. CSS3 IS SUPPORTED BY BROWSERS Some browsers and some (parts of) modules.Monday, 23 May 2011
  • 10. VENDOR-SPECIFIC EXTENSIONS Implementing early stage CSS3Monday, 23 May 2011
  • 11. border-radiusMonday, 23 May 2011
  • 12. border-radius .box { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }Monday, 23 May 2011
  • 13. IN DEFENCE OF VENDOR-SPECIFIC EXTENSIONSMonday, 23 May 2011
  • 14. IN DEFENCE OF VENDOR-SPECIFIC EXTENSIONS •W3C Approved way to add extensionsMonday, 23 May 2011
  • 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. 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. USING CSS3Monday, 23 May 2011
  • 18. USING CSS3 SelectorsMonday, 23 May 2011
  • 19. SELECTORS MODULE W3C Proposed Recommendation http://www.w3.org/TR/css3-selectors/Monday, 23 May 2011
  • 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. CSS3 SELECTORS “Common sense” new selectors target elements more precisely without adding classesMonday, 23 May 2011
  • 22. first-child target an element when it is the first child of a parent elementMonday, 23 May 2011
  • 23. first-childMonday, 23 May 2011
  • 24. first-child div#wrapper p:first-child { ! ! font-size: 1.5em; }Monday, 23 May 2011
  • 25. first-childMonday, 23 May 2011
  • 26. last-child target an element when it is the last child of a parent elementMonday, 23 May 2011
  • 27. last-childMonday, 23 May 2011
  • 28. last-child ul#navigation li:last-child { ! ! border-bottom: none; }Monday, 23 May 2011
  • 29. last-childMonday, 23 May 2011
  • 30. nth-child select multiple elements according to their position in the document treeMonday, 23 May 2011
  • 31. nth-childMonday, 23 May 2011
  • 32. nth-child tr:nth-child(odd) td { ! ! background-color: #f0e9c5; }Monday, 23 May 2011
  • 33. NTH-CHILDMonday, 23 May 2011
  • 34. nth-child tr:nth-child(2n+1) td { ! ! background-color: #f0e9c5; } http://reference.sitepoint.com/css/understandingnthchildexpressionsMonday, 23 May 2011
  • 35. Adjacent Sibling div#wrapper h1 + p { ! font-size: 1.5em; }Monday, 23 May 2011
  • 36. Adjacent SiblingMonday, 23 May 2011
  • 37. Attribute Selectors form input[type="text"] { } ! form input[type="submit"] { }Monday, 23 May 2011
  • 38. ATTRIBUTE SELECTORSMonday, 23 May 2011
  • 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. BROWSER SUPPORTMonday, 23 May 2011
  • 41. BROWSER SUPPORTMonday, 23 May 2011
  • 42. DOES IT MATTER?Monday, 23 May 2011
  • 43. THAT DEPENDS...Monday, 23 May 2011
  • 44. YES, IT MATTERS.Monday, 23 May 2011
  • 45. JAVASCRIPT Plug the holes in browser support using JavaScript.Monday, 23 May 2011
  • 46. ROLL YOUR OWNMonday, 23 May 2011
  • 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. 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. 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. 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. CSS3 POLYFILLS http://ecsstender.org http://selectivizr.com/Monday, 23 May 2011
  • 52. CAUTION REQUIRED Remember some users may have an old browser AND no JavaScriptMonday, 23 May 2011
  • 53. USING CSS3Monday, 23 May 2011
  • 54. USING CSS3 ColorMonday, 23 May 2011
  • 55. COLOR MODULE Working Draft http://www.w3.org/TR/css3-color/Monday, 23 May 2011
  • 56. OPACITY specify the opacity of an elementMonday, 23 May 2011
  • 57. opacityMonday, 23 May 2011
  • 58. opacity ul#gallery li { ! ! opacity: 0.4; } ul#gallery li:hover { ! ! opacity: 1; }Monday, 23 May 2011
  • 59. RGBA specify the opacity of a colour with ‘alpha’Monday, 23 May 2011
  • 60. RGBAMonday, 23 May 2011
  • 61. RGBA div#feature .caption { background-color: rgba(255,255,255,0.5); }Monday, 23 May 2011
  • 62. 24WAYS.ORGMonday, 23 May 2011
  • 63. BROWSER SUPPORT?Monday, 23 May 2011
  • 64. USING CSS3Monday, 23 May 2011
  • 65. USING CSS3 FontsMonday, 23 May 2011
  • 66. FONTS MODULE Working Draft http://www.w3.org/TR/css3-fonts/Monday, 23 May 2011
  • 67. @FONT-FACE using a font other than one installed on your user’s computerMonday, 23 May 2011
  • 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. BROWSER COMPATIBILITY We need to use different types of fonts for different browsers and operating systemsMonday, 23 May 2011
  • 70. LICENSING ISSUES Most commercial fonts have a license which prohibits them being uploaded to a webserver.Monday, 23 May 2011
  • 71. FONTS WITH FONT SQUIRREL http://www.fontsquirrel.comMonday, 23 May 2011
  • 72. FONT SQUIRRELMonday, 23 May 2011
  • 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. HOSTED FONT SERVICES http://www.typekit.com http://fontdeck.com/ http://webfonts.fonts.com/Monday, 23 May 2011
  • 75. EDGEOFMYSEAT.COMMonday, 23 May 2011
  • 76. USING CSS3Monday, 23 May 2011
  • 77. USING CSS3 Backgrounds & BordersMonday, 23 May 2011
  • 78. BACKGROUNDS & BORDERS MODULE W3C Candidate Recommendation http://www.w3.org/TR/css3-background/Monday, 23 May 2011
  • 79. MULTIPLE BACKGROUNDS Apply more than one background image to an elementMonday, 23 May 2011
  • 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. backgroundsMonday, 23 May 2011
  • 82. BORDER-RADIUS Yes! CSS rounded cornersMonday, 23 May 2011
  • 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. border-radiusMonday, 23 May 2011
  • 85. BOX-SHADOW drop shadows without imagesMonday, 23 May 2011
  • 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. box-shadowMonday, 23 May 2011
  • 88. BROWSER SUPPORTMonday, 23 May 2011
  • 89. CSS3 POLYFILLS http://css3pie.com/Monday, 23 May 2011
  • 90. USING CSS3Monday, 23 May 2011
  • 91. USING CSS3 CSS Media QueriesMonday, 23 May 2011
  • 92. MEDIA QUERIES W3C Candidate Recommendation http://www.w3.org/TR/css3-mediaqueries/Monday, 23 May 2011
  • 93. MEDIA QUERIES target browser characteristics, for example screen resolution, width and heightMonday, 23 May 2011
  • 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. Media QueriesMonday, 23 May 2011
  • 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. Media QueriesMonday, 23 May 2011
  • 98. Media Queries <link media="screen and (max-device-width: 480px)" href="small.css" type= "text/css" rel="stylesheet" />Monday, 23 May 2011
  • 99. MEDIAQUERI.ESMonday, 23 May 2011
  • 100. RESPONSIVE DESIGN http://www.alistapart.com/articles/responsive-web-design/Monday, 23 May 2011
  • 101. MOBILE BROWSER SUPPORTMonday, 23 May 2011
  • 102. YES!Monday, 23 May 2011
  • 103. YES! Unless you are targeting Windows Phone 7Monday, 23 May 2011
  • 104. PROVIDING CSS TO WINDOWS PHONE 7 http://adactio.com/journal/4494/Monday, 23 May 2011
  • 105. DESKTOP BROWSER SUPPORTMonday, 23 May 2011
  • 106. MEDIA QUERY SUPPORTMonday, 23 May 2011
  • 107. MEDIA QUERIES POLYFILLS http://code.google.com/p/css3-mediaqueries-js/ https://github.com/scottjehl/RespondMonday, 23 May 2011
  • 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. 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