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.
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
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
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
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
and more...Opera 12 - June 2012Safari 6 - July 2012Internet Explorer 10 - October 2012
Trends from 2012Mobile ﬁrst, RWD, OOCSS, SMACSS,Rethinking CSS
Key eventsHere are some of the key events that havehelped to alter the way we build websites.
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
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
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
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
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
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
SMACSS“SMACSS is more style guide than rigidframework - an attempt to document aconsistent approach to site developmentwhen using CSS.” ture & conventionsDefining architec
Preprocessors “Sass is an extension of CSS3, adding nested rules, variables, mixins and selector inheritance.”Writing more efficient & po werful CSS
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
Problem 4: imagesThe box may contain images orobjects that have varying widths.
large image small image small imagemedium image medium imagemedium image medium image
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.