Upload
lamdang
View
216
Download
0
Embed Size (px)
Citation preview
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