Canvas conference, 7 September 2012. #canvasconf
Peter Gasston@stopsatgreenhttp://broken-links.com
View Slide
The CSS ofTomorrow
Predicting the Future“Television won’t last. It’s a flashin the pan.”- Mary Somerville
Predicting the Future“Home taping is killing music”- BPI
Predicting the Future“There’s no chance that theiPhone is going to get anysignificant market share. Nochance.”- Steve Ballmer, 2007
I Predict: Cynicism“That sounds cool but it'suseless because we'll have towait for browsers to catch up.”
1.42857142857143(20 ÷ 14)Relative units
Root-relative unitshtml { font-size: 10px; }p { font-size: 1.4em; }←14pxp span { font-size: 0.8572em; }←12px0.85714285714286
Root-relative unitshtml { font-size: 10px; }p { font-size: 1.4rem; }←14pxp span { font-size: 1.2rem; }←12pxMuch better.http://www.w3.org/TR/css3-values/
Root-relative unitsE { width: 65%; }F { width: 76.9231%; }←55% of root76.923076923077%
Viewport-relative units100vw100vh
Viewport-relative unitsE {height: 50vh;width: 75vw;}
Root-relative unitsE { width: 65vw; }F { width: 55vw; }←55% of rootPukka.http://www.w3.org/TR/css3-values/
Selectorsli { color: #00F; }ol li { color: #F00; }ol.foo li { color: #00F; }ol:not(.foo) li { color: #F00; }http://www.w3.org/TR/css3-selectors/
Selectorsol span,ul span,p span {}*:matches(ol,ul,p) span {}http://www.w3.org/TR/2011/WD-selectors4-20110929/
Selectors:link,:visited:any-link:local-linkhttp://www.w3.org/TR/2011/WD-selectors4-20110929/
Selectorshttp://example.com/foo/bar/a:local-link {}a:local-link(0) {}a:local-link(1)http://www.w3.org/TR/2011/WD-selectors4-20110929/
SelectorsE /foo/ Flabel /for/ input {}label:hover /for/ input {}http://www.w3.org/TR/2011/WD-selectors4-20110929/
SelectorsE! > F!E > F!E! > FE!!1! > FThe Parent Selector!http://dev.w3.org/csswg/selectors4/
PositioningE { position: sticky; }http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit
Media Queries
Media Queries@media (script: 0) {}@media (hover) {}@media (pointer: fine|coarse) {}http://dev.w3.org/csswg/mediaqueries4/
Media Queries@media screen and (min-width: 400px) {}@media screen and (min-width: 960px) {}@media screen and (resolution: 2dppx) {}
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
Device Adaptationcontent="width=device-width,initial-scale=1,maximum-scale=2">
Device Adaptation@viewport {initial-scale: 1;maximum-scale: 2;width: device-width;}http://dev.w3.org/csswg/css-device-adapt/
Device Adaptation@viewport {initial-scale: 1;width: device-width;}@media (min-width: 800px) {@viewport {maximum-scale: 1;}}
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 expressionsin CSS. Finally!http://www.w3.org/TR/css3-conditional/
Conditionals@supports (columns: 3) {}=
Images
ImagesE {background-image:image('foo.svg','foo.png',#F00);}E { background-image: url(foo.png); }http://dev.w3.org/csswg/css4-images/
ImagesE {background-image: image-set('foo.png' 1x,'foo-hi.png' 2x,'foo-mega.png' 600dpi); }
ImagesE {background-image:image('foo.svg#xywh=0,0,200,60');}
Images#c { background: element(#b); }‘B’Actually CA B
ImagesE { background-image:conic-gradient(#F00,#0F0,#00F);}
Layout
Flexbox
.holder { display: flex; }.child { width: 30%; }.child { flex: 1; }A B.a { flex: 2; }.b { flex: 1; }Flexboxhttp://www.w3.org/TR/css3-flexbox/
Flexbox.child {align-items: center;flex: 0;justify-content: center;}CAB.outer {flex-direction: column;}.a,.b { order: 2; }.c { order: 1; }
Grid Layout
Grid LayoutE {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/
Grid LayoutF {grid-column-position: 2;grid-row-position: 2;}AB.a { grid-column: 2 2; }.b { grid-row-span: 3; }
Grid TemplatesE {grid-template:'head head head''nav main main''foot foot foot';}.a { grid-area: 'head'; }.b { grid-area: 'main'; }AB
OverflowE { overflow-x: pages; }http://dev.w3.org/csswg/css3-overflow/
OverflowE { overflow: fragments; }E::nth-fragment(odd) {}http://dev.w3.org/csswg/css3-break/
RegionsA.a { flow-into: foo; }BC D.b, .c, .d {flow-from: foo;}B.b { flow-from: foo; }http://dev.w3.org/csswg/css3-regions/
Exclusions & ShapesE {position: absolute;}wrap-flow: both;http://dev.w3.org/csswg/css3-exclusions/
Exclusions & ShapesE {shape-outside:circle(50%,50%,400px);}E {shape-inside:circle(50%,50%,400px);}
FiltersE { filter: grayscale(1); }https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
FiltersE { filter: custom(url(foo.fs)); }
MaskingE { mask-image: url(foo.png); }+ =http://dvcs.w3.org/hg/FXTF/raw-file/tip/masking/index.html
MaskingE {clip-path: circle(50%,50%,200px);}
Pre-processors
Cascading Variables:root { var-brand-color: #F00; }h1 {border-color: var(brand-color);color: var(brand-color);}http://dev.w3.org/csswg/css-variables/
Cascading VariablesY!$?$title = 'h1 span';$brandcolor = '#f00';.foo $title {border-color: $brandcolor;color: $brandcolor;}
Hierarchies.foo { border-color: red; }.foo h1 { color: yellow; }.foo h1 em { font-style: normal; }.foo ul { margin: 0; }
Hierarchies.foo { border-color: red;& h1 { color: yellow;& em { font-style: normal; }}& ul { margin: 0; }}http://dev.w3.org/csswg/css3-hierarchies/
MixinsTBC
“When can we use them?”1. Browser update cycles aregetting faster2. The market share of IE isshrinking
“When can we use them?”1. Your environment2. How much do you want it?
Fin.
Image Creditshttp://www.buzzfeed.com/peggy/22-reasons-why-design-was-more-awesome-in-the-80shttp://80s-touch.tumblr.com/http://theyank.tumblr.com/