Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The CSS of Tomorrow

9d9f17e37b751b9f83081ba3dd44bab4?s=47 Peter Gasston
September 07, 2012

The CSS of Tomorrow

Canvas conference, 7 September 2012. #canvasconf

9d9f17e37b751b9f83081ba3dd44bab4?s=128

Peter Gasston

September 07, 2012
Tweet

More Decks by Peter Gasston

Other Decks in Technology

Transcript

  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. 1.42857142857143 (20 ÷ 14) Relative units

  9. Root-relative units html { font-size: 10px; } p { font-size:

    1.4em; }←14px p span { font-size: 0.8572em; }←12px 0.85714285714286
  10. None
  11. 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/
  12. Root-relative units E { width: 65%; } F { width:

    76.9231%; }←55% of root 76.923076923077%
  13. Viewport-relative units 100vw 100vh

  14. Viewport-relative units E { height: 50vh; width: 75vw; }

  15. Root-relative units E { width: 65vw; } F { width:

    55vw; }←55% of root Pukka. http://www.w3.org/TR/css3-values/
  16. 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/
  17. Selectors ol span, ul span, p span {} *:matches(ol,ul,p) span

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

  19. Selectors http://example.com/foo/bar/ <a href="http://example.com/foo/bar/" /> a:local-link {} <a href="http://example.com/" />

    a:local-link(0) {} <a href="http://example.com/foo/" /> a:local-link(1) http://www.w3.org/TR/2011/WD-selectors4-20110929/
  20. Selectors E /foo/ F <label for="foo" /> <input id="foo" />

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

    E!!1! > F The Parent Selector! http://dev.w3.org/csswg/selectors4/
  22. Positioning E { position: sticky; } http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in- WebKit

  23. Media Queries

  24. Media Queries @media (script: 0) {} @media (hover) {} @media

    (pointer: fine|coarse) {} http://dev.w3.org/csswg/mediaqueries4/
  25. Media Queries @media screen and (min-width: 400px) {} @media screen

    and (min-width: 960px) {} @media screen and (resolution: 2dppx) {}
  26. 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
  27. Device Adaptation <meta name="viewport" content="width=device-width,initial- scale=1,maximum-scale=2">

  28. Device Adaptation @viewport { initial-scale: 1; maximum-scale: 2; width: device-width;

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

    (min-width: 800px) { @viewport { maximum-scale: 1; } }
  30. 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/
  31. Conditionals @supports (columns: 3) {} =

  32. Images

  33. Images E { background-image: image('foo.svg','foo.png',#F00); } E { background-image: url(foo.png);

    } http://dev.w3.org/csswg/css4-images/
  34. Images E { background-image: image-set( 'foo.png' 1x, 'foo-hi.png' 2x, 'foo-mega.png'

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

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

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

  38. Layout

  39. Flexbox

  40. .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/
  41. Flexbox .child { align-items: center; flex: 0; justify-content: center; }

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

  43. 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/
  44. Grid Layout F { grid-column-position: 2; grid-row-position: 2; } A

    B .a { grid-column: 2 2; } .b { grid-row-span: 3; }
  45. Grid Templates E { grid-template: 'head head head' 'nav main

    main' 'foot foot foot'; } .a { grid-area: 'head'; } .b { grid-area: 'main'; } A B
  46. Overflow E { overflow-x: pages; } http://dev.w3.org/csswg/css3-overflow/

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

  48. 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/
  49. None
  50. Exclusions & Shapes E { position: absolute; } wrap-flow: both;

    http://dev.w3.org/csswg/css3-exclusions/
  51. Exclusions & Shapes E { shape-outside: circle(50%,50%, 400px); } E

    { shape-inside: circle(50%,50%, 400px); }
  52. Filters E { filter: grayscale(1); } https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html

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

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

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

  56. Pre-processors

  57. Cascading Variables :root { var-brand-color: #F00; } h1 { border-color:

    var(brand-color); color: var(brand-color); } http://dev.w3.org/csswg/css-variables/
  58. Cascading Variables Y!$? $title = 'h1 span'; $brandcolor = '#f00';

    .foo $title { border-color: $brandcolor; color: $brandcolor; }
  59. Hierarchies .foo { border-color: red; } .foo h1 { color:

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

    & em { font-style: normal; } } & ul { margin: 0; } } http://dev.w3.org/csswg/css3-hierarchies/
  61. Mixins TBC

  62. “When can we use them?” 1. Browser update cycles are

    getting faster 2. The market share of IE is shrinking
  63. “When can we use them?” 1. Your environment 2. How

    much do you want it?
  64. Fin.

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