Tweet
Tweet

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

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/

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Selectors http://example.com/foo/bar/ a:local-link {} a:local-link(0) {} a:local-link(1) http://www.w3.org/TR/2011/WD-selectors4-20110929/

Slide 20

Slide 20 text

Selectors E /foo/ F label /for/ input {} label:hover /for/ input {} http://www.w3.org/TR/2011/WD-selectors4-20110929/

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Media Queries

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 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 27

Slide 27 text

Device Adaptation

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Conditionals @document url('http://foo.com/bar/') {} @document url-prefix('http://foo.com/') {} @document domain('foo.com') {} @document regexp('http://foo.com//[a-zA-Z]| \d{3,}/') {} Regular expressions in CSS. Finally! http://www.w3.org/TR/css3-conditional/

Slide 31

Slide 31 text

Conditionals @supports (columns: 3) {} =

Slide 32

Slide 32 text

Images

Slide 33

Slide 33 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 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Layout

Slide 39

Slide 39 text

Flexbox

Slide 40

Slide 40 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 41

Slide 41 text

Flexbox .child { align-items: center; flex: 0; justify-content: center; } C A B .outer { flex-direction: column; } .a,.b { order: 2; } .c { order: 1; }

Slide 42

Slide 42 text

Grid Layout

Slide 43

Slide 43 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 44

Slide 44 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 45

Slide 45 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 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 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 49

Slide 49 text

No content

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

Pre-processors

Slide 57

Slide 57 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 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

Mixins TBC

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

Fin.

Slide 65

Slide 65 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/