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

In search of element queries

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
Tweet

More Decks by Chris wright

Other Decks in Design

Transcript

  1. in search
    of
    element
    queries

    View Slide

  2. The media query

    View Slide

  3. We understood the web in pages

    View Slide

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

    View Slide

  5. Let content
    determine the
    breakpoints

    View Slide

  6. Multiple breakpoints
    per piece of content

    View Slide

  7. Rising
    Complexity

    View Slide

  8. Average: 264 Media queries
    50+ Websites

    View Slide

  9. Highest was 905 Media queries

    View Slide

  10. Ubiquitous frameworks start around 54

    View Slide

  11. View Slide

  12. Media queries are limited to screens

    View Slide

  13. We think in design systems and modularity

    View Slide

  14. Our components are built to exist in many contexts

    View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. View Slide

  19. t
    good mate
    of modular
    systems
    The element query

    View Slide

  20. View Slide

  21. View Slide

  22. View Slide

  23. The circular dependency problem

    View Slide

  24. View Slide

  25. the successor
    Container queries

    View Slide

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

    View Slide

  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

    View Slide

  28. View Slide

  29. min-width (30 em)
    default component

    View Slide

  30. Realising a world of container queries

    View Slide

  31. https://viljamis.com/2014/molten-leading/

    View Slide

  32. https://github.com/viljamis/Molten-Leading

    View Slide

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

    View Slide

  34. font-size: 100% is related to parent font size

    View Slide

  35. What could make all of this possible:
    If font size could be scaled on container

    View Slide

  36. Not real CSS, I totally made this up
    line-height: calc(1.5em + 0.1ctw)

    View Slide

  37. Choose how elements adapt in different spaces

    View Slide

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

    View Slide

  39. View Slide

  40. View Slide

  41. An article preview at different sizes
    http://lincolnloop.github.io/element-queries-example/

    View Slide

  42. A subscription form

    View Slide

  43. An author bio, or comment

    View Slide

  44. Element flow
    Properties which automatically adapt to space

    View Slide

  45. Flex wrap: Two fixed widths
    20 rem 30 rem = 50 rem
    +

    View Slide

  46. View Slide

  47. Less than 50 rem space available

    View Slide

  48. Flex-grow: 1

    View Slide

  49. View Slide

  50. What if we wanted to go wider?
    50 rem

    View Slide

  51. Columns: 20rem
    70 rem

    View Slide

  52. Columns: 20rem
    90 rem

    View Slide

  53. http://chriswrightdesign.github.io/element-flow/flex-wrap/

    View Slide

  54. The same technique: applied to forms
    http://codepen.io/chriswrightdesign/pen/EKwZMW/

    View Slide

  55. The same technique: applied to a short bio
    http://codepen.io/chriswrightdesign/pen/NNapBN

    View Slide

  56. http://chriswrightdesign.github.io/element-flow/flex-wrap/

    View Slide

  57. View Slide

  58. You can even use Flex-shrink to give up space inside a container

    View Slide

  59. 9/13 bugs
    listed on
    Flexbugs
    are IE 10 & 11

    View Slide

  60. Flexbox
    has better support
    than @supports

    View Slide

  61. CSS Grid will have its own way of managing space

    View Slide

  62. What could make the technique work better?
    1. Column breaks proper implementation
    2. Column-fill & column-span

    View Slide

  63. 2
    1
    3
    Container sized source ordering

    View Slide

  64. View Slide

  65. Display: contents
    Collapses the box of an element

    View Slide

  66. View Slide

  67. 1
    2
    3
    Problem: Flex is parent and child, not any deeper

    View Slide

  68. 1
    2
    3

    View Slide

  69. 1
    2
    3

    View Slide

  70. 2 2
    1
    3
    Collapse the parent

    View Slide

  71. Ordering can be problematic
    for keyboard access

    View Slide

  72. http://tink.uk/flexbox-the-keyboard-navigation-disconnect/

    View Slide

  73. Authors must use order only for visual,
    not logical, reordering of content.
    - The spec

    View Slide

  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

    View Slide

  75. Picture element, but for containers

    View Slide

  76. SVG can have its own document context

    View Slide

  77. View Slide

  78. SVG can have its own document context

    View Slide

  79. lets you embed HTML inside SVG
    https://developer.mozilla.org/en/docs/Web/SVG/Element/foreignObject

    View Slide

  80. View Slide

  81. View Slide

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

    View Slide

  83. View Slide

  84. We could even put that SVG in a Picture element…

    View Slide

  85. Give a flag to be read in different context like iFrame and SVG
    So how could we avoid having to do this hack?

    View Slide

  86. http://codepen.io/dudleystorey/pen/Geprd
    Container-based responsive tables

    View Slide

  87. Container-based responsive tables
    http://dbushell.com/2016/03/04/css-only-responsive-tables/

    View Slide

  88. View Slide

  89. We don’t have real container queries yet…

    View Slide

  90. We’re being encouraged to create libraries to experiment
    Think what picture fill was to picture

    View Slide

  91. Write less code. Faster performance.
    We need this natively in browsers

    View Slide

  92. Container Queries prollyfill
    https://github.com/ausi/cq-prolyfill

    View Slide

  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

    View Slide

  94. This is not a solved problem yet

    View Slide

  95. Maybe the solution is many solutions
    Responsive images came in four parts

    View Slide

  96. View Slide

  97. @cwrightdesign
    Thank you.

    View Slide