Peter Gasston
@stopsatgreen
http://broken-links.com
Slide 2
Slide 2 text
The CSS of
Tomorrow
Slide 3
Slide 3 text
Predicting the Future
“Television won’t last. It’s a flash
in the pan.”
- Mary Somerville
Slide 4
Slide 4 text
Predicting the Future
“Home taping is killing music”
- BPI
Slide 5
Slide 5 text
Predicting the Future
“There’s no chance that the
iPhone is going to get any
significant market share. No
chance.”
- Steve Ballmer, 2007
Slide 6
Slide 6 text
I Predict: Cynicism
“That sounds cool but it's
useless because we'll have to
wait for browsers to catch up.”
Slide 7
Slide 7 text
The CSS of
Tomorrow
Slide 8
Slide 8 text
1.42857142857143
(20 ÷ 14)
Relative units
Slide 9
Slide 9 text
Root-relative units
html { font-size: 10px; }
p { font-size: 1.4em; }←14px
p span { font-size: 0.8572em; }←12px
0.85714285714286
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
Root-relative units
html { font-size: 10px; }
p { font-size: 1.4rem; }←14px
p span { font-size: 1.2rem; }←12px
Much better.
http://www.w3.org/TR/css3-values/
Slide 12
Slide 12 text
Root-relative units
E { width: 65%; }
F { width: 76.9231%; }←55% of root
76.923076923077%
Slide 13
Slide 13 text
Viewport-relative units
100vw
100vh
Slide 14
Slide 14 text
Viewport-relative units
E {
height: 50vh;
width: 75vw;
}
Slide 15
Slide 15 text
Root-relative units
E { width: 65vw; }
F { width: 55vw; }←55% of root
Pukka.
http://www.w3.org/TR/css3-values/
Slide 16
Slide 16 text
Selectors
li { color: #00F; }
ol li { color: #F00; }
ol.foo li { color: #00F; }
ol:not(.foo) li { color: #F00; }
http://www.w3.org/TR/css3-selectors/
Slide 17
Slide 17 text
Selectors
ol span,
ul span,
p span {}
*:matches(ol,ul,p) span {}
http://www.w3.org/TR/2011/WD-selectors4-20110929/