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

In search of element queries

C44f47e1f9bcc969d1b873aca4211c46?s=47 Chris wright
April 08, 2016

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.


Chris wright

April 08, 2016


  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

  11. None
  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

  15. None
  16. None
  17. None
  18. None
  19. t good mate of modular systems The element query

  20. None
  21. None
  22. None
  23. The circular dependency problem

  24. None
  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 “
  28. None
  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/

  39. None
  40. None
  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 +
  46. None
  47. Less than 50 rem space available

  48. Flex-grow: 1

  49. None
  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/

  57. None
  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

  64. None
  65. Display: contents Collapses the box of an element

  66. None
  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

  77. None
  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

  80. None
  81. None
  82. Picture, controlled by space not screen http://chriswrightdesign.github.io/demo-picturesvg/

  83. None
  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/

  88. None
  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

  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
  96. None
  97. @cwrightdesign Thank you.