An introduction to CSS3 for web developers

Presentation for Microsoft TechDays, May 2011

Transcript

1. INTRODUCTION TO - CSS 3 - FOR WEB DEVELOPERS
2. RACHEL ANDREW
3. RACHEL ANDREW @rachelandrew rachelandrew.co.uk edgeofmyseat.com grabaperch.com
4. CSS 3
5. CSS3 IS THE NEXT VERSION OF CSS
6. CSS3 IS MODULAR
7. SOME CSS3 MODULES ARE MORE COMPLETE THAN OTHERS
8. W3C MATURITY LEVELS •Working Draft •Candidate Recommendation •Proposed Recommendation •W3C Recommendation http://www.w3.org/2005/10/Process-20051014/tr#maturity-levels
9. CSS3 IS SUPPORTED BY BROWSERS Some browsers and some (parts of) modules.
10. VENDOR-SPECIFIC EXTENSIONS Implementing early stage CSS3
11. border-radius
12. .box { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } border-radius
13. IN DEFENCE OF VENDOR-SPECIFIC EXTENSIONS
14. IN DEFENCE OF VENDOR-SPECIFIC EXTENSIONS •W3C Approved way to add extensions
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 code
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 property
17. USING CSS3
18. USING CSS3 Selectors
19. SELECTORS MODULE W3C Proposed Recommendation http://www.w3.org/TR/css3-selectors/
20. THE PROBLEM WITH CSS2 SELECTORS Not precise Led to “classitis” If we can’t access mark-up it is hard to target things
21. CSS3 SELECTORS “Common sense” new selectors target elements more precisely without adding classes
22. first-child target an element when it is the first child of a parent element
23. first-child
24. div#wrapper p:first-child { ! ! font-size: 1.5em; } first-child
25. first-child
26. last-child target an element when it is the last child of a parent element
27. last-child
28. ul#navigation li:last-child { ! ! border-bottom: none; } last-child
29. last-child
30. nth-child select multiple elements according to their position in the document tree
31. nth-child
32. tr:nth-child(odd) td { ! ! background-color: #f0e9c5; } nth-child
33. nth-child
34. tr:nth-child(2n+1) td { ! ! background-color: #f0e9c5; } nth-child http://reference.sitepoint.com/css/understandingnthchildexpressions
35. div#wrapper h1 + p { ! font-size: 1.5em; } Adjacent Sibling
36. Adjacent Sibling
37. form input[type="text"] { } ! form input[type="submit"] { } Attribute Selectors
38. Attribute Selectors
39. 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; } Attribute Selectors
40. BROWSER SUPPORT
41. BROWSER SUPPORT
42. DOES IT MATTER?
43. THAT DEPENDS...
44. YES, IT MATTERS.
45. JAVASCRIPT Plug the holes in browser support using JavaScript.
46. ROLL YOUR OWN
47. div#wrapper p:first-child, div#wrapper p.first { ! ! font-size: 1.5em; } jQuery: first-child <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ ! $("div#wrapper p:first-child").addClass("first"); }); </script>
48. ul#navigation li:last-child, ul#navigation li.last { ! ! border-bottom: none; } jQuery: last-child <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ ! $("ul#navigation li:last-child").addClass("last"); }); </script>
49. tr:nth-child(odd) td, td.odd { ! background-color: #f0e9c5; } jQuery: nth-child <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ ! $("tr:nth-child(odd) td").addClass("odd"); }); </script>
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/
51. CSS3 POLYFILLS http://ecsstender.org http://selectivizr.com/
52. CAUTION REQUIRED Remember some users may have an old browser AND no JavaScript
53. USING CSS3
54. USING CSS3 Color
55. COLOR MODULE Working Draft http://www.w3.org/TR/css3-color/
56. OPACITY specify the opacity of an element
57. opacity
58. ul#gallery li { ! ! opacity: 0.4; } ul#gallery li:hover { ! ! opacity: 1; } opacity
59. RGBA specify the opacity of a colour with ‘alpha’
60. RGBA
61. div#feature .caption { background-color: rgba(255,255,255,0.5); } RGBA
62. 24WAYS.ORG
63. BROWSER SUPPORT?
64. USING CSS3
65. USING CSS3 Fonts
66. FONTS MODULE Working Draft http://www.w3.org/TR/css3-fonts/
67. @FONT-FACE using a font other than one installed on your user’s computer
68. @font-face { ! font-family: KaffeesatzBold; ! src: url(YanoneKaffeesatz-Bold.ttf); } h1 { ! font-family: KaffeesatzBold, sans-serif; ! font-weight: normal; } @font-face
69. BROWSER COMPATIBILITY We need to use different types of fonts for different browsers and operating systems
70. LICENSING ISSUES Most commercial fonts have a license which prohibits them being uploaded to a webserver.
71. FONTS WITH FONT SQUIRREL http://www.fontsquirrel.com
72. FONT SQUIRREL
73. @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; } FONT SQUIRREL
74. HOSTED FONT SERVICES http://www.typekit.com http://fontdeck.com/ http://webfonts.fonts.com/
75. EDGEOFMYSEAT.COM
76. USING CSS3
77. USING CSS3 Backgrounds & Borders
78. BACKGROUNDS & BORDERS MODULE W3C Candidate Recommendation http://www.w3.org/TR/css3-background/
79. MULTIPLE BACKGROUNDS Apply more than one background image to an element
80. blockquote { ! ! background: url(quote-left.gif) top left no-repeat, ! ! url(quote-right.gif) bottom right no- repeat; ! } backgrounds
81. backgrounds
82. BORDER-RADIUS CSS rounded corners
83. .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; ! } border-radius
84. border-radius
85. BOX-SHADOW drop shadows without images
86. .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; ! } box-shadow
87. box-shadow
88. BROWSER SUPPORT
89. CSS3 POLYFILLS http://css3pie.com/
90. USING CSS3
91. USING CSS3 CSS Media Queries
92. MEDIA QUERIES W3C Candidate Recommendation http://www.w3.org/TR/css3-mediaqueries/
93. MEDIA QUERIES target browser characteristics, for example screen resolution, width and height
94. 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; } Media Queries
95. Media Queries
96. @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; ! ! } ! } Media Queries
97. Media Queries
98. <link media="screen and (max-device-width: 480px)" href="small.css" type= "text/css" rel="stylesheet" /> Media Queries
99. MEDIAQUERI.ES
100. RESPONSIVE DESIGN http://www.alistapart.com/articles/responsive-web-design/
101. MOBILE BROWSER SUPPORT
102. YES!
103. YES! Unless you are targeting Windows Phone 7
104. PROVIDING CSS TO WINDOWS PHONE 7 http://adactio.com/journal/4494/
105. DESKTOP BROWSER SUPPORT
106. MEDIA QUERY SUPPORT
107. MEDIA QUERIES POLYFILLS http://code.google.com/p/css3-mediaqueries-js/ https://github.com/scottjehl/Respond
108. THANK 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/
109. THANK 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/