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

The CSS of Tomorrow (revised)

The CSS of Tomorrow (revised)

London Web Standards, October 2012

Peter Gasston

October 22, 2012
Tweet

More Decks by Peter Gasston

Other Decks in Programming

Transcript

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

    View full-size slide

  2. The CSS of
    Tomorrow

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

  7. The CSS of
    Tomorrow

    View full-size slide

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

    View full-size slide

  9. 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 full-size slide

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

    View full-size slide

  11. Viewport-relative units
    100vw
    100vh

    View full-size slide

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

    View full-size slide

  13. In-/Ex-trinsic Sizing
    E { width: fill-available; }
    E { min-height: fit-content; }
    http://www.w3.org/TR/css3-sizing/

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. Selectors


    label /for/ input {}
    label:hover /for/ input {}
    http://www.w3.org/TR/2011/WD-selectors4-20110929/
    an attribute of E the value of
    which is equal to the id of F
    E /foo/ F

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. Media Queries

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  22. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  32. .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 full-size slide

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

    View full-size slide

  34. 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 full-size slide

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

    View full-size slide

  36. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  39. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  46. Pre-processors

    View full-size slide

  47. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  53. 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 full-size slide