In search of element queries

Components need to be able to adapt to their available space, not the size of the viewport. Unfortunately, the closest tool we’ve had for addressing this need has been the Media Query, which was not designed for this purpose. As a result, we micromanage our components at different screen sizes - increasing the complexity and brittleness of the component design and lose modularity when a component has a new implementation.
This is a talk exploring element based queries - container queries and our need to go beyond the media query.

Transcript

1. in search of element queries
2. The media query
3. We understood the web in pages
4. http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/
5. Let content determine the breakpoints
6. Multiple breakpoints per piece of content
7. Rising Complexity
8. Average: 264 Media queries 50+ Websites
9. Highest was 905 Media queries
10. Ubiquitous frameworks start around 54
12. Media queries are limited to screens
13. We think in design systems and modularity
14. Our components are built to exist in many contexts
19. t good mate of modular systems The element query
23. The circular dependency problem
25. the successor Container queries
26. http://alistapart.com/article/container-queries-once-more-unto-the-breach
27. This still needs to be solved, and now we know how not to solve it: elements can’t be restyled based on their own properties. - Mat Marquis “
29. min-width (30 em) default component
30. Realising a world of container queries
31. https://viljamis.com/2014/molten-leading/
32. https://github.com/viljamis/Molten-Leading
33. http://jxnblk.com/fitter-happier-text/
34. font-size: 100% is related to parent font size
35. What could make all of this possible: If font size could be scaled on container
36. Not real CSS, I totally made this up line-height: calc(1.5em + 0.1ctw)
37. Choose how elements adapt in different spaces
38. http://danielmall.com/articles/content-display-patterns/
41. An article preview at different sizes http://lincolnloop.github.io/element-queries-example/
42. A subscription form
43. An author bio, or comment
44. Element flow Properties which automatically adapt to space
45. Flex wrap: Two fixed widths 20 rem 30 rem = 50 rem +
47. Less than 50 rem space available
48. Flex-grow: 1
50. What if we wanted to go wider? 50 rem
51. Columns: 20rem 70 rem
52. Columns: 20rem 90 rem
53. http://chriswrightdesign.github.io/element-flow/flex-wrap/
54. The same technique: applied to forms http://codepen.io/chriswrightdesign/pen/EKwZMW/
55. The same technique: applied to a short bio http://codepen.io/chriswrightdesign/pen/NNapBN
56. http://chriswrightdesign.github.io/element-flow/flex-wrap/
58. You can even use Flex-shrink to give up space inside a container
59. 9/13 bugs listed on Flexbugs are IE 10 & 11
60. Flexbox has better support than @supports
61. CSS Grid will have its own way of managing space
62. What could make the technique work better? 1. Column breaks proper implementation 2. Column-fill & column-span
63. 2 1 3 Container sized source ordering
65. Display: contents Collapses the box of an element
67. 1 2 3 Problem: Flex is parent and child, not any deeper
68. 1 2 3
69. 1 2 3
70. 2 2 1 3 Collapse the parent
71. Ordering can be problematic for keyboard access
72. http://tink.uk/flexbox-the-keyboard-navigation-disconnect/
73. Authors must use order only for visual, not logical, reordering of content. - The spec “
74. What could make container source ordering work better? 1. A context element 2. Flagging alternate source order in markup 3. If the spec/browsers matched how Firefox does it
75. Picture element, but for containers
76. SVG can have its own document context
78. SVG can have its own document context
79. <foreignObject> lets you embed HTML inside SVG https://developer.mozilla.org/en/docs/Web/SVG/Element/foreignObject
82. Picture, controlled by space not screen http://chriswrightdesign.github.io/demo-picturesvg/
84. We could even put that SVG in a Picture element…
85. Give <picture> a flag to be read in different context like iFrame and SVG So how could we avoid having to do this hack? <picture context=“container”>
86. http://codepen.io/dudleystorey/pen/Geprd Container-based responsive tables
87. Container-based responsive tables http://dbushell.com/2016/03/04/css-only-responsive-tables/
89. We don’t have real container queries yet…
90. We’re being encouraged to create libraries to experiment Think what picture fill was to picture
91. Write less code. Faster performance. We need this natively in browsers
92. Container Queries prollyfill https://github.com/ausi/cq-prolyfill
93. eq.js https://github.com/snugug/eq.js elementQuery https://github.com/tysonmatanich/elementQuery CSS Element queries http://marcj.github.io/css-element-queries/ Boomqueries http://boomtownroi.github.io/boomqueries/ Scoped Media queries https://github.com/filamentgroup/scoped-media-query Libraries based on the original element query
94. This is not a solved problem yet
95. Maybe the solution is many solutions Responsive images came in four parts
97. @cwrightdesign Thank you.