Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Changing the layout game (Smashing version)

Chris wright
September 12, 2017

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.

Chris wright

September 12, 2017
Tweet

More Decks by Chris wright

Other Decks in Programming

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. 2001

    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