$30 off During Our Annual Pro Sale. View Details »

Element Queries - Converge 2015

Element Queries - Converge 2015

Patrick Fulton

April 15, 2015
Tweet

More Decks by Patrick Fulton

Other Decks in Technology

Transcript

  1. Element Queries Patrick Fulton @patrickfulton April 2015 // ConvergeSE

  2. Released June 2007 Happy 8th Anniversary!

  3. None
  4. bit.ly/1gSKdcl

  5. The Internet in 2015

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

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

    Thinking
  8. “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
  9. “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
  10. Choose Your Weapons Fluid Grids Flexible Images Media Queries

  11. ❤️ Media Queries ❤️ Device Screen Color Aspect Ratio Orientation

    Resolution Height Width
  12. Media Queries .product { background-color: #ede5e2; } ! @media (min-width:

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

  21. None
  22. None
  23. Element Queries

  24. 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.”
  25. 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.”
  26. Element Queries .product { background-color: red; } ! .product (min-width:

    27em) { background-color: orange; }
  27. .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; } }
  28. ❤️ Element Queries ❤️ Currently, element queries DO NOT have

    native browser support.
  29. 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; }
  30. Polyfills! elementQuery Tyson Matanich http://bit.ly/1xmdvti ! ! “Media Queries Are

    Not the Answer: Element Query Polyfill”
 http://bit.ly/1DwQQzM
  31. 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)
  32. Polyfills! BoomQueries BoomTown http://bit.ly/1JAuqOP

  33. 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
  34. Polyfills! eq.js Sam Richard | @snugug http://bit.ly/1z6iSww

  35. 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; }
  36. In Production CNN Weather.com Telemundo.com

  37. Code Responsibly Progressive Enhancement

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

    Consider where components will appear
  39. 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
  40. “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”
  41. 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
  42. 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.
  43. http://bit.ly/1CJUrGL USE CASES & REQUIREMENTS FOR ELEMENT QUERIES

  44. 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 queries. •We can use element queries today with the help of polyfills & progressive enhancement.
  45. Recap •Experiment, experiment, experiment

  46. Element Queries Patrick Fulton @patrickfulton April 2015 // ConvergeSE