CSS: What‘s New, The Future, and You

A look at some recent, forthcoming, and possible future CSS properties. Given at Leetspeak in Stockholm, Sweden, on 12th October 2013.

Transcript

1. CSS: WHAT’S NEW, THE FUTURE, AND YOU. #leetspeak 10/13
2. PETER GASSTON @stopsatgreen broken-links.com
3. CREATIVE TECHNOLOGIST / FRONT-END LEAD rehabstudio.com
4. CSS. Important note: cigarettes are not cool.
5. “When can we use them?”
6. WHAT’S NEW.
7. viewport width (vw) viewport height (vh)
8. E { height: 50vh; width: 80vw; } E { height: 50vh; width: 80vw; }
9. selectors E { width: calc(100% - 40px); } http://dev.w3.org/csswg/selectors/
10. selectors li { color: #00F; } ol li { color: #F00; } ol.foo li { color: #00F; } ol:not(.foo) li { color: #F00; } http://dev.w3.org/csswg/selectors/
11. selectors ol span, ul span, p span {…} *:matches(ol,ul,p) span {…} http://dev.w3.org/csswg/selectors/
12. backgrounds E { background-position: right 20% top 0; } E { background: url('foo.png') 0 0 / 100% auto; } http://dev.w3.org/csswg/selectors/
13. E { position: sticky; top: 0; } positioning
14. flexbox .holder { display: flex; } .child { width: 30%; } .child { flex: 1; } .a { flex: 2; } .b { flex: 1; } http://dev.w3.org/csswg/css-flexbox/ a b
15. flexbox .child { align-items: center; justify-content: center; } http://dev.w3.org/csswg/css-flexbox/ .parent { display: flex; } .input { flex: 1; } .btn {…}
17. intrinsic sizes E { width: min-content; } http://dev.w3.org/csswg/css-sizing/ E { width: fit-content; }
18. THE FUTURE.
20. Predictions are for idiots.
21. “There is no chance that the iPhone is going to get any significant market share. No chance.” - Steve Ballmer
22. iOS :-) Windows Phone :'-(
23. intrinsic sizes E:before, E:after { content: ''; display: table; } E:after { clear:both; } E { min-height: contain-floats; } http://dev.w3.org/csswg/css-sizing/
24. selectors <label for="bar">…</label> <input id="bar"> label /for/ input {…} http://dev.w3.org/csswg/selectors/
25. selectors E! > F {…} http://dev.w3.org/csswg/selectors/ the subject indicator bang!
26. fast vs. complete
27. selectors E! > F {…} http://dev.w3.org/csswg/selectors/ document.querySelector('E! > F');
28. selectors E:link {…} E:any-link {…} E:local-link {…} http://dev.w3.org/csswg/selectors/
29. selectors E:active-drop {…} E:invalid-drop {…} E:valid-drop {…} http://dev.w3.org/csswg/selectors/
30. selectors E:current {…} E:past {…} E:future {…} http://dev.w3.org/csswg/selectors/
31. E { overflow: pages-x; } overflow http://dev.w3.org/csswg/css-overflow/ E { overflow: hidden; }
32. E { overflow: fragments; } overflow http://dev.w3.org/csswg/css-overflow/ E::nth-fragment(odd) {…}
33. Judging the capabilities of a device by the resolution of its screen is like judging the height of a person by the colour of their shoes.
34. media queries http://dev.w3.org/csswg/mediaqueries/ @media (script: 0) {…} @media (hover: 1) {…} @media (pointer: coarse) {…} @media (luminosity: dim) {…}
35. conditionals @supports (height: 1vh) {…} http://dev.w3.org/csswg/css-conditional/
36. device adaptation http://dev.w3.org/csswg/css-device-adapt/ @viewport { width: 100vw; zoom: 1; } <meta name="viewport" content="initial-scale=1, width=device-width">
37. Good news for designers.
39. grid layout http://dev.w3.org/csswg/css-grid/ E { display: grid; grid-template-columns: 1fr 1fr 2fr; grid-template-rows: 10em auto 40px; }
40. F { grid-column: 2; grid-row: 2; } grid layout .a { grid-column: 1 3; } http://dev.w3.org/csswg/css-grid/ .b { grid-area: 2 2 3 3; }
41. E { grid-template-areas: 'head head head' 'nav main main' 'foot foot foot'; } grid layout http://dev.w3.org/csswg/css-grid/ head head head nav foot foot foot main main
42. E { grid-template-areas: 'head head head' 'nav main main' 'foot foot foot'; } grid layout .a { grid-area: 'head'; } .b { grid-area: 'main'; } http://dev.w3.org/csswg/css-grid/ head head head nav foot foot foot main main b a
43. fonts http://dev.w3.org/csswg/css-fonts/ E { font-kerning: normal; font-variant-caps: small-caps; }
44. E { content: icon; icon: url('foo.png'); } user interface http://dev.w3.org/csswg/css-ui/
45. E { background-image: image('foo.svg#xywh=0,0,200,120'); } images http://dev.w3.org/csswg/css-images/
46. E { background-image: image('foo.svg#xywh=0,0,200,120'); } images http://dev.w3.org/csswg/css-images/
47. E { background-image: image('foo.svg','foo.png',#F00); } images http://dev.w3.org/csswg/css-images/
48. E { background-image: image-set( 'foo.png' 1x, 'foo-hi.png' 2x, 'foo-print.png' 600dpi, ); } images http://dev.w3.org/csswg/css-images/
49. #a { background: element(#b); } images http://dev.w3.org/csswg/css-images/ a b b a + =
50. E { background-image: conic-gradient(#000,#FFF,#000); } images http://dev.w3.org/csswg/css-images/
51. images E { background-image: cross-fade(50%, 'foo.png', 'bar.png'); } http://dev.w3.org/csswg/css-images/
52. images E { background-image: cross-fade(50%, 'foo.png', 'bar.png'); } http://dev.w3.org/csswg/css-images/
53. E { color: hwb(180deg,50%,75%,1); } color http://dev.w3.org/csswg/css-color/
54. E { color: gray(75%,1); } color http://dev.w3.org/csswg/css-color/
55. E { color: device-cmyk(1,1,0.5,0,1); } color http://dev.w3.org/csswg/css-color/
56. E { color: color(blue (s + 10%)); } color http://dev.w3.org/csswg/css-color/
57. ADOBE.
58. E { filter: blur(2px) grayscale(0.5); } filters http://dev.w3.org/fxtf/filters/
59. filters http://dev.w3.org/fxtf/filters/ @filter foo { src: url('simple2.vs') format('x-shader/x-vertex'); } E { filter: custom(foo); }
60. blending E { mix-blend-mode: multiply; } http://dev.w3.org/fxtf/compositing-1/
61. blending E { background-blend-mode: difference; } http://dev.w3.org/fxtf/compositing-1/
62. masking E { mask-image: url('foo.png'); } http://dev.w3.org/fxtf/masking/ + =
63. masking E { clip-path: circle(50%,50%,200px); } http://dev.w3.org/fxtf/masking/
64. masking E { clip-path: circle(50%,50%,200px); } http://dev.w3.org/fxtf/masking/
65. regions .a { flow-into: 'foo'; } .b { flow-from: 'foo'; } http://dev.w3.org/csswg/css-regions/ a b
66. regions http://dev.w3.org/csswg/css-regions/ .b, .c, .d { flow-from: 'foo'; } c b d
67. exclusions http://dev.w3.org/csswg/css-exclusions/ E { position: absolute;
68. exclusions http://dev.w3.org/csswg/css-exclusions/ E { position: absolute; wrap-flow: both; }
69. shapes http://dev.w3.org/csswg/css-shapes/ E { shape-outside: circle(50%,50%,400px); } E { shape-inside: circle(50%,50%,800px); }
70. YOU.
71. @supports (display: flex) {…} document.querySelector('E'); <element>…</element>
72. custom properties :root { var-brand: #F00; } h1 { border-color: var(brand); color: var(brand); } http://dev.w3.org/csswg/css-variables/
73. custom properties :root { var-brand: #F00; } .foo { var-brand: #00F; } <style scoped>…</style> http://dev.w3.org/csswg/css-variables/
74. mixins T.B.D.
75. hierarchy .foo {…} .foo h1 {…} .foo h1 em {…} .foo ul {…} .foo {… & h1 {… & em {…} } & ul {…} }
76. “When can we use them?”
77. 1. Browser update cycles are getting more frequent. 2. Old IE is dying fast.
78. IE :'-(
80. 1. Your environment. 2. How much you want it.
81. tack!
82. demos • philipwalton.github.io/solved-by-flexbox/ • adobe-webplatform.github.io/regions-adaptive/ • codepen.io/adobe/ NB: You will need Chrome Canary for many of these demos, and may have to enable ‘experimental web platform features’ in about:flags.