The CSS of Tomorrow

Canvas conference, 7 September 2012. #canvasconf

Transcript

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

   View Slide

2. The CSS of
   Tomorrow
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. The CSS of
   Tomorrow
   

   View Slide

8. 1.42857142857143
   (20 ÷ 14)
   Relative units
   

   View Slide

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

   View Slide

10. View Slide

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/
    

    View Slide

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

    View Slide

13. Viewport-relative units
    100vw
    100vh
    

    View Slide

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

    View Slide

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

    View Slide

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/
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

23. Media Queries
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

27. Device Adaptation
    content="width=device-width,initial-
    scale=1,maximum-scale=2">
    

    View Slide

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

    View Slide

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

    View Slide

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/
    

    View Slide

31. Conditionals
    @supports (columns: 3) {}
    =
    

    View Slide

32. Images
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

38. Layout
    

    View Slide

39. Flexbox
    

    View Slide

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/
    

    View Slide

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

    View Slide

42. Grid Layout
    

    View Slide

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/
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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/
    

    View Slide

49. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

56. Pre-processors
    

    View Slide

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/
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

61. Mixins
    TBC
    

    View Slide

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

    View Slide

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

    View Slide

64. Fin.
    

    View Slide

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/
    

    View Slide