Give CSS3 Some Love / FOWD2015

Give CSS3 Some Love
Future of Web Design 2015 - Rising Stars

Transcript

1. Give CSS3 Some Love
2. Because CSS4 Is Coming!
3. Disclaimer:
4. CSS4 Isn’t A Thing
5. CSS Level 4 W orking Drafts
6. CSS2.1 Last Major Version
7. CSS Level 4 = CSS3 = CSS
8. Confusing Much?
9. What Am I Going T o T alk About
10. CSS3 Usage
11. How We Can Improve IT
12. What’s Coming Soon
13. @dancork
14. Holiday Extras
15. What’s The Problem
16. CSS3 Usage is Poor
17. T op 1 Million Websites http://trends.builtwith.com/css
18. Max Width 270,538
19. Max Width 27%
20. Min Width 209,608
21. Min Width 21%
22. Media Queries 48%
23. Chrome Anonymous Stats https://www .chromestatus.com/metrics/css/popularity
24. transform 42.5%
25. box-sizing 74.5%
26. T oo often the web interface ends up being the lowest common denominator Henrik Joreteg
27. Engineering a UI is complex
28. little control over the environment
29. Does the ux NEED to be the same?
30. Who uses multiple browsers?
31. elephant in the room
33. http://caniuse.com/usage_table.php
34. IE8 1.38%
35. >98% support CSS3
36. CSS is unique
37. Passes over unknown properties
38. Less than half of web is responsive! IE is dying CSS is your friend CSS3 usage is poor
39. What Can Be Done?
40. Avoid vendor prefixes
41. border-radius: 5px;
42. -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px;
43. Will become outdated
44. technical debt
45. T ool up with Autoprefixer postcss/autoprefixer
46. W rite pure css
47. W orks with LESS and SASS
48. CLI, GRUNT , GULP or WEBP ACK
49. Minimises T echnical Debt
50. Media queries
53. Mobile first?
54. Majority of mobile browsers support queries
55. FOCUS ON JOBS, THEN SCREENS, BUT NEVER DEVICES https://blog.intercom.io/why-mobile-first-may-already-be-outdated/ Paul Adams
56. Box Sizing
57. Old box model was stupid
58. Especially when building a grid
59. Border Box
60. Feb 1 International Box Sizing Awareness Day
61. https://css- tricks.com/ international-box- sizing-awareness- day/
62. OMG! It works in IE8
63. html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }
64. T ransform
65. T op/Left vs T ranslate
66. Positioning T op/Left
67. UI animation T ranslate
68. top/left has large paint time
69. 3D transforms hardware accelerated
70. a { transform: translate3d(0,0,0); } a { transform: scale3d(1,1,1); }
71. a { transform: translateZ(0); } a { transform: scaleZ(1); }
72. no jank
73. not everything is accelerated
74. transform:translate transform:scale transform:rotate opacity
75. but you can do a lot with those!
76. Scale & Mouse events
77. Making Material Design https://www .youtube.com/watch?v=rrT6v5sOwJg
80. High Performance Animation http://www .html5rocks.com/en/tutorials/speed/high-performance-animations/
81. csstriggers. com
82. Vendor prefixes are stupid Go responsive, consider default Border-box all the things T ransform for UI Animation
83. The New Stuff
84. Feature Queries
85. @supports
86. @supports (display:flex) { section { display: flex } }
87. @supports (column-width: 20rem) and (column-span: all) { div { column-width: 20rem } div h2 { column-span: all } }
88. Limited Support?
89. JavaScript API
90. CSS.supports()
91. Polyfill
92. Media Queries
93. light-level
94. dim normal washed
95. @media (light-level: dim) { .app { background: black; color: white; } } @media (light-level: washed) { .app { background: white; color: black; } }
96. hover
97. none on-demand hover
98. .element .tooltip { /* hide tooltip */ } @media (hover) { .element .inline-tooltip { /* hide inline tooltip */ } .element:hover .tooltip { /* show tooltip */ } }
99. pointer
100. none coarse fine
101. .link { padding 1em; } @media (pointer:fine) { .link { padding: 0.25em; } }
102. any-hover any-pointer
103. pointer hover none hover course fine smartphones, touch screens stylus-based screens mouse, touch pad Nintendo Wii, Kinect
104. custom media queries
105. @custom-media --small (max-width: 520px); @media (--small) { /* styles for small viewport */ }
106. PostCSS postcss/postcss-custom-media
107. ranges
108. @media (min-width: 600px) and (max-width: 1000px) {}
109. @media (width > 600px) and (width < 1000px) {}
110. @media (600px < width < 1000px) {}
111. PostCSS postcss/postcss-media-minmax
112. Relational :has()
113. div:has(p){ background: #FF0000; }
114. Change CSS based on content
115. TO-DO
116. <div class=“todo”> <input /> <ul> </ul> </div>
117. <div class=“todo”> <input /> <ul class=“empty”> </ul> </div>
118. <div class=“todo”> <input /> <ul style=“display:none;”> </ul> </div>
119. .todo ul { display:none; } .todo ul:has(li) { display:block; }
120. .todo ul:not(:has(li)) { display:none; }
121. Ordering is important
122. .todo ul:not(:has(li)) { display:none; }
123. .todo ul:has(:not(li)) { display:none; }
124. Browser support is limited
125. It’s non existent
126. We can try it
127. Polyfill.js philipwalton/polyfill
128. Polyfill({selectors: [“:has"]}) .doMatched(function (rules) { rules.each(function (rule) { $(rule.getSelectors()) .css(rule.getDeclaration()); }); });
129. Feature queries removes reliance on JavaScript :has() is too awesome!!! New media queries, understand the environment better
130. last decade's "pretty good” is today’s "a bit shit" Jake Archibald
131. Thank Y ou TWITTER: @DANCORK SLIDES: SPEAKERDECK.COM/DANCORK/FOWD2015