The CSS of Tomorrow (revised)

Slide 1

Slide 1 text

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

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

Slide 9

Slide 9 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 10

Slide 10 text

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

Slide 11

Slide 11 text

Viewport-relative units 100vw 100vh

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Selectors 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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Media Queries

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Device Adaptation

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Conditionals @supports (columns: 3) {} =

Slide 27

Slide 27 text

Images

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Layout

Slide 34

Slide 34 text

Flexbox

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Grid Layout

Slide 38

Slide 38 text

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/

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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/

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

Pre-processors

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

Mixins TBC

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

Fin.

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

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/