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

Element (Container) Queries - BDConf DC - October 2015

Element (Container) Queries - BDConf DC - October 2015

860caae5ecff157ca621ff51e8bba6ba?s=128

Patrick Fulton

October 23, 2015
Tweet

Transcript

  1. None
  2. Element Queries Patrick Fulton @patrickfulton October 2015 // BDConf DC

  3. Released June 2007 Happy 8.5 yr Anniversary!

  4. None
  5. bit.ly/1gSKdcl

  6. None
  7. The Internet in 2015

  8. Choose Your Weapons Fluid Grids Flexible Images Media Queries An

    Open Mind A New Way of Thinking
  9. Choose Your Weapons An Open Mind A New Way of

    Thinking
  10. “The web’s greatest strength, I believe, is often seen as

    a limitation, as a defect. It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all.” JOHN ALLSOPP “A Dao of Web Design” ALA #58 - April 7, 2000
  11. “The web’s greatest strength, I believe, is often seen as

    a limitation, as a defect. It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all.” JOHN ALLSOPP “A Dao of Web Design” ALA #58 - April 7, 2000
  12. Choose Your Weapons Fluid Grids Flexible Images Media Queries

  13. ❤ Media Queries ❤ Device Screen Color Aspect Ratio Orientation

    Resolution Height Width
  14. Media Queries .product { background-color: #ede5e2; } @media (min-width: 500px)

    { .product { background-color: green; } } @media (min-width: 700px) { .product { background-color: blue; } }
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. <body class="internal detail-view"> _category.scss _detail.scss _related.scss _callout.scss

  23. None
  24. None
  25. Element Queries

  26. IAN STORM TAYLOR “Media Queries are a Hack” http://bit.ly/1CRGquH “Writing

    modular code is about making small objects, and making them self-contained. Media queries don’t let you do that. In most cases, you don’t actually care about the width of the entire document (or screen), you care about the width of your element.”
  27. IAN STORM TAYLOR “Media Queries are a Hack” http://bit.ly/1CRGquH “Writing

    modular code is about making small objects, and making them self-contained. Media queries don’t let you do that. In most cases, you don’t actually care about the width of the entire document (or screen), you care about the width of your element.”
  28. Element Queries .product { background-color: red; } .product (min-width: 27em)

    { background-color: orange; }
  29. .product { background-color: red; } .product (min-width: 27em) { background-color:

    orange; } @media (min-width: 500px) { .product { background-color: green; } } @media (min-width: 700px) { .product { background-color: blue; } }
  30. .product { background-color: red; } .product (min-width: 27em) { background-color:

    orange; } @media } } @media } }
  31. None
  32. ❤ Element Queries ❤ Currently, element queries DO NOT have

    native browser support.
  33. Polyfills! Rely on data attributes (sometimes) <div class="product" data-eq-pts="small: 300,

    medium: 500"> And attribute selectors (also, sometimes) .container[data-eq-state$="small"], .container[data-eq-state$="medium"] { font-size: 1em; }
  34. Polyfills! elementQuery Tyson Matanich http://is.gd/mRliE5 “Media Queries Are Not the

    Answer: Element Query Polyfill”
 http://is.gd/cotama
  35. elementQuery scans the document.styleSheets collection for CSS rules <nav class="menu"

    min-width="500px"> .menu[min-width~="500px"] { background-color: #eee; } Then, it appends attributes to the appropriate selector(s)
  36. Polyfills! BoomQueries BoomTown http://is.gd/ejubum

  37. BoomQueries Uses JS to target selectors, then applies classes at

    defined breakpoints boomQueries.add('.component', [ [480, "component--md"], [600, "component--lg"] ]); .component.component--md { background: red; } .component.component--lg { background: orange; } Regular, ol’ CSS
  38. Polyfills! eq.js Sam Richard | @snugug http://is.gd/cadeyi

  39. eq.js Data attribute & values in HTML (data-eq-state gets appended

    on resize) <div data-eq-pts="small: 300, medium: 500” data-eq-state="small"> Uses attribute selectors to apply styles .container[data-eq-state$="small"], .container[data-eq-state$="medium"] { font-size: 1em; }
  40. In Production CNN Weather.com Telemundo.com

  41. None
  42. Code Responsibly Progressive Enhancement

  43. Set Your Goals 1. Rock-solid, mobile-first designs and code 2.

    Consider where components will appear
  44. Set Your Goals MEDIA QUERY Use when a module is

    always the full-width of viewport ELEMENT QUERY Use when a module appears in multiple contexts
  45. “Most every component we build has a basic and an

    enhanced experience, though many have one or more middle levels of enhancement as well. The level of enhancement that each component receives is simply based on the features that are supported by a browser” SCOTT JEHL “Grade the Components”
 http://is.gd/RvqtA0
  46. Grade Components, Not Browsers Each component gets a basic experience

    and an enhanced experience. Levels of enhancement are based on features that the browser supports
  47. PE for EQs Consider element queries to be a first-level

    enhancement. Fallback to mobile-first designs that work well in a single-column layout.
  48. None
  49. None
  50. None
  51. .product (min-width: 500px) { width: 499px; } Infinitely looping style

    changes #sadface
  52. None
  53. http://is.gd/xocuco USE CASES & REQUIREMENTS FOR CONTAINER QUERIES

  54. Recap •We ❤ media queries (but they’re kind of a

    hack) •Viewport size reporting via media queries is sometimes too broad. •We can get a component’s specific context by taking advantage of element container queries. •We can use element container queries today with the help of polyfills & progressive enhancement.
  55. Recap •Update your vocab (container queries, not element queries) •Experiment,

    experiment, experiment
  56. Element Container Queries Patrick Fulton @patrickfulton October 2015 // BDConf

    DC