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

2. Hallo Freiburg!
3. Hi, I’m Chris Wright @cwrightdesign
4. Sydney, Australia
7. https://emails.hteumeuleu.com/trying-to-make-sense-of-gmail-css-support-e88cd7995cea
8. layout Changing the game
9. How we solve problems
10. influence the features tomorrow Features today
11. Avoiding absolutes
12. Experimentation
13. From hacks and experimentation
14. create APIs to our own CSS
15. shape the future how we can
16. Looking back
19. Complexity
20. The clearfix hack
21. The media query
26. Fluid image hack One defined dimension preserves aspect ratio
27. Fluid image hack One defined dimension preserves aspect ratio
28. Compressive images Images at double size with full compression https://www.filamentgroup.com/lab/compressive-images.html
29. We make creative hacks
30. Compressive images Fluid image hack Clearfix hack
31. Compressive images Fluid image hack Clearfix hack
32. Compressive images Sizes, Picture Fluid image hack Object-fit Clearfix hack Display: flowroot
33. Hacks are our desire paths
35. hacks are a creative use of features Brilliant
36. Unique properties
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
38. Quantity queries Combining nth selector with general sibling https://alistapart.com/article/quantity-queries-for-css
39. Dirty hacks Browser isolation
40. Hacks that never leave
41. Our needs often grow beyond the tools we have
42. Layout is always hacked
44. 60+ lines of code to define column behaviour Flexbox grid example
45. 35+ lines of code anytime you touch a media query Flexbox grid example
46. Now we have declarative grids
51. Fraction units, yay!
52. 1 Fr 1 / 1
53. 1Fr 1Fr 1 / 2 1 / 2
54. 1Fr 1Fr 1Fr 1 / 3 1 / 2 1 / 3 1 / 3
55. 1Fr 2Fr 1 / 3 2 / 3
57. Repeat (2, 1Fr) 1 / 2 1 / 2
59. Creating white space
61. grid-column-start: 2
62. Across rows and columns
64. grid-column: span 2;
65. 60 Lines of code reduced to 1 line
67. Building up complex grids
72. Flexible grids
77. Quantity queries meet Grid span
81. Variables add simplicity
82. Variables create relationships between values
86. Define how columns and spans collapse across viewports
87. Define how columns and spans collapse across viewports
88. Experimentation with values
89. Feature queries simplified
92. Testing Feature queries by using not
93. Components moving toward
94. From static pages to static devices
96. http://v3.danielmall.com/articles/content-display-patterns/
97. http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/
98. Increased complexity, poorer maintainability
99. Average: 264 Media queries Over 50 Websites
100. Media queries are restricted to viewports and media types
104. Define once, use anywhere
105. Available space is the constraint
106. http://danielmall.com/articles/content-display-patterns/
108. evolved Media queries
109. min-width (30 em) default component
111. Problems
112. Infinite loops
113. https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp CSS Parsing
114. Autonomous layout
115. Flex wrap and set widths
116. Flex wrap: Two fixed widths 320px 480px = 800px +
117. Less than 800px space available
118. Flex-grow: 1
119. In practice
120. The problem: expanding evenly
121. The problem: expanding evenly
122. The flex-grow: 9999 variant http://joren.co/flex-grow-9999-hack/
123. flex: 99999 flex: 1 Only one has room to grow
124. flex: 99999 flex: 1 Only one has room to grow
125. flex: 99999 flex: 1
128. Multi columns
129. Multi columns column-width: 600px
130. Multi columns column-width: 600px
131. Multi columns column-width: 600px
132. Flex wrap + Column-count: auto
135. columns: 300px
136. columns: 300px
138. Grid: Auto-fit and auto-fill
139. Component based imagery
140. SVG has its own document context
141. SVG can also embed HTML https://developer.mozilla.org/en/docs/Web/SVG/Element/foreignObject
143. an API to detect size changes ResizeObserver
145. window.onresize the old way of detecting
146. http://alistapart.com/article/container-queries-once-more-unto-the-breach
147. Element size relationships
151. Can it communicate with CSS?
152. We can use CSS Variables to communicate
153. Getting variables via JS
154. Setting variables via JS
155. Fluid Typography
157. http://jxnblk.com/fitter-happier-text/
158. https://www.smashingmagazine.com/2016/05/fluid-typography/
159. Font-size: 50ctw (not real CSS, I wish)
160. Size based on line length
161. ResizeObserver Container based fluid typography
164. In the browser
169. Useful for techniques that use calc()
170. An unfortunate limitation in CSS
172. CSS can’t range match a selector
174. Communicate shape
175. A preview might exist with different shapes http://lincolnloop.github.io/element-queries-example/
176. 1:1 3:5 4:3 5:1
177. 1:1 3:5 4:3 5:1 Container shapes as ratio
179. Media queries are very good at this job
180. Let’s hack media queries!
181. @media (min-width: var(—size)) { Not valid
182. window.matchMedia(condition).matches
183. Turns out we don’t even need to use them
184. Set the conditions in variables
185. ResizeObserver detects a change, read variables
186. check if they match, add the class
188. But browser support!
189. Looking ahead
190. Browser APIs Open for CSS
191. Houdini
192. Houdini What will mean for the web
193. Animation Paint Layout Custom @rules More powerful custom properties
194. Custom @rules
195. @container-shape(square) {}
196. @container(min-width: 400px) {}
197. Layout Designing Browser
198. Layout Black box
199. display: layout(Fluxbox)
201. https://github.com/w3c/css-houdini-drafts/blob/master/css-layout-api/EXPLAINER.md
202. Child element positioning and placement
203. Ability for child elements to have flexbox/grid behaviour
204. Layout fragmentation (Multi columns etc)
205. how we build for browsers Redefine
206. How can we help shape the future?
207. Hacks show intent
209. Advocacy creates impact
211. Features will be supported one day
212. Early Feedback loop
213. WICG https://www.w3.org/community/wicg/
214. Houdini Task force https://github.com/w3c/css-houdini-drafts
215. CSS WG
216. Visibility
217. Thank you https://github.com/chriswrightdesign/changing-the-layout-game-talk