Your SlideShare is downloading. ×
0

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

CSS: a rapidly changing world

5,944

Published on

Extended slides from a recent Sydney Port80 presentation. The slides cover three overall topics: 1) a quick timeline of CSS-related events, 2) key events that changed CSS and 3) a discussion on …

Extended slides from a recent Sydney Port80 presentation. The slides cover three overall topics: 1) a quick timeline of CSS-related events, 2) key events that changed CSS and 3) a discussion on writing better CSS.

Published in: Technology
10 Comments
33 Likes
Statistics
Notes
  • Theres no mention of Netscape and Mozilla in those browser changes list - I would have thought the user base for those browsers were better than Opera 6 in the day. Have Chrome and FireFox gone stupid with version numberings, someone please save me! Was doing some research into browser release dates and two of your slides may be inaccurate. According to the Wiki and Opera - Opera 9 was released in 2006 not 2005, but you seem to have them in both. Safari 4.0 beta was 2008 but Safari 4.0 final was 2009. I know you use nightly browser builds so I was a bit unsure of Safari's year. Otherwise I thoroughly enjoyed watching that slideshow :). Source: http://en.wikipedia.org/wiki/Timeline_of_web_browsers
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Thanks for the show :D Was hoping for more trends but I guess I can't complain here, don't remember any more myself. I like the trends from 2004-2006, 'Dealing with IE, CSS hacks', kept me laughing for a while... I swear its still a trend. Is wired.net the wired.com? Couldn't find specifics through Google.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Thanks for sharing Russ
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hi Chris, yes, this could work. If it were a real site, there may be some other context that could be used instead of wide, medium and narrow.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • The name col-wide and col-narrow are too display-oriented; how about col-major and col-minor instead?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
5,944
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
166
Comments
10
Likes
33
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. CSSa rapidly changing world
  • 2. PART 1:a quicktimeline
  • 3. 2001
  • 4. Browser changes in 2001Internet Explorer 6 - August 2001Opera 6 - December 2001
  • 5. Trends from 2001Using tables for layout, spacer gifs,general hackery
  • 6. 2002
  • 7. Browser changes in 2002Firefox 0.1 - September 2002
  • 8. Highlights from 2002Wired.net launch - February 2002
  • 9. Trends from 2002CSS moves towards “mainstream”
  • 10. 2003
  • 11. Browser changes in 2003Safari 1 - January 2003Opera 7 - January 2003
  • 12. Highlights from 2003ESPN launch - February 2003CSS Zen Garden - May 2003Listamatic - September 2003Sliding doors - October 2003
  • 13. Trends from 2003CSS becoming more mainstream,CSS tutorials everywhere!
  • 14. 2004
  • 15. Browser changes in 2004Firefox 1.0 - November 2004
  • 16. Highlights from 2004Faux columns - January 2004Resolution dependant layouts - Sep 2004
  • 17. Trends from 2004Dealing with IE, CSS hacks
  • 18. 2005
  • 19. Browser changes in 2005Safari 2 - April 2003Opera 8 - April 2005Opera 9 - June 2005
  • 20. Trends from 2005Still dealing with IE, CSS hacks
  • 21. 2006
  • 22. Browser changes in 2006Opera 9 - June 2006Internet Explorer 7 - October 2006Firefox 2.0 - October 2006
  • 23. Trends from 2006Still dealing with IE, CSS hacks
  • 24. 2007
  • 25. Browser changes in 2007Safari 3 - January 2007
  • 26. Highlights from 2007Blueprint - May 2007iPhone launches - June 2007SASS - August 2007
  • 27. Trends from 2007Abstracting CSS - (CSS Frameworks)
  • 28. 2008
  • 29. Browsers changes in 2008Safari 4 - June 2008Firefox 3.0 - June 2008Chrome 0.2 - October 2008Chrome 1.0 - December 2008
  • 30. Trends from 2008Abstracting CSS - (CSS Frameworks)
  • 31. 2009
  • 32. Browser changes in 2009Internet Explorer 8 - March 2009Chrome 2.0 - May 2009Chrome 3.0 - October 2009Opera 10 - September 2009
  • 33. Highlights from 2009OOCSS - Feb 2009LESS - August 2009
  • 34. Trends from 2009CSS3, Web fonts, Polyfills, SASS andLESS
  • 35. 2010
  • 36. Browser changes in 2010Chrome 4.0 - January 2010Chrome 5.0 - May 2010Chrome 6.0 - September 2010Chrome 7.0 - October 2010Chrome 8.0 - December 2010Safari 5 - June 2010Opera 11 - December 2010
  • 37. Highlights from 2010HTML5 Boilerplate - April 2010Responsive Web Design - May 2010
  • 38. Trends from 2010Responsive Web Design, OOCSS
  • 39. 2011
  • 40. Browser changes in 2011Chrome 9.0 - February 2011Chrome 10.0 - February 2011Chrome 11.0 - April 2011Chrome 12.0 - June 2011Chrome 13.0 - August 2011Chrome 14.0 - September 2011Chrome 15.0 - October 2011Chrome 16.0 - December 2011
  • 41. and more...Internet Explorer 9 - March 2011Firefox 4.0 - March 2011Firefox 5.0 - June 2011Firefox 6.0 - August 2011Firefox 7.0 - September 2011Firefox 8.0 - November 2011Firefox 9.0 - November 2011
  • 42. Highlights from 2011SMACSS - September 2011
  • 43. Trends from 2011Mobile first, RWD, OOCSS, SMACSS,SASS, LESS
  • 44. 2012
  • 45. Browser changes in 2012Chrome 17.0 - February 2012Chrome 18.0 - March 2012Chrome 19.0 - May 2012Chrome 20.0 - June 2012Chrome 21.0 - July 2012Chrome 22.0 - September 2012Chrome 23.0 - November 2012
  • 46. and more...Firefox 10.0 - January 2012Firefox 11.0 - March 2012Firefox 12.0 - April 2012Firefox 13.0 - June 2012Firefox 14.0 - June 2012Firefox 15.0 - August 2012Firefox 16.0 - October 2012Firefox 17.0 - November 2012
  • 47. and more...Opera 12 - June 2012Safari 6 - July 2012Internet Explorer 10 - October 2012
  • 48. Trends from 2012Mobile first, RWD, OOCSS, SMACSS,Rethinking CSS
  • 49. PART 2:keyevents
  • 50. Key eventsHere are some of the key events that havehelped to alter the way we build websites.
  • 51. New browsers“As hard as it may be for many people tobelieve, Internet Explorer 6 began theprocess, allowing designers anddevelopers to move to full CSS.” rs = new possibilities New browse
  • 52. Frameworks“A set of tools, libraries, conventions, andbest practices that attempt to abstractroutine tasks into generic modules thatcan be reused.”The beginning of abstractin g CSS
  • 53. CSS3“CSS3 provides us with a wide range ofnew tools such as border-radius,gradients, shadows, web-fonts,animations, transforms, transitions andmore.” cient, more effective More effi
  • 54. Web fonts“Webfonts are a font format that allowsweb designers to use real typographyonline without losing the advantages oflive text — dynamic, searchable, accessiblecontent.” Real fonts in the browser
  • 55. Responsive Web Design“Responsive design is about creatingflexible layouts that can adapt to suit thescreen size and/or orientation of anydevice.” g from fixed to fluid Movin
  • 56. OOCSS“The purpose of OOCSS is to encouragecode reuse and, ultimately, faster andmore efficient stylesheets that are easierto add to and maintain.” Fully abstrac ted CSS
  • 57. SMACSS“SMACSS is more style guide than rigidframework - an attempt to document aconsistent approach to site developmentwhen using CSS.” ture & conventionsDefining architec
  • 58. Preprocessors “Sass is an extension of CSS3, adding nested rules, variables, mixins and selector inheritance.”Writing more efficient & po werful CSS
  • 59. PART 3:writingbetter CSS?
  • 60. a radical change inpractices
  • 61. The old wayCSS used to be about clean HTML -withe the absolute minimum ofclasses. Layouts that used too manyclasses were considered to besuffering from “classitis”.
  • 62. ProblemsWhile the HTML stayed clean, theCSS was often bloated andinefficient.
  • 63. The new wayToday, it is about abstracting layoutsinto reusable modules so that CSS ismore lean and efficient. This meansthat there are more classes inside theHTML.
  • 64. The benefitsWhile the HTML has additionalclasses, the CSS remains very lean.Implementation and modification isquicker and more efficient.
  • 65. setting up yourCSS architecture
  • 66. SMACSSUse SMACSS to set up your overallCSS architecture1. Base2. Layout3. Modules4. States5. Theme
  • 67. setting up yournaming conventions
  • 68. Avoid IDsUse classes rather than IDs forstyling purposes. Classes are moreflexible. Using only classes canreduce cascade issues.#box { }.box { }
  • 69. Use dashesSeparate class names with dashes.box-feature { }.boxFeature { }.box_feature { }
  • 70. Use prefixesUse “pseudo-namespaces” asprefixes - so that related classes caneasily be identified..box-feature { }.box-heading { }.box-body { }.box-content { }
  • 71. MeaningfulClass names should be meaningful,so that other developers canunderstand their purpose..bbdy { }.box-body { }
  • 72. SemanticWhere possible, class names shouldbe semantic rather thanpresentational..box-blue { }.box-alt1 { }
  • 73. look for patterns -overall layout
  • 74. An example layoutLook at the following example layout.Can you see any patterns (aspects ofthe design that can be defined into asingle concept and then reused)?
  • 75. Layout patternsThere are some patterns that can beused to define the overall layout,such as:wide columnnarrow columnmedium column
  • 76. wide column narrow columnmedium column medium column
  • 77. wide narrownarrow wide medium medium
  • 78. Layout rules.col-wide,.col-medium,.col-narrow{! float: left;! margin-right: 10%;}
  • 79. Layout rules (continued).col-wide { width: 60%; }.col-medium { width: 45%; }.col-narrow { width: 30%; }.col-last { margin-right: 0; }
  • 80. look for patterns -rows
  • 81. RowsThere are six distinct rows. Theserows can used to clear other pagecomponents above and below.
  • 82. rowrowrowrowrowrow
  • 83. Row module.row{! clear: both;! overflow: hidden;! zoom: 1;! _overflow: visible;}
  • 84. Row module extendsTwo of these rows have additionalcharacteristics - they have paddingand background-color. These tworows can be defined as “extends” -extending the initial module
  • 85. blue rowpink row
  • 86. Row module extends.row-alt1,.row-alt2 {! padding: 1em; }.row-alt1 {! background: #bfe6ee; }.row-alt2 {! background: #edc9e0; }
  • 87. look for patterns -boxes
  • 88. BoxesThere are seven boxes with similarcharacteristics. These could beconverted into one overall module.
  • 89. box box box box box box box
  • 90. Box module.box{! overflow: hidden;! zoom: 1;! _overflow: visible;! margin-bottom: 1em;}
  • 91. Box module extendsTwo of these boxes have additionalcharacteristics - they have paddingand background-color. These tworows can be defined as “extends” -extending the initial module
  • 92. yellow boxgreen box
  • 93. Box module extends.box-alt1,.box-alt2 {! padding: 1em; }.box-alt1 {! background: #fbf49b; }.box-alt2 {! background: #bfe6ee; }
  • 94. creating a highlyflexible box module
  • 95. FlexibleWe need to be able to target- the overall box- an image/object (aligned left or right)- the body content within the box- a possible heading (could be h1-h6)- possibly even the contents itself
  • 96. box box-feature box-body box-heading box-content
  • 97. The classes.box { }.box-feature { }.box-feature-right { }.box-body { }.box-heading { }.box-content { }
  • 98. Problem 1: widthHow do we make this box modulework, even when the widths vary?
  • 99. wide box narrow box narrow box medium box medium box medium box medium box
  • 100. Solution 1:The box module has to spread to fitthe width of any parent container, soit must not be given it’s own width.
  • 101. Box.box{! overflow: hidden;! zoom: 1;! _overflow: visible;! margin-bottom: 1em;}
  • 102. Problem 2: placementThe box must work when placedanywhere within the layout.
  • 103. Solution 2:The box module must be “locationagnostic”. The box should not bedefined based on it’s location.aside .box { }.box { }
  • 104. Problem 3: alignmentDid you notice that the images couldsit at the left or right?
  • 105. left aligned left aligned right alignedleft aligned left alignedleft aligned left aligned
  • 106. Solution 3:The image/object must be able to bemodified to float left or right.
  • 107. Box feature.box-feature{! float: left;! margin-right: .5em;}
  • 108. Box feature right.box-feature-alt{! float: right;! margin-left: .5em;}
  • 109. Problem 4: imagesThe box may contain images orobjects that have varying widths.
  • 110. large image small image small imagemedium image medium imagemedium image medium image
  • 111. Solution 3:This can be solved using the “box-body” class. This class will wraparound the contents of the box andforce it to sit beside the featureimage or object, no matter how widethis image or object is.
  • 112. box-body
  • 113. Box body.box-body{! overflow: hidden;! zoom: 1;! _overflow: visible;}
  • 114. Why use “overflow”?Using overflow: hidden is onemethod that will trigger the blockformatting context, which allows abox to sit beside a floated object,without sliding under it or wrappingaround it.
  • 115. overflow: hidden forces the “box-body” class to sit besidea floated object, no matter how wide.
  • 116. changing modules
  • 117. Modules and extendsWe now have some base modulesand “extends”..row { }.row-alt1 { }.row-alt2 { }.box { }.box-alt1 { }.box-alt2 { }
  • 118. Change?These base module may be usednumerous times within a layout. Whathappens if you want to change abase module to help in someinstances?
  • 119. Rule 1: keep it simpleThe base module should be definedas simply as possible. This meansthat they are highly flexible.
  • 120. Rule 2: extend vs modifyBase modules can be extended (withadditional “extend “classes), butshould never be modified.
  • 121. A new “extend”If a based module needs to bemodified to suit a specific case, it isprobably better to create a newmodule.
  • 122. some tips whenwriting CSS
  • 123. Avoid repetitionAvoid redefining elements throughoutyour style sheets. How many timesdo you need to define headings orfont-sizes?h2 { }.intro h2 { }h2 { }
  • 124. Avoid deep selectorsAvoid deep selectors as these makethe cascade unnecessarily complex.#content #nav ul li a { }
  • 125. Avoid qualified selectorsAvoid qualified selectors as these areunnecessary.div.intro {}
  • 126. Avoid !importantWhile !important may have it’s uses, itshould not be used “reactively” (such ashelping to solve cascade issues)..box { margin: 0 !important; }
  • 127. Avoid undoing stylesIf your CSS is written correctly, youshould never have to undo previousrules..box { float: left; }.box-feature { float: none; }
  • 128. Russ WeakleyMax DesignSite: maxdesign.com.auTwitter: twitter.com/russmaxdesignSlideshare: slideshare.net/maxdesignLinkedin: linkedin.com/in/russweakley

×