An Introduction to CSS3 for Web Developers

1. INTROD UCTION
TO - CSS 3 -FOR
WEB DEVELOPERS
Monday, 23 May 2011

2. RACHEL ANDREW
Monday, 23 May 2011

3. RACHEL ANDREW
@rachelandrew
rachelandrew.co.uk
edg eofmyseat.com
grabaperch.com
Monday, 23 May 2011

4. C SS 3
Monday, 23 May 2011

5. CSS3 IS
THE NEXT VERSION OF CSS
Monday, 23 May 2011

6. CSS3 IS
MODULAR
Monday, 23 May 2011

7. SOME CSS3 MODULES
ARE MORE COMPLETE
THAN OTHERS
Monday, 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-levels
Monday, 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 CSS3
Monday, 23 May 2011

11. border-radius
Monday, 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
EXTENSIONS
Monday, 23 May 2011

14. IN DEFENCE OF VENDOR-SPECIFIC
EXTENSIONS
•W3C Approved way to add extensions
Monday, 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
code
Monday, 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 property
Monday, 23 May 2011

17. USING CSS3
Monday, 23 May 2011

18. USING CSS3
Selectors
Monday, 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 things
Monday, 23 May 2011

21. CSS3 SELECTORS
“Common sense” new selectors
target elements more precisely without adding classes
Monday, 23 May 2011

22. first-child
target an element when it is the first child of a parent element
Monday, 23 May 2011

23. first-child
Monday, 23 May 2011

24. first-child
div#wrapper p:first-child {
! ! font-size: 1.5em;
}
Monday, 23 May 2011

25. first-child
Monday, 23 May 2011

26. last-child
target an element when it is the last child of a parent element
Monday, 23 May 2011

27. last-child
Monday, 23 May 2011

28. last-child
ul#navigation li:last-child {
! ! border-bottom: none;
}
Monday, 23 May 2011

29. last-child
Monday, 23 May 2011

30. nth-child
select multiple elements according to their position in the document
tree
Monday, 23 May 2011

31. nth-child
Monday, 23 May 2011

32. nth-child
tr:nth-child(odd) td {
! ! background-color: #f0e9c5;
}
Monday, 23 May 2011

33. NTH-CHILD
Monday, 23 May 2011

34. nth-child
tr:nth-child(2n+1) td {
! ! background-color: #f0e9c5;
}
http://reference.sitepoint.com/css/understandingnthchildexpressions
Monday, 23 May 2011

35. Adjacent Sibling
div#wrapper h1 + p {
! font-size: 1.5em;
}
Monday, 23 May 2011

36. Adjacent Sibling
Monday, 23 May 2011

37. Attribute Selectors
form input[type="text"] {
}
!
form input[type="submit"] {
}
Monday, 23 May 2011

38. ATTRIBUTE SELECTORS
Monday, 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
SUPPORT
Monday, 23 May 2011

41. BROWSER SUPPORT
Monday, 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 OWN
Monday, 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 JavaScript
Monday, 23 May 2011

53. USING CSS3
Monday, 23 May 2011

54. USING CSS3
Color
Monday, 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 element
Monday, 23 May 2011

57. opacity
Monday, 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. RGBA
Monday, 23 May 2011

61. RGBA
div#feature .caption {
background-color: rgba(255,255,255,0.5);
}
Monday, 23 May 2011

62. 24WAYS.ORG
Monday, 23 May 2011

63. BROWSER
SUPPORT?
Monday, 23 May 2011

64. USING CSS3
Monday, 23 May 2011

65. USING CSS3
Fonts
Monday, 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 computer
Monday, 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 systems
Monday, 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.com
Monday, 23 May 2011

72. FONT SQUIRREL
Monday, 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.COM
Monday, 23 May 2011

76. USING CSS3
Monday, 23 May 2011

77. USING CSS3
Backgrounds &
Borders
Monday, 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 element
Monday, 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. backgrounds
Monday, 23 May 2011

82. BORDER-RADIUS
Yes! CSS rounded corners
Monday, 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-radius
Monday, 23 May 2011

85. BOX-SHADOW
drop shadows without images
Monday, 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-shadow
Monday, 23 May 2011

88. BROWSER
SUPPORT
Monday, 23 May 2011

89. CSS3 POLYFILLS
http://css3pie.com/
Monday, 23 May 2011

90. USING CSS3
Monday, 23 May 2011

91. USING CSS3
CSS Media Queries
Monday, 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 height
Monday, 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 Queries
Monday, 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 Queries
Monday, 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.ES
Monday, 23 May 2011

100. RESPONSIVE DESIGN
http://www.alistapart.com/articles/responsive-web-design/
Monday, 23 May 2011

101. MOBILE
BROWSER
SUPPORT
Monday, 23 May 2011

102. YES!
Monday, 23 May 2011

103. YES!
Unless you are targeting Windows Phone 7
Monday, 23 May 2011

104. PROVIDING CSS TO WINDOWS
PHONE 7
http://adactio.com/journal/4494/
Monday, 23 May 2011

105. DESKTOP
BROWSER
SUPPORT
Monday, 23 May 2011

106. MEDIA QUERY SUPPORT
Monday, 23 May 2011

107. MEDIA QUERIES POLYFILLS
http://code.google.com/p/css3-mediaqueries-js/
https://github.com/scottjehl/Respond
Monday, 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