The CSS of Tomorrow (revised)

The CSS of Tomorrow (revised)

London Web Standards, October 2012

9d9f17e37b751b9f83081ba3dd44bab4?s=128

Peter Gasston

October 22, 2012
Tweet

Transcript

  1. 5.

    Predicting the Future “There’s no chance that the iPhone is

    going to get any significant market share. No chance.” - Steve Ballmer, 2007
  2. 6.

    I Predict: Cynicism “That sounds cool but it's useless because

    we'll have to wait for browsers to catch up.”
  3. 8.

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

    1.4em; }←14px p span { font-size: 0.8572em; }←12px 0.85714285714286
  4. 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/
  5. 10.

    Root-relative units E { width: 65%; } F { width:

    76.9231%; }←55% of root 76.923076923077%
  6. 12.

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

    55vw; }←55% of root Pukka. http://www.w3.org/TR/css3-values/
  7. 13.

    In-/Ex-trinsic Sizing E { width: fill-available; } E { min-height:

    fit-content; } http://www.w3.org/TR/css3-sizing/
  8. 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/
  9. 16.

    Selectors <label for="foo" /> <input id="foo" /> 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
  10. 17.

    Selectors E! > F !E > F !E! > F

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

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

    (pointer: fine|coarse) {} http://dev.w3.org/csswg/mediaqueries4/
  12. 21.

    Media Queries @media screen and (min-width: 400px) {} @media screen

    and (min-width: 960px) {} @media screen and (resolution: 2dppx) {}
  13. 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
  14. 25.

    Device Adaptation @viewport { initial-scale: 1; width: device-width; } @media

    (min-width: 800px) { @viewport { maximum-scale: 1; } }
  15. 27.
  16. 33.
  17. 34.
  18. 35.

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

    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; }
  20. 38.

    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/
  21. 39.

    Grid Layout F { grid-column-position: 2; grid-row-position: 2; } A

    B .a { grid-column: 2 2; } .b { grid-row-span: 3; }
  22. 40.

    Grid Templates E { grid-template: 'head head head' 'nav main

    main' 'foot foot foot'; } .a { grid-area: 'head'; } .b { grid-area: 'main'; } A B
  23. 43.

    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/
  24. 44.
  25. 45.

    Exclusions & Shapes E { position: absolute; } wrap-flow: both;

    http://dev.w3.org/csswg/css3-exclusions/
  26. 46.

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

    { shape-inside: circle(50%,50%, 400px); }
  27. 52.

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

    var(brand-color); color: var(brand-color); } http://dev.w3.org/csswg/css-variables/
  28. 53.

    Cascading Variables Y!$? $title = 'h1 span'; $brandcolor = '#f00';

    .foo $title { border-color: $brandcolor; color: $brandcolor; }
  29. 54.

    Hierarchies .foo { border-color: red; } .foo h1 { color:

    yellow; } .foo h1 em { font-style: normal; } .foo ul { margin: 0; }
  30. 55.

    Hierarchies .foo { border-color: red; & h1 { color: yellow;

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

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

    getting faster 2. The market share of IE is shrinking
  32. 59.
  33. 60.