$30 off During Our Annual Pro Sale. View Details »

The CSS of Tomorrow

Peter Gasston
September 07, 2012

The CSS of Tomorrow

Canvas conference, 7 September 2012. #canvasconf

Peter Gasston

September 07, 2012
Tweet

More Decks by Peter Gasston

Other Decks in Technology

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