The CSS of Tomorrow (revised)

1.

Peter Gasston @stopsatgreen http://broken-links.com

2.

The CSS of Tomorrow

3.

Predicting the Future “Television won’t last. It’s a flash in
the pan.” - Mary Somerville

4.

Predicting the Future “Home taping is killing music” - BPI

5.

Predicting the Future “There’s no chance that the iPhone is
going to get any significant market share. No chance.” - Steve Ballmer, 2007

6.

I Predict: Cynicism “That sounds cool but it's useless because
we'll have to wait for browsers to catch up.”

7.

The CSS of Tomorrow

8.

Root-relative units html { font-size: 10px; } p { font-size:
1.4em; }←14px p span { font-size: 0.8572em; }←12px 0.85714285714286

9.

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/

10.

Root-relative units E { width: 65%; } F { width:
76.9231%; }←55% of root 76.923076923077%

11.

Viewport-relative units 100vw 100vh

12.

Root-relative units E { width: 65vw; } F { width:
55vw; }←55% of root Pukka. http://www.w3.org/TR/css3-values/

13.

In-/Ex-trinsic Sizing E { width: fill-available; } E { min-height:
fit-content; } http://www.w3.org/TR/css3-sizing/

14.

Selectors ol span, ul span, p span {} *:matches(ol,ul,p) span
{} *:not(ul) span {} http://www.w3.org/TR/2011/WD-selectors4-20110929/

15.

Selectors :link, :visited :any-link :local-link http://www.w3.org/TR/2011/WD-selectors4-20110929/

16.

Selectors <label for="foo" /> <input id="foo" /> label /for/ input
{} label:hover /for/ input {} http://www.w3.org/TR/2011/WD-selectors4-20110929/ an attribute of E the value of which is equal to the id of F E /foo/ F

17.

Selectors E! > F !E > F !E! > F
E!!1! > F The Parent Selector! http://dev.w3.org/csswg/selectors4/

18.

Positioning E { position: sticky; } http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in- WebKit

19.

Media Queries

20.

Media Queries @media (script: 0) {} @media (hover) {} @media
(pointer: fine|coarse) {} http://dev.w3.org/csswg/mediaqueries4/

21.

Media Queries @media screen and (min-width: 400px) {} @media screen
and (min-width: 960px) {} @media screen and (resolution: 2dppx) {}

22.

Media Queries @media screen { @media (min-width: 400px) {} @media
(min-width: 960px) {} @media (resolution: 2dppx) {} } http://my.opera.com/ODIN/blog/2012/08/28/colourful-opera-12-50-snapshot

23.

Device Adaptation <meta name="viewport" content="width=device-width,initial- scale=1,maximum-scale=2">

24.

Device Adaptation @viewport { initial-scale: 1; maximum-scale: 2; width: device-width;
} http://dev.w3.org/csswg/css-device-adapt/

25.

Device Adaptation @viewport { initial-scale: 1; width: device-width; } @media
(min-width: 800px) { @viewport { maximum-scale: 1; } }

26.

Conditionals @supports (columns: 3) {} =

27.

Images

28.

Images E { background-image: image('foo.svg','foo.png',#F00); } E { background-image: url(foo.png);
} http://dev.w3.org/csswg/css4-images/

29.

Images E { background-image: image-set( 'foo.png' 1x, 'foo-hi.png' 2x, 'foo-mega.png'
600dpi ); }

30.

Images E { background-image: image('foo.svg#xywh=0,0,200,60'); }

31.

Images #c { background: element(#b); } ‘B’ Actually C A
B

32.

Images E { background-image: conic-gradient(#F00,#0F0,#00F); }

33.

Layout

34.

Flexbox

35.

.holder { display: flex; } .child { width: 30%; }
.child { flex: 1; } A B .a { flex: 2; } .b { flex: 1; } Flexbox http://www.w3.org/TR/css3-flexbox/

36.

Flexbox C A B .outer { flex-direction: column; } .a,.b
{ order: 2; } .c { order: 1; } A B .outer { flex-direction: column; } .a { flex: 2; } .b { flex: 1; }

37.

Grid Layout

38.

Grid Layout E { display: grid; grid-definition-columns: 1fr 1fr 2fr;
} E { grid-definition-columns: 1fr 1fr 2fr; grid-definition-rows: 10em auto 40px; } http://dev.w3.org/csswg/css3-grid-layout/

39.

Grid Layout F { grid-column-position: 2; grid-row-position: 2; } A
B .a { grid-column: 2 2; } .b { grid-row-span: 3; }

40.

Grid Templates E { grid-template: 'head head head' 'nav main
main' 'foot foot foot'; } .a { grid-area: 'head'; } .b { grid-area: 'main'; } A B

41.

Overflow E { overflow-x: pages; } Overflow http://dev.w3.org/csswg/css3-overflow/

42.

Overflow E { overflow: fragments; } E::nth-fragment(odd) {} http://dev.w3.org/csswg/css3-break/ Overflow

43.

Regions A .a { flow-into: foo; } B C D
.b, .c, .d { flow-from: foo; } B .b { flow-from: foo; } http://dev.w3.org/csswg/css3-regions/

44.

None

45.

Exclusions & Shapes E { position: absolute; } wrap-flow: both;
http://dev.w3.org/csswg/css3-exclusions/

46.

Exclusions & Shapes E { shape-outside: circle(50%,50%, 400px); } E
{ shape-inside: circle(50%,50%, 400px); }

47.

Filters E { filter: grayscale(1); } https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html

48.

Filters E { filter: custom(url(foo.fs)); }

49.

Masking E { mask-image: url(foo.png); } http://dvcs.w3.org/hg/FXTF/raw-file/tip/masking/index.html + =

50.

Masking E { clip-path: circle(50%,50%,200px); }

51.

Pre-processors

52.

Cascading Variables :root { var-brand-color: #F00; } h1 { border-color:
var(brand-color); color: var(brand-color); } http://dev.w3.org/csswg/css-variables/

53.

Cascading Variables Y!$? $title = 'h1 span'; $brandcolor = '#f00';
.foo $title { border-color: $brandcolor; color: $brandcolor; }

54.

Hierarchies .foo { border-color: red; } .foo h1 { color:
yellow; } .foo h1 em { font-style: normal; } .foo ul { margin: 0; }

55.

Hierarchies .foo { border-color: red; & h1 { color: yellow;
& em { font-style: normal; } } & ul { margin: 0; } } http://dev.w3.org/csswg/css3-hierarchies/

56.

Mixins TBC

57.

“When can we use them?” 1. Browser update cycles are
getting faster 2. The market share of IE is shrinking

58.

“When can we use them?” 1. Your environment 2. How
much do you want it?

59.

Fin.

60.

None

61.

Image Credits http://www.buzzfeed.com/peggy/22-reasons-why-design-was- more-awesome-in-the-80s http://80s-touch.tumblr.com/ http://theyank.tumblr.com/

The CSS of Tomorrow (revised)

The CSS of Tomorrow (revised)

Want more?

Transcript