Changing the layout game (Smashing version)

A journey from hacks and experimentation to open browser APIs that allow us to create our own CSS. This is a talk about how ideas and hacks become browser features and where the future of that is likely to be.

Transcript

1. View Slide

2. Hallo Freiburg!
   

   View Slide

3. Hi, I’m Chris Wright
   @cwrightdesign
   

   View Slide

4. Sydney,
   Australia
   

   View Slide

5. View Slide

6. View Slide

7. https://emails.hteumeuleu.com/trying-to-make-sense-of-gmail-css-support-e88cd7995cea
   

   View Slide

8. layout
   Changing
   the game
   

   View Slide

9. How we
   solve problems
   

   View Slide

10. influence the features tomorrow
    Features today
    

    View Slide

11. Avoiding absolutes
    

    View Slide

12. Experimentation
    

    View Slide

13. From hacks and experimentation
    

    View Slide

14. create
    APIs to
    our own CSS
    

    View Slide

15. shape the future
    how we can
    

    View Slide

16. Looking back
    

    View Slide

17. View Slide

18. View Slide

19. Complexity
    

    View Slide

20. The clearfix hack
    

    View Slide

21. The media query
    

    View Slide

22. View Slide

23. View Slide

24. View Slide

25. View Slide

26. Fluid image hack
    One defined dimension
    preserves aspect ratio
    

    View Slide

27. Fluid image hack
    One defined dimension
    preserves aspect ratio
    

    View Slide

28. Compressive images
    Images at double size with full
    compression
    https://www.filamentgroup.com/lab/compressive-images.html
    

    View Slide

29. We make creative hacks
    

    View Slide

30. Compressive images
    Fluid image hack
    Clearfix hack
    

    View Slide

31. Compressive images
    Fluid image hack
    Clearfix hack
    

    View Slide

32. Compressive images Sizes, Picture
    Fluid image hack Object-fit
    Clearfix hack Display: flowroot
    

    View Slide

33. Hacks are our desire paths
    

    View Slide

34. View Slide

35. hacks
    are a creative use of features
    Brilliant
    

    View Slide

36. Unique
    properties
    

    View Slide

37. Block padding is relative
    to the width of the element
    Intrinsic ratio
    padding-top: 56.25%
    https://alistapart.com/article/creating-intrinsic-ratios-for-video
    

    View Slide

38. Quantity queries
    Combining nth selector
    with general sibling
    https://alistapart.com/article/quantity-queries-for-css
    

    View Slide

39. Dirty hacks
    Browser isolation
    

    View Slide

40. Hacks that
    never leave
    

    View Slide

41. Our needs often
    grow beyond the tools we have
    

    View Slide

42. Layout is always hacked
    

    View Slide

43. View Slide

44. 60+ lines of code to define
    column behaviour
    Flexbox grid example
    

    View Slide

45. 35+ lines of code anytime
    you touch a media query
    Flexbox grid example
    

    View Slide

46. Now we have declarative grids
    

    View Slide

47. View Slide

48. View Slide

49. View Slide

50. View Slide

51. Fraction units, yay!
    

    View Slide

52. 1 Fr
    1 / 1
    

    View Slide

53. 1Fr 1Fr
    1 / 2 1 / 2
    

    View Slide

54. 1Fr 1Fr 1Fr
    1 / 3 1 / 2
    1 / 3 1 / 3
    

    View Slide

55. 1Fr 2Fr
    1 / 3 2 / 3
    

    View Slide

56. View Slide

57. Repeat (2, 1Fr)
    1 / 2 1 / 2
    

    View Slide

58. View Slide

59. Creating white space
    

    View Slide

60. View Slide

61. grid-column-start: 2
    

    View Slide

62. Across rows and columns
    

    View Slide

63. View Slide

64. grid-column: span 2;
    

    View Slide

65. 60 Lines of code reduced to 1 line
    

    View Slide

66. View Slide

67. Building up complex grids
    

    View Slide

68. View Slide

69. View Slide

70. View Slide

71. View Slide

72. Flexible grids
    

    View Slide

73. View Slide

74. View Slide

75. View Slide

76. View Slide

77. Quantity queries meet Grid span
    

    View Slide

78. View Slide

79. View Slide

80. View Slide

81. Variables add
    simplicity
    

    View Slide

82. Variables create relationships between values
    

    View Slide

83. View Slide

84. View Slide

85. View Slide

86. Define how columns and spans collapse across viewports
    

    View Slide

87. Define how columns and spans collapse across viewports
    

    View Slide

88. Experimentation with values
    

    View Slide

89. Feature queries simplified
    

    View Slide

90. View Slide

91. View Slide

92. Testing Feature queries by using not
    

    View Slide

93. Components
    moving toward
    

    View Slide

94. From static pages to static devices
    

    View Slide

95. View Slide

96. http://v3.danielmall.com/articles/content-display-patterns/
    

    View Slide

97. http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/
    

    View Slide

98. Increased complexity,
    poorer maintainability
    

    View Slide

99. Average: 264 Media queries
    Over 50 Websites
    

    View Slide

100. Media queries are restricted
     to viewports and media types
     

     View Slide

101. View Slide

102. View Slide

103. View Slide

104. Define once, use anywhere
     

     View Slide

105. Available space is the constraint
     

     View Slide

106. http://danielmall.com/articles/content-display-patterns/
     

     View Slide

107. View Slide

108. evolved
     Media queries
     

     View Slide

109. min-width (30 em)
     default component
     

     View Slide

110. View Slide

111. Problems
     

     View Slide

112. Infinite loops
     

     View Slide

113. https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp
     CSS Parsing
     

     View Slide

114. Autonomous layout
     

     View Slide

115. Flex wrap and set widths
     

     View Slide

116. Flex wrap: Two fixed widths
     320px 480px = 800px
     +
     

     View Slide

117. Less than 800px space available
     

     View Slide

118. Flex-grow: 1
     

     View Slide

119. In practice
     

     View Slide

120. The problem: expanding evenly
     

     View Slide

121. The problem: expanding evenly
     

     View Slide

122. The flex-grow: 9999 variant
     http://joren.co/flex-grow-9999-hack/
     

     View Slide

123. flex: 99999
     flex: 1
     Only one has room to grow
     

     View Slide

124. flex: 99999
     flex: 1
     Only one has room to grow
     

     View Slide

125. flex: 99999
     flex: 1
     

     View Slide

126. View Slide

127. View Slide

128. Multi columns
     

     View Slide

129. Multi columns
     column-width: 600px
     

     View Slide

130. Multi columns
     column-width: 600px
     

     View Slide

131. Multi columns
     column-width: 600px
     

     View Slide

132. Flex wrap + Column-count: auto
     

     View Slide

133. View Slide

134. View Slide

135. columns: 300px
     

     View Slide

136. columns: 300px
     

     View Slide

137. View Slide

138. Grid: Auto-fit and auto-fill
     

     View Slide

139. Component based imagery
     

     View Slide

140. SVG has its own
     document context
     

     View Slide

141. SVG can also embed HTML
     https://developer.mozilla.org/en/docs/Web/SVG/Element/foreignObject
     

     View Slide

142. View Slide

143. an API to detect size changes
     ResizeObserver
     

     View Slide

144. View Slide

145. window.onresize
     the old way of detecting
     

     View Slide

146. http://alistapart.com/article/container-queries-once-more-unto-the-breach
     

     View Slide

147. Element size relationships
     

     View Slide

148. View Slide

149. View Slide

150. View Slide

151. Can it communicate with CSS?
     

     View Slide

152. We can use CSS Variables to communicate
     

     View Slide

153. Getting variables via JS
     

     View Slide

154. Setting variables via JS
     

     View Slide

155. Fluid Typography
     

     View Slide

156. View Slide

157. http://jxnblk.com/fitter-happier-text/
     

     View Slide

158. https://www.smashingmagazine.com/2016/05/fluid-typography/
     

     View Slide

159. Font-size: 50ctw
     (not real CSS, I wish)
     

     View Slide

160. Size based on line length
     

     View Slide

161. ResizeObserver Container based
     fluid typography
     

     View Slide

162. View Slide

163. View Slide

164. In the browser
     

     View Slide

165. View Slide

166. View Slide

167. View Slide

168. View Slide

169. Useful for techniques that use calc()
     

     View Slide

170. An unfortunate limitation in CSS
     

     View Slide

171. View Slide

172. CSS can’t range match a selector
     

     View Slide

173. View Slide

174. Communicate shape
     

     View Slide

175. A preview might exist with different shapes
     http://lincolnloop.github.io/element-queries-example/
     

     View Slide

176. 1:1 3:5
     4:3
     5:1
     

     View Slide

177. 1:1 3:5
     4:3
     5:1
     Container shapes as ratio
     

     View Slide

178. View Slide

179. Media queries are very good at this job
     

     View Slide

180. Let’s hack media queries!
     

     View Slide

181. @media (min-width: var(—size)) {
     Not valid
     

     View Slide

182. window.matchMedia(condition).matches
     

     View Slide

183. Turns out we don’t even need to use them
     

     View Slide

184. Set the conditions in variables
     

     View Slide

185. ResizeObserver detects a change, read variables
     

     View Slide

186. check if they match, add the class
     

     View Slide

187. View Slide

188. But browser support!
     

     View Slide

189. Looking ahead
     

     View Slide

190. Browser APIs
     Open
     for CSS
     

     View Slide

191. Houdini
     

     View Slide

192. Houdini
     What
     will mean for the web
     

     View Slide

193. Animation
     Paint
     Layout
     Custom @rules
     More powerful custom properties
     

     View Slide

194. Custom @rules
     

     View Slide

195. @container-shape(square) {}
     

     View Slide

196. @container(min-width: 400px) {}
     

     View Slide

197. Layout
     Designing
     Browser
     

     View Slide

198. Layout Black box
     

     View Slide

199. display: layout(Fluxbox)
     

     View Slide

200. View Slide

201. https://github.com/w3c/css-houdini-drafts/blob/master/css-layout-api/EXPLAINER.md
     

     View Slide

202. Child element positioning and placement
     

     View Slide

203. Ability for child elements to
     have flexbox/grid behaviour
     

     View Slide

204. Layout fragmentation
     (Multi columns etc)
     

     View Slide

205. how we build for browsers
     Redefine
     

     View Slide

206. How can we help
     shape the future?
     

     View Slide

207. Hacks show intent
     

     View Slide

208. View Slide

209. Advocacy creates impact
     

     View Slide

210. View Slide

211. Features will be supported one day
     

     View Slide

212. Early Feedback loop
     

     View Slide

213. WICG
     https://www.w3.org/community/wicg/
     

     View Slide

214. Houdini Task force
     https://github.com/w3c/css-houdini-drafts
     

     View Slide

215. CSS WG
     

     View Slide

216. Visibility
     

     View Slide

217. Thank you
     https://github.com/chriswrightdesign/changing-the-layout-game-talk
     

     View Slide

218. View Slide