CSS3 - is everything we used to do wrong?

1. CSS3 - is everything we used to do wrong ?

2. re living in we a times exciting

3. better browsers

4. IE 9 Safari 5 Opera 11 Chrome 11 Firefox 5 IE 10

7. Opera 11: Best HTML5 forms support

8. <input type="color"> <input type="date"> <input type="number"> <input type="range">

9. Opera 11: Best CSS3 backgrounds support

10. p { background-repeat: space; } p { background-repeat: round; } div { background-origin: padding-box; } div { background-clip: padding-box; } div { background-size: cover; } div { background-size: contain;}

11. p { background-position: left 10px top 15px; }

13. Chrome 11: Slightly ahead of Safari 5

14. background-image: Safari 5 -webkit-gradient(linear, left center, right center, from(yellow), to(black));

15. background-image: Safari 5 -webkit-gradient(linear, left center, right center, from(yellow), to(black)); background-image: Chrome 11 -webkit-linear-gradient (left, yellow, black);

17. 21 June 2011??

19. Preview released: 11 April 2011

20. Release: early 2012?

21. are w ork ing w ith If you s h o u ld b e p a y in g CS S3, you ion to th e latest attent n ightly builds?

22. http://nightly.webkit.org/

23. http://nightly.mozilla.org/

24. http://tools.google.com/dlpage/chromesxs

25. http://www.opera.com/browser/download/

26. cool CS S 3 stuff

27. Transforms & transitions Linear & radial gradients CSS3 selectors Border-radius Box-shadow Text-shadow @font-face And more!

35. Befo re w e ge t too exc ited … few th ings to her e are a mind ep in ke

36. use CSS3 fo r the right re asons

37. W hile C S S 3 is exciting, w e h a ve to b e c a re fu l about how an d when we us e it.

38. r th a t s im p ly u s e R a th e because its c o o l, CSS3 u ld b e lo o k in g a t we sho ess rea s o n s fo r busin i m p le m e n tin g it.

39. Web fonts Less images Improved UX Device targeting Faster page speeds Efﬁcient site building Ease of maintenance

40. @font-face { font-family: 'fontName'; src: url('font.eot?') format('eot' url('font.woff') format('woff'), url('font.ttf') format('truetype'); }

43. section:target { background: lime; } #section1:target { background: lightgreen; } ::selection { color: #fff; background: #000; }

45. @media all and (max-device-width: 480px) { } @media all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) { }

50. be aware of potential issues

51. Browser support Vendor extensions Changing syntax Unstable Structural

54. Vendor-specific property div { -webkit-border-radius: 10px; }

55. Vendor-specific value div { background-image: -moz-linear-gradient (left, yellow, black); }

56. Vendor-specific property & value div { -webkit-transition: -webkit-transform 1s; }

57. Different vendor extensions div { -o-border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }

59. background-image: -webkit-gradient(linear, left center, right center, from(yellow), to(black)); background-image: -moz-linear-gradient (left, yellow, black);

60. Browser support Vendor extensions Changing syntax Unstable Structural selectors

61. :last-child { } :only-child { } :first-of-type { } :last-of-type { } :only-of-type { } :empty { } :nth-child(n) { } :nth-last-child(n) { } :nth-of-type(n) { } :nth-last-of-type(n) { }

62. rtin g a n y p ro je c t, B e fo re s ta d to k n o w w h ic h you n e e ers and devices brows o be sup ported need t

63. This will help y ou determine progressive e if nhancement o other solution r s are needed f o r y ou r p roj e ct

64. learn the ba sics f irst

65. ig n e rs ju m p in to M any des out k n o w ing the C S S 3 w ith b asics of CSS2.1

66. M a n y a s p e c ts of CSS3 build on top of CSS2.1

67. 22 CSS2.1 selectors

68. 36 CSS3 selectors

69. Older IE issues like haslayout The block formatting context Complex CSS2.1 selector Initial values & shorthand The various box-models Inheritance & cascade Float basics

73. p { background: [background-image] [background-position] [/ background-size] [background-repeat] [background-attachment] [background-origin] [background-clip] [background-color]; }

75. E:lang(c) E:first-child E:first-line E:first-letter E:before E:after E[att] E[att=val] E[att~=val] E[att|=val]

77. .intro { overflow: hidden; } .intro { float: left; } .intro { display: inline-block; }

79. .intro { position: relative; } .intro { zoom: 1; }

80. fo c us on the bigge r issues

81. ality is th at CSS3 The re ne aspe ct of the is j u s t o de veloper toolkit

82. W e should be exploring how we can m ake our desig and developm n ent practices m ore e fficie nt & flexible

83. how do we b ecom more e efficie nt more flex ible

84. more efficien t CS S

85. CSS resets

86. CSS resets ai m to remove a browser-spec ll iﬁc styles, and build CSS up then again from sc so that each e ratch - lement will ap the same in pear all browsers

87. html,body,div,span,applet,object,iframe,h1,h2, h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym, address,big,cite,code,del,dfn,em,img,ins,kbd,q, s,samp,small,strike,strong,sub,sup,tt,var,b,u, i,center,dl,dt,dd,ol,ul,li,fieldset,form,label, legend,table,caption,tbody,tfoot,thead,tr,th, td,article,aside,canvas,details,embed,figure, figcaption,footer,header,hgroup,menu,nav, output,ruby,section,summary,time,mark,audio, video { margin:0; padding:0; border:0; font-size:100%; font: inherit; vertical-align: baseline; }

88. Strengths: Efﬁcient development

89. Strengths: Efﬁcient development

90. Strengths: Efﬁcient development Consistency for teams

91. Strengths: Efﬁcient development Consistency for teams Weaknesses: Applied without thought lots of additional rewriting

92. Strengths: Efﬁcient development Consistency for teams Weaknesses: lots of additional rewriting

93. CSS frameworks

94. CSS framewo rks are pre-pr libraries that a epared re meant to al easier, stand low for ards-compli styling of web ant pages.

95. rameworks focus on Many f velopers lay out grids, allowing de ll in library classes to to pu ld comple x layouts bui

96. .column, .span-1, .span-2, .span- 3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span- 10, .span-11, .span-12, .span-13, .span-14, .span-15, .span-16, .span-17, .span-18, .span-19, .span-20, .span-21, .span-22, .span-23, .span-24 {float:left;margin-right:10px;}

97. Strength Efﬁcient development Lean,

98. Strength Efﬁcient development Lean,

99. Strength Efﬁcient development Lean, abstracted CSS

100. Strength Efﬁcient development Lean, abstracted CSS Weaknesses Designs that don’t ﬁt Bloated frameworks Presentational class names

104. Keep in mind you can alway roll you r ow s n fram e w ork

105. smarter CSS

106. Object-oriented CSS

107. Object-oriente d CSS styles “objects” or “m HTML odules” with cleaner, mor e efficient C SS

108. For all the har dcore develop yes, it’s not re ers… ally object-orie It’s just a na nted. me!

109. How many times does your CSS file mention H2 or “float: left”?

110. Do you ever find yourself styling using Firebug?

111. There is a stro ng chance tha you may be “d t oing it wrong” or could at lea , st be “doing it bet ter”

112. How?

113. e starting your CSS, Befor k at your layouts and loo try to find patterns

114. Are there asp ects of the layout that co uld be abstracted i nto library it ems?

115. Strengths lean, robust CSS

116. Strengths lean, robust CSS

117. Strengths lean, robust CSS easier site maintenance

118. Strengths lean, robust CSS easier site maintenance avoid repetitive CSS

119. Strengths lean, robust CSS easier site maintenance avoid repetitive CSS avoid speciﬁcity wars

120. Strengths lean, robust CSS easier site maintenance avoid repetitive CSS avoid speciﬁcity wars Weaknesses additional HTML classes new mindset

123. more powerf ul development

124. Pre-processors

125. Pre-processo rs allow us to variables in use CSS files and parse them to then regular stylesh eets.

126. LESS SASS Turbine Switch CSS DtCSS CSS Crush

127. Variables

128. @color1: red; @color2: green; @color3: blue; @color4: orange; @color5: brown; #a { background: @color1; }

129. Minification

130. div{width:200px;height:200px;- webkit-border-radius:10px;- moz-border-radius:10px;border- radius:10px;} #one{background:red;-webkit- border-radius:20px;-moz- border-radius:20px;border- radius:20px;}#one a{color:green;} #two{background:green;-webkit- border-radius:30px;-moz-

131. Mixins

132. .border-radius(@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } div { .border-radius(); }

133. Packing Gzipping Compiling

134. Strength

135. Strength faster development

136. Strength faster development variables!

137. Strength faster development variables! Weaknesses

138. Strength faster development variables! Weaknesses deep nesting

139. #nav { background: @color1; li { list-style: none a { color: green; } } }

140. Strength faster development variables! Weaknesses deep nesting inefﬁcient CSS

141. Strength faster development variables! Weaknesses deep nesting inefﬁcient CSS entirely new syntax

142. more respon sive d es ign

143. What is Responsive design?

144. Until recently, people built si for desktop tes and/or mobi le only

145. Responsive design is ut creating sites that abo ad apt to an y device

146. Problem 1: solving screen size

147. Ideally, we wa nt to start with single linear la a yout that can viewed by a be ny device

148. we gradua lly build a Then ries of adva nced ﬂuid se n top, con trolled by layouts o aScript m edia que ries or Jav

149. @media only screen and (min-width: 800px) and (max-width: 999px) { } @media only screen and (min-width: 1000px) { }

150. This means w e can deliver entirely differe nt layouts based on the viewport

151. Problem 2: solving bandwidth issues

152. But what abo ut images and other media?

153. lly, we sho uld deliver Idea images and media low end as the default

154. Then we deliv er larger, riche for those dev r media ices that can (or at least tho cope se devices wit suitable band h the width)

155. Problem 3: content and context

156. Another probl em we face is determining w hat types of content shoul d be delivered devices, and i to n what contex people are u t are sing the site

157. simple as delivering It is not as ed back c ontent for stripp mobile d evices and ntent for desktops rich co

158. The reality is t hat these last problems are two not solved yet But a chang . e is coming

159. re at a tipp ing point. I think we a going to y soon, a m ajor site is Ver lems and c rack these three prob way we b uild sites ch ange the

160. wrap up

161. hell am I what the So, ng? sayi

162. be aware of th e potential iss ues

163. learn the b asics fore divin g in be

164. focus on the bigger issue s

165. W rite e fficie ntly

166. D esign responsively

167. thank you Russ Weakley @russmaxdesign www.maxdesign.com.au

CSS3 - is everything we used to do wrong?

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to CSS3 - is everything we used to do wrong?

Similar to CSS3 - is everything we used to do wrong? (20)

More from Russ Weakley

More from Russ Weakley (20)

Recently uploaded

Recently uploaded (20)

CSS3 - is everything we used to do wrong?