evolution of css layout -...
TRANSCRIPT
![Page 1: Evolution of CSS Layout - fantasaifantasai.inkedblade.net/weblog/2012/css-layout-evolution/slides.pdf · Browser Wars II: Phoenix Rising early 2010s HTML5 + CSS3 take off Browser](https://reader033.vdocuments.mx/reader033/viewer/2022051721/5a8147337f8b9ada388cf23f/html5/thumbnails/1.jpg)
Evolution of CSS LayoutThrough CSS3 and Beyond
![Page 2: Evolution of CSS Layout - fantasaifantasai.inkedblade.net/weblog/2012/css-layout-evolution/slides.pdf · Browser Wars II: Phoenix Rising early 2010s HTML5 + CSS3 take off Browser](https://reader033.vdocuments.mx/reader033/viewer/2022051721/5a8147337f8b9ada388cf23f/html5/thumbnails/2.jpg)
Hi! I’m Elika J. EtemadElika J. EtemadElika J. EtemadElika J. Etemad, otherwise known as
fantasaifantasaifantasaifantasai
I work on the CSSCSSCSSCSS standards at W3CW3CW3CW3C.
![Page 3: Evolution of CSS Layout - fantasaifantasai.inkedblade.net/weblog/2012/css-layout-evolution/slides.pdf · Browser Wars II: Phoenix Rising early 2010s HTML5 + CSS3 take off Browser](https://reader033.vdocuments.mx/reader033/viewer/2022051721/5a8147337f8b9ada388cf23f/html5/thumbnails/3.jpg)
![Page 4: Evolution of CSS Layout - fantasaifantasai.inkedblade.net/weblog/2012/css-layout-evolution/slides.pdf · Browser Wars II: Phoenix Rising early 2010s HTML5 + CSS3 take off Browser](https://reader033.vdocuments.mx/reader033/viewer/2022051721/5a8147337f8b9ada388cf23f/html5/thumbnails/4.jpg)
Geocities Retro CSS Spec
![Page 5: Evolution of CSS Layout - fantasaifantasai.inkedblade.net/weblog/2012/css-layout-evolution/slides.pdf · Browser Wars II: Phoenix Rising early 2010s HTML5 + CSS3 take off Browser](https://reader033.vdocuments.mx/reader033/viewer/2022051721/5a8147337f8b9ada388cf23f/html5/thumbnails/5.jpg)
<FONT face=Arial color=#0000FF size=6>
<BR>
<CENTER>
<H1>Big Font<H1>
<TABLE width=200 height=300 border=5
bordercolor=navy bgcolor=lightblue>
<TD background=clouds.jpg>
<IMG src=spacer.gif width=4 height=20>
<IMG align=left border=2>
<BR clear=left>
![Page 6: Evolution of CSS Layout - fantasaifantasai.inkedblade.net/weblog/2012/css-layout-evolution/slides.pdf · Browser Wars II: Phoenix Rising early 2010s HTML5 + CSS3 take off Browser](https://reader033.vdocuments.mx/reader033/viewer/2022051721/5a8147337f8b9ada388cf23f/html5/thumbnails/6.jpg)
CSS Level 1CSS Level 1CSS Level 1CSS Level 1
width & height
float & clear
margins & padding
backgrounds & borders
fonts
list styles
alignment & white-space
![Page 7: Evolution of CSS Layout - fantasaifantasai.inkedblade.net/weblog/2012/css-layout-evolution/slides.pdf · Browser Wars II: Phoenix Rising early 2010s HTML5 + CSS3 take off Browser](https://reader033.vdocuments.mx/reader033/viewer/2022051721/5a8147337f8b9ada388cf23f/html5/thumbnails/7.jpg)
CSS Level 2CSS Level 2CSS Level 2CSS Level 2
.sidebar, .main { display: table-cell; }
![Page 8: Evolution of CSS Layout - fantasaifantasai.inkedblade.net/weblog/2012/css-layout-evolution/slides.pdf · Browser Wars II: Phoenix Rising early 2010s HTML5 + CSS3 take off Browser](https://reader033.vdocuments.mx/reader033/viewer/2022051721/5a8147337f8b9ada388cf23f/html5/thumbnails/8.jpg)
CSS Level 2CSS Level 2CSS Level 2CSS Level 2
float: left
.clearfix
position: absolute
![Page 9: Evolution of CSS Layout - fantasaifantasai.inkedblade.net/weblog/2012/css-layout-evolution/slides.pdf · Browser Wars II: Phoenix Rising early 2010s HTML5 + CSS3 take off Browser](https://reader033.vdocuments.mx/reader033/viewer/2022051721/5a8147337f8b9ada388cf23f/html5/thumbnails/9.jpg)
Browser Wars II: Phoenix Rising
HTML5 + CSS3 take offearly 2010searly 2010searly 2010searly 2010s
Browser Wars III: Mobile Edition
Have interop, will build features.late 2000slate 2000slate 2000slate 2000s
Balance of Powers
Quest for Interoperabilitymid 2000smid 2000smid 2000smid 2000s
Web Standards Campaign FTWearly 2000searly 2000searly 2000searly 2000s
IE6 Monopoly
CSS1 catches onlate 1990slate 1990slate 1990slate 1990s
HTML for formattingmid 1990smid 1990smid 1990smid 1990s
Browser Wars I: Netscape vs. MicrosoftCSS2.1 Era
![Page 10: Evolution of CSS Layout - fantasaifantasai.inkedblade.net/weblog/2012/css-layout-evolution/slides.pdf · Browser Wars II: Phoenix Rising early 2010s HTML5 + CSS3 take off Browser](https://reader033.vdocuments.mx/reader033/viewer/2022051721/5a8147337f8b9ada388cf23f/html5/thumbnails/10.jpg)
CSS Level 3CSS Level 3CSS Level 3CSS Level 3
Processing Power
Decoration
Typography & Internationalization
Layout
![Page 11: Evolution of CSS Layout - fantasaifantasai.inkedblade.net/weblog/2012/css-layout-evolution/slides.pdf · Browser Wars II: Phoenix Rising early 2010s HTML5 + CSS3 take off Browser](https://reader033.vdocuments.mx/reader033/viewer/2022051721/5a8147337f8b9ada388cf23f/html5/thumbnails/11.jpg)
Layout for the Web
![Page 12: Evolution of CSS Layout - fantasaifantasai.inkedblade.net/weblog/2012/css-layout-evolution/slides.pdf · Browser Wars II: Phoenix Rising early 2010s HTML5 + CSS3 take off Browser](https://reader033.vdocuments.mx/reader033/viewer/2022051721/5a8147337f8b9ada388cf23f/html5/thumbnails/12.jpg)
Web vs. Print
![Page 13: Evolution of CSS Layout - fantasaifantasai.inkedblade.net/weblog/2012/css-layout-evolution/slides.pdf · Browser Wars II: Phoenix Rising early 2010s HTML5 + CSS3 take off Browser](https://reader033.vdocuments.mx/reader033/viewer/2022051721/5a8147337f8b9ada388cf23f/html5/thumbnails/13.jpg)
CSS3 LayoutPrinciples of Design
![Page 14: Evolution of CSS Layout - fantasaifantasai.inkedblade.net/weblog/2012/css-layout-evolution/slides.pdf · Browser Wars II: Phoenix Rising early 2010s HTML5 + CSS3 take off Browser](https://reader033.vdocuments.mx/reader033/viewer/2022051721/5a8147337f8b9ada388cf23f/html5/thumbnails/14.jpg)
Flexible
![Page 15: Evolution of CSS Layout - fantasaifantasai.inkedblade.net/weblog/2012/css-layout-evolution/slides.pdf · Browser Wars II: Phoenix Rising early 2010s HTML5 + CSS3 take off Browser](https://reader033.vdocuments.mx/reader033/viewer/2022051721/5a8147337f8b9ada388cf23f/html5/thumbnails/15.jpg)
Powerful
![Page 16: Evolution of CSS Layout - fantasaifantasai.inkedblade.net/weblog/2012/css-layout-evolution/slides.pdf · Browser Wars II: Phoenix Rising early 2010s HTML5 + CSS3 take off Browser](https://reader033.vdocuments.mx/reader033/viewer/2022051721/5a8147337f8b9ada388cf23f/html5/thumbnails/16.jpg)
Robust
![Page 17: Evolution of CSS Layout - fantasaifantasai.inkedblade.net/weblog/2012/css-layout-evolution/slides.pdf · Browser Wars II: Phoenix Rising early 2010s HTML5 + CSS3 take off Browser](https://reader033.vdocuments.mx/reader033/viewer/2022051721/5a8147337f8b9ada388cf23f/html5/thumbnails/17.jpg)
Understandable
![Page 18: Evolution of CSS Layout - fantasaifantasai.inkedblade.net/weblog/2012/css-layout-evolution/slides.pdf · Browser Wars II: Phoenix Rising early 2010s HTML5 + CSS3 take off Browser](https://reader033.vdocuments.mx/reader033/viewer/2022051721/5a8147337f8b9ada388cf23f/html5/thumbnails/18.jpg)
Performant
![Page 19: Evolution of CSS Layout - fantasaifantasai.inkedblade.net/weblog/2012/css-layout-evolution/slides.pdf · Browser Wars II: Phoenix Rising early 2010s HTML5 + CSS3 take off Browser](https://reader033.vdocuments.mx/reader033/viewer/2022051721/5a8147337f8b9ada388cf23f/html5/thumbnails/19.jpg)
CSS Layout for the Web
Flexible
Powerful
Robust
Understandable
Performant
![Page 20: Evolution of CSS Layout - fantasaifantasai.inkedblade.net/weblog/2012/css-layout-evolution/slides.pdf · Browser Wars II: Phoenix Rising early 2010s HTML5 + CSS3 take off Browser](https://reader033.vdocuments.mx/reader033/viewer/2022051721/5a8147337f8b9ada388cf23f/html5/thumbnails/20.jpg)
CSS3 Layout Modules
Multi-column Layout
Flexible Box Layout
Grid Template Layout
Media Queries
![Page 21: Evolution of CSS Layout - fantasaifantasai.inkedblade.net/weblog/2012/css-layout-evolution/slides.pdf · Browser Wars II: Phoenix Rising early 2010s HTML5 + CSS3 take off Browser](https://reader033.vdocuments.mx/reader033/viewer/2022051721/5a8147337f8b9ada388cf23f/html5/thumbnails/21.jpg)
CSS MultiCSS MultiCSS MultiCSS Multi----column Layoutcolumn Layoutcolumn Layoutcolumn Layout
article { columns: 30em; }
article { columns: 30em 4; }
![Page 22: Evolution of CSS Layout - fantasaifantasai.inkedblade.net/weblog/2012/css-layout-evolution/slides.pdf · Browser Wars II: Phoenix Rising early 2010s HTML5 + CSS3 take off Browser](https://reader033.vdocuments.mx/reader033/viewer/2022051721/5a8147337f8b9ada388cf23f/html5/thumbnails/22.jpg)
CSS Flexible Box LayoutCSS Flexible Box LayoutCSS Flexible Box LayoutCSS Flexible Box Layout
![Page 23: Evolution of CSS Layout - fantasaifantasai.inkedblade.net/weblog/2012/css-layout-evolution/slides.pdf · Browser Wars II: Phoenix Rising early 2010s HTML5 + CSS3 take off Browser](https://reader033.vdocuments.mx/reader033/viewer/2022051721/5a8147337f8b9ada388cf23f/html5/thumbnails/23.jpg)
Grid Template LayoutGrid Template LayoutGrid Template LayoutGrid Template Layout
#main {
display: grid;
grid-columns: 5em auto 20%;
grid-rows: 3em auto 5em;
grid-template: “abb”
“LMR”
“fff”;
}
![Page 24: Evolution of CSS Layout - fantasaifantasai.inkedblade.net/weblog/2012/css-layout-evolution/slides.pdf · Browser Wars II: Phoenix Rising early 2010s HTML5 + CSS3 take off Browser](https://reader033.vdocuments.mx/reader033/viewer/2022051721/5a8147337f8b9ada388cf23f/html5/thumbnails/24.jpg)
Grid Template LayoutGrid Template LayoutGrid Template LayoutGrid Template Layout
#main {
grid-template:
“aaaaaa”
“bcccdd”;
}
![Page 25: Evolution of CSS Layout - fantasaifantasai.inkedblade.net/weblog/2012/css-layout-evolution/slides.pdf · Browser Wars II: Phoenix Rising early 2010s HTML5 + CSS3 take off Browser](https://reader033.vdocuments.mx/reader033/viewer/2022051721/5a8147337f8b9ada388cf23f/html5/thumbnails/25.jpg)
Regions&
Exclusions
![Page 26: Evolution of CSS Layout - fantasaifantasai.inkedblade.net/weblog/2012/css-layout-evolution/slides.pdf · Browser Wars II: Phoenix Rising early 2010s HTML5 + CSS3 take off Browser](https://reader033.vdocuments.mx/reader033/viewer/2022051721/5a8147337f8b9ada388cf23f/html5/thumbnails/26.jpg)
CSS RegionsCSS RegionsCSS RegionsCSS Regions
![Page 27: Evolution of CSS Layout - fantasaifantasai.inkedblade.net/weblog/2012/css-layout-evolution/slides.pdf · Browser Wars II: Phoenix Rising early 2010s HTML5 + CSS3 take off Browser](https://reader033.vdocuments.mx/reader033/viewer/2022051721/5a8147337f8b9ada388cf23f/html5/thumbnails/27.jpg)
CSS ExclusionsCSS ExclusionsCSS ExclusionsCSS Exclusions
![Page 28: Evolution of CSS Layout - fantasaifantasai.inkedblade.net/weblog/2012/css-layout-evolution/slides.pdf · Browser Wars II: Phoenix Rising early 2010s HTML5 + CSS3 take off Browser](https://reader033.vdocuments.mx/reader033/viewer/2022051721/5a8147337f8b9ada388cf23f/html5/thumbnails/28.jpg)
Media QueriesMedia QueriesMedia QueriesMedia Queries
http://www.w3.org/blog/CSS/2011/06/08/csswg_redesign/
![Page 29: Evolution of CSS Layout - fantasaifantasai.inkedblade.net/weblog/2012/css-layout-evolution/slides.pdf · Browser Wars II: Phoenix Rising early 2010s HTML5 + CSS3 take off Browser](https://reader033.vdocuments.mx/reader033/viewer/2022051721/5a8147337f8b9ada388cf23f/html5/thumbnails/29.jpg)
CSS3 Layout Modules
Multi-column Layout
Flexible Box Layout
Grid Template Layout
Media Queries
![Page 30: Evolution of CSS Layout - fantasaifantasai.inkedblade.net/weblog/2012/css-layout-evolution/slides.pdf · Browser Wars II: Phoenix Rising early 2010s HTML5 + CSS3 take off Browser](https://reader033.vdocuments.mx/reader033/viewer/2022051721/5a8147337f8b9ada388cf23f/html5/thumbnails/30.jpg)
W3C ProcessCSSWG Edition
![Page 31: Evolution of CSS Layout - fantasaifantasai.inkedblade.net/weblog/2012/css-layout-evolution/slides.pdf · Browser Wars II: Phoenix Rising early 2010s HTML5 + CSS3 take off Browser](https://reader033.vdocuments.mx/reader033/viewer/2022051721/5a8147337f8b9ada388cf23f/html5/thumbnails/31.jpg)
How CSS Specs Grow UpHow CSS Specs Grow UpHow CSS Specs Grow UpHow CSS Specs Grow UpW3CW3CW3CW3CCSSWGCSSWGCSSWGCSSWG
RECFinished
CR / PRStable
CRTesting
WD / LCRefining
WDRevising
FPWD / WDExploring
![Page 32: Evolution of CSS Layout - fantasaifantasai.inkedblade.net/weblog/2012/css-layout-evolution/slides.pdf · Browser Wars II: Phoenix Rising early 2010s HTML5 + CSS3 take off Browser](https://reader033.vdocuments.mx/reader033/viewer/2022051721/5a8147337f8b9ada388cf23f/html5/thumbnails/32.jpg)
Sources of Innovation
implementationsimplementationsimplementationsimplementations lead
Rounded corners
designersdesignersdesignersdesigners lead
Image borders
specsspecsspecsspecs lead
Multiple backgrounds
![Page 33: Evolution of CSS Layout - fantasaifantasai.inkedblade.net/weblog/2012/css-layout-evolution/slides.pdf · Browser Wars II: Phoenix Rising early 2010s HTML5 + CSS3 take off Browser](https://reader033.vdocuments.mx/reader033/viewer/2022051721/5a8147337f8b9ada388cf23f/html5/thumbnails/33.jpg)
Sources of Innovation
implementationsimplementationsimplementationsimplementations lead
Transitions, Animations, and Transforms
specsspecsspecsspecs lead
Selectors, Multi-col Layout, Media Queries, Color
total total total total mashupmashupmashupmashup
Basic UI, Flexbox Layout, Text, Conditional Rules
![Page 34: Evolution of CSS Layout - fantasaifantasai.inkedblade.net/weblog/2012/css-layout-evolution/slides.pdf · Browser Wars II: Phoenix Rising early 2010s HTML5 + CSS3 take off Browser](https://reader033.vdocuments.mx/reader033/viewer/2022051721/5a8147337f8b9ada388cf23f/html5/thumbnails/34.jpg)
Review & RevisionGetting and responding to feedback
from a variety of sources
![Page 35: Evolution of CSS Layout - fantasaifantasai.inkedblade.net/weblog/2012/css-layout-evolution/slides.pdf · Browser Wars II: Phoenix Rising early 2010s HTML5 + CSS3 take off Browser](https://reader033.vdocuments.mx/reader033/viewer/2022051721/5a8147337f8b9ada388cf23f/html5/thumbnails/35.jpg)
Getting InvolvedGetting InvolvedGetting InvolvedGetting Involved
Follow our progress:Follow our progress:Follow our progress:Follow our progress:
w3.org/blog/CSS @csswg
w3.org/Style/CSS/current-work
Discuss and send feedback:Discuss and send feedback:Discuss and send feedback:Discuss and send feedback:
www-style mailing list
Demand correctness! Write Demand correctness! Write Demand correctness! Write Demand correctness! Write testcasestestcasestestcasestestcases!!!!
csswg.org/test
about:csswgabout:csswgabout:csswgabout:csswgfantasai.inkedblade.net/weblog/2011/inside-csswg