CSS3 - is everything we used to do wrong?

33,285 views

Published on

This presentation from Remix 2011 explores CSS3, why we should use it and some of the issues. It also explores the bigger picture. Css resets, frameworks, Object oriented CSS, pre-processors, and responsive web design.

Published in: Education
6 Comments
64 Likes
Statistics
Notes
No Downloads
Views
Total views
33,285
On SlideShare
0
From Embeds
0
Number of Embeds
2,304
Actions
Shares
0
Downloads
0
Comments
6
Likes
64
Embeds 0
No embeds

No notes for slide

CSS3 - is everything we used to do wrong?

  1. CSS3 - is everythingwe used to do wrong ?
  2. re living inwe a timesexciting
  3. better browsers
  4. IE 9 Safari 5 Opera 11Chrome 11 Firefox 5 IE 10
  5. IE 9 Safari 5 Opera 11Chrome 11 Firefox 5 IE 10
  6. IE 9 Safari 5 Opera 11Chrome 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 CSS3backgrounds 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;}
  12. IE 9 Safari 5 Opera 11Chrome 11 Firefox 5 IE 10
  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);
  16. IE 9 Safari 5 Opera 11Chrome 11 Firefox 5 IE 10
  17. 21 June 2011??
  18. IE 9 Safari 5 Opera 11Chrome 11 Firefox 5 IE 10
  19. Preview released: 11 April 2011
  20. Release:early 2012?
  21. are w ork ing w ithIf 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 & transitionsLinear & radial gradientsCSS3 selectorsBorder-radiusBox-shadowText-shadow@font-faceAnd more!
  28. Transforms & transitionsLinear & radial gradientsCSS3 selectorsBorder-radiusBox-shadowText-shadow@font-faceAnd more!
  29. Transforms & transitionsLinear & radial gradientsCSS3 selectorsBorder-radiusBox-shadowText-shadow@font-faceAnd more!
  30. Transforms & transitionsLinear & radial gradientsCSS3 selectorsBorder-radiusBox-shadowText-shadow@font-faceAnd more!
  31. Transforms & transitionsLinear & radial gradientsCSS3 selectorsBorder-radiusBox-shadowText-shadow@font-faceAnd more!
  32. Transforms & transitionsLinear & radial gradientsCSS3 selectorsBorder-radiusBox-shadowText-shadow@font-faceAnd more!
  33. Transforms & transitionsLinear & radial gradientsCSS3 selectorsBorder-radiusBox-shadowText-shadow@font-faceAnd more!
  34. Transforms & transitionsLinear & radial gradientsCSS3 selectorsBorder-radiusBox-shadowText-shadow@font-faceAnd more!
  35. Befo re w e ge t too exc ited … few th ings toher 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 labout how an dwhen we us e it.
  38. r th a t s im p ly u s eR a th e because its c o o l,CSS3 u ld b e lo o k in g a twe 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 speedsEfficient site buildingEase of maintenance
  40. @font-face{font-family: fontName;src:url(font.eot?) format(eoturl(font.woff) format(woff),url(font.ttf) format(truetype);}
  41. Web fonts Less images Improved UX Device targeting Faster page speedsEfficient site buildingEase of maintenance
  42. Web fonts Less images Improved UX Device targeting Faster page speedsEfficient site buildingEase of maintenance
  43. section:target{ background: lime; }#section1:target{ background: lightgreen; }::selection{ color: #fff; background: #000;}
  44. Web fonts Less images Improved UX Device targeting Faster page speedsEfficient site buildingEase of maintenance
  45. @media all and(max-device-width: 480px){}@media all and(min-device-width: 481px) and(max-device-width: 1024px) and(orientation:portrait){}
  46. Web fonts Less images Improved UX Device targeting Faster page speedsEfficient site buildingEase of maintenance
  47. Web fonts Less images Improved UX Device targeting Faster page speedsEfficient site buildingEase of maintenance
  48. Web fonts Less images Improved UX Device targeting Faster page speedsEfficient site buildingEase of maintenance
  49. be aware of potential issues
  50. Browser supportVendor extensionsChanging syntaxUnstable Structural
  51. Browser supportVendor extensionsChanging syntaxUnstable Structural
  52. Vendor-specific propertydiv{-webkit-border-radius: 10px;}
  53. Vendor-specific valuediv{background-image:-moz-linear-gradient(left, yellow, black);}
  54. Vendor-specific property & valuediv{-webkit-transition:-webkit-transform 1s;}
  55. Different vendor extensionsdiv{-o-border-radius: 10px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;}
  56. Browser supportVendor extensionsChanging syntaxUnstable Structural
  57. background-image:-webkit-gradient(linear,left center, right center,from(yellow), to(black));background-image:-moz-linear-gradient(left, yellow, black);
  58. Browser supportVendor extensionsChanging syntaxUnstable Structural selectors
  59. :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) { }
  60. 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 hyou n e e ers and devicesbrows o be sup ported need t
  61. This will help y ou determine progressive e if nhancement oother solution r s are neededf o r y ou r p roj e ct
  62. learn the ba sics f irst
  63. ig n e rs ju m p in toM any des out k n o w ing theC S S 3 w ithb asics of CSS2.1
  64. M a n y a s p e c ts of CSS3build on top of CSS2.1
  65. 22CSS2.1 selectors
  66. 36CSS3 selectors
  67. Older IE issues like haslayoutThe block formatting context Complex CSS2.1 selector Initial values & shorthand The various box-models Inheritance & cascade Float basics
  68. Older IE issues like haslayoutThe block formatting context Complex CSS2.1 selector Initial values & shorthand The various box-models Inheritance & cascade Float basics
  69. Older IE issues like haslayoutThe block formatting context Complex CSS2.1 selector Initial values & shorthand The various box-models Inheritance & cascade Float basics
  70. Older IE issues like haslayoutThe block formatting context Complex CSS2.1 selector Initial values & shorthand The various box-models Inheritance & cascade Float basics
  71. p {background: [background-image] [background-position] [/ background-size] [background-repeat] [background-attachment] [background-origin] [background-clip] [background-color];}
  72. Older IE issues like haslayoutThe block formatting context Complex CSS2.1 selector Initial values & shorthand The various box-models Inheritance & cascade Float basics
  73. E:lang(c)E:first-childE:first-lineE:first-letterE:beforeE:afterE[att]E[att=val]E[att~=val]E[att|=val]
  74. Older IE issues like haslayoutThe block formatting context Complex CSS2.1 selector Initial values & shorthand The various box-models Inheritance & cascade Float basics
  75. .intro{ overflow: hidden; }.intro{ float: left; }.intro{ display: inline-block; }
  76. Older IE issues like haslayoutThe block formatting context Complex CSS2.1 selector Initial values & shorthand The various box-models Inheritance & cascade Float basics
  77. .intro{ position: relative; }.intro{ zoom: 1; }
  78. fo c uson the bigge r issues
  79. ality is th at CSS3The re ne aspe ct of theis j u s t o de veloper toolkit
  80. W e should be exploringhow we can m ake our desigand developm n ent practicesm ore e fficie nt & flexible
  81. how do we b ecommore e efficie ntmore flex ible
  82. more efficien t CS S
  83. CSS resets
  84. CSS resets ai m to remove a browser-spec ll ific styles, and build CSS up then again from scso that each e ratch - lement will apthe same in pear all browsers
  85. 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;}
  86. Strengths:Efficient development
  87. Strengths:Efficient development
  88. Strengths:Efficient developmentConsistency for teams
  89. Strengths:Efficient developmentConsistency for teamsWeaknesses:Applied without thoughtlots of additional rewriting
  90. Strengths:Efficient developmentConsistency for teamsWeaknesses:lots of additional rewriting
  91. CSS frameworks
  92. CSS framewo rks are pre-prlibraries that a epared re meant to aleasier, stand low for ards-complistyling of web ant pages.
  93. rameworks focus onMany f veloperslay out grids, allowing de ll in library classes to to pu ld comple x layouts bui
  94. .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;}
  95. StrengthEfficient development Lean,
  96. StrengthEfficient development Lean,
  97. Strength Efficient developmentLean, abstracted CSS
  98. Strength Efficient development Lean, abstracted CSS Weaknesses Designs that don’t fit Bloated frameworksPresentational class names
  99. Strength Efficient development Lean, abstracted CSS Weaknesses Designs that don’t fit Bloated frameworksPresentational class names
  100. Strength Efficient development Lean, abstracted CSS Weaknesses Designs that don’t fit Bloated frameworksPresentational class names
  101. Strength Efficient development Lean, abstracted CSS Weaknesses Designs that don’t fit Bloated frameworksPresentational class names
  102. Keep in mind you can alwayroll you r ow s n fram e w ork
  103. smarter CSS
  104. Object-oriented CSS
  105. Object-oriente d CSS styles“objects” or “m HTML odules” withcleaner, mor e efficient C SS
  106. For all the har dcore developyes, it’s not re ers… ally object-orieIt’s just a na nted. me!
  107. How many timesdoes your CSS file mention H2 or “float: left”?
  108. Do you ever findyourself stylingusing Firebug?
  109. 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”
  110. How?
  111. e starting your CSS,Befor k at your layouts andloo try to find patterns
  112. Are there asp ects of thelayout that co uld beabstracted i nto library it ems?
  113. Strengthslean, robust CSS
  114. Strengthslean, robust CSS
  115. Strengthslean, robust CSSeasier site maintenance
  116. Strengthslean, robust CSSeasier site maintenanceavoid repetitive CSS
  117. Strengthslean, robust CSSeasier site maintenanceavoid repetitive CSSavoid specificity wars
  118. Strengthslean, robust CSSeasier site maintenanceavoid repetitive CSSavoid specificity warsWeaknessesadditional HTML classesnew mindset
  119. Strengthslean, robust CSSeasier site maintenanceavoid repetitive CSSavoid specificity warsWeaknessesadditional HTML classesnew mindset
  120. Strengthslean, robust CSSeasier site maintenanceavoid repetitive CSSavoid specificity warsWeaknessesadditional HTML classesnew mindset
  121. more powerf uldevelopment
  122. Pre-processors
  123. Pre-processo rs allow us tovariables in use CSS files andparse them to then regular stylesh eets.
  124. LESS SASS TurbineSwitch CSS DtCSSCSS Crush
  125. Variables
  126. @color1: red;@color2: green;@color3: blue;@color4: orange;@color5: brown;#a { background: @color1; }
  127. Minification
  128. 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;}#onea{color:green;}#two{background:green;-webkit-border-radius:30px;-moz-
  129. Mixins
  130. .border-radius(@radius: 5px){-webkit-border-radius: @radius;-moz-border-radius: @radius;border-radius: @radius;}div { .border-radius(); }
  131. PackingGzippingCompiling
  132. Strength
  133. Strengthfaster development
  134. Strengthfaster developmentvariables!
  135. Strengthfaster developmentvariables!Weaknesses
  136. Strengthfaster developmentvariables!Weaknessesdeep nesting
  137. #nav{ background: @color1; li { list-style: none a { color: green; } }}
  138. Strengthfaster developmentvariables!Weaknessesdeep nestinginefficient CSS
  139. Strengthfaster developmentvariables!Weaknessesdeep nestinginefficient CSSentirely new syntax
  140. more respon sive d es ign
  141. What isResponsive design?
  142. Until recently, people built sifor desktop tes and/or mobi le only
  143. Responsive design is ut creating sites thataboad apt to an y device
  144. Problem 1:solving screen size
  145. Ideally, we wa nt to start withsingle linear la a yout that canviewed by a be ny device
  146. we gradua lly build aThen ries of adva nced fluidse n top, con trolled bylayouts o aScript m edia que ries or Jav
  147. @media only screen and(min-width: 800px) and(max-width: 999px){}@media only screen and(min-width: 1000px){}
  148. This means w e can deliverentirely differe nt layoutsbased on the viewport
  149. Problem 2:solving bandwidth issues
  150. But what abo utimages and other media?
  151. lly, we sho uld deliverIdea images and medialow end as the default
  152. Then we deliv er larger, richefor those dev r media ices that can(or at least tho cope se devices witsuitable band h the width)
  153. Problem 3:content and context
  154. Another probl em we face is determining w hat types ofcontent shoul d be delivereddevices, and i to n what contexpeople are u t are sing the site
  155. simple as deliveringIt is not as ed back c ontent for stripp mobile d evices and ntent for desktops rich co
  156. The reality is t hat these lastproblems are two not solved yetBut a chang . e is coming
  157. 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
  158. wrap up
  159. hell am I what theSo, ng? sayi
  160. be aware of th epotential iss ues
  161. learn the b asics fore divin g in be
  162. focus on thebigger issue s
  163. W rite e fficie ntly
  164. D esign responsively
  165. thank you Russ Weakley @russmaxdesign www.maxdesign.com.au

×