E {
grid-template-areas:
'head head head'
'nav main main'
'foot foot foot';
}
grid layout
http://dev.w3.org/csswg/css-grid/
head head head
nav
foot foot foot
main main
Slide 42
Slide 42 text
E {
grid-template-areas:
'head head head'
'nav main main'
'foot foot foot';
}
grid layout
.a { grid-area: 'head'; }
.b { grid-area: 'main'; }
http://dev.w3.org/csswg/css-grid/
head head head
nav
foot foot foot
main main
b
a
Slide 43
Slide 43 text
fonts
http://dev.w3.org/csswg/css-fonts/
E {
font-kerning: normal;
font-variant-caps: small-caps;
}
Slide 44
Slide 44 text
E {
content: icon;
icon: url('foo.png');
}
user interface
http://dev.w3.org/csswg/css-ui/
Slide 45
Slide 45 text
E {
background-image:
image('foo.svg#xywh=0,0,200,120');
}
images
http://dev.w3.org/csswg/css-images/
Slide 46
Slide 46 text
E {
background-image:
image('foo.svg#xywh=0,0,200,120');
}
images
http://dev.w3.org/csswg/css-images/
Slide 47
Slide 47 text
E {
background-image:
image('foo.svg','foo.png',#F00);
}
images
http://dev.w3.org/csswg/css-images/
hierarchy
.foo {…}
.foo h1 {…}
.foo h1 em {…}
.foo ul {…}
.foo {…
& h1 {…
& em {…}
}
& ul {…}
}
Slide 76
Slide 76 text
“When can we
use them?”
Slide 77
Slide 77 text
1. Browser update cycles are
getting more frequent.
2. Old IE is dying fast.
Slide 78
Slide 78 text
IE :'-(
Slide 79
Slide 79 text
No content
Slide 80
Slide 80 text
1. Your environment.
2. How much you want it.
Slide 81
Slide 81 text
tack!
Slide 82
Slide 82 text
demos
• philipwalton.github.io/solved-by-flexbox/
• adobe-webplatform.github.io/regions-adaptive/
• codepen.io/adobe/
NB: You will need Chrome Canary for many of these demos, and may have to
enable ‘experimental web platform features’ in about:flags.