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

Evolution of CSS LayoutThrough CSS3 and Beyond

Hi! I’m Elika J. EtemadElika J. EtemadElika J. EtemadElika J. Etemad, otherwise known as

fantasaifantasaifantasaifantasai

I work on the CSSCSSCSSCSS standards at W3CW3CW3CW3C.

Geocities Retro CSS Spec

<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>

CSS Level 1CSS Level 1CSS Level 1CSS Level 1

width & height

float & clear

margins & padding

backgrounds & borders

fonts

list styles

alignment & white-space

CSS Level 2CSS Level 2CSS Level 2CSS Level 2

.sidebar, .main { display: table-cell; }

CSS Level 2CSS Level 2CSS Level 2CSS Level 2

float: left

.clearfix

position: absolute

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

CSS Level 3CSS Level 3CSS Level 3CSS Level 3

Processing Power

Decoration

Typography & Internationalization

Layout

Layout for the Web

Web vs. Print

CSS3 LayoutPrinciples of Design

Flexible

Powerful

Robust

Understandable

Performant

CSS Layout for the Web

Flexible

Powerful

Robust

Understandable

Performant

CSS3 Layout Modules

Multi-column Layout

Flexible Box Layout

Grid Template Layout

Media Queries

CSS MultiCSS MultiCSS MultiCSS Multi----column Layoutcolumn Layoutcolumn Layoutcolumn Layout

article { columns: 30em; }

article { columns: 30em 4; }

CSS Flexible Box LayoutCSS Flexible Box LayoutCSS Flexible Box LayoutCSS Flexible Box Layout

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”;

}

Grid Template LayoutGrid Template LayoutGrid Template LayoutGrid Template Layout

#main {

grid-template:

“aaaaaa”

“bcccdd”;

}

Regions&

Exclusions

CSS RegionsCSS RegionsCSS RegionsCSS Regions

CSS ExclusionsCSS ExclusionsCSS ExclusionsCSS Exclusions

Media QueriesMedia QueriesMedia QueriesMedia Queries

http://www.w3.org/blog/CSS/2011/06/08/csswg_redesign/

CSS3 Layout Modules

Multi-column Layout

Flexible Box Layout

Grid Template Layout

Media Queries

W3C ProcessCSSWG Edition

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

Sources of Innovation

implementationsimplementationsimplementationsimplementations lead

Rounded corners

designersdesignersdesignersdesigners lead

Image borders

specsspecsspecsspecs lead

Multiple backgrounds

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

Review & RevisionGetting and responding to feedback

from a variety of sources

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