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

Breaking up with media queries

Patrick Fulton
February 23, 2016
Technology
10
1.4k

Breaking up with media queries

Responsive Web Design ushered in one of the most fundamental shifts our industry has ever seen. Now, nearly six years since Ethan Marcott’s original article was published on A List Apart, we’ve begun to see RWD evolve. And, subsequently our processes, workflows, and tools have begun to evolve as well.

As developers and designers, we’re familiar with change being ever-present. As we address complex problems with solutions such as component-based design and development (aka Atomic Design), we’re faced with wondering: do our browsers’ viewport heights and widths really provide everything we need to inform our atoms, molecules, and organisms?

Enter: element queries – or, as we’ve recently reshaped them: container queries.

We’ll take a dive into what container queries are, how to use them, and when they might win out over our old friend the media query.

Patrick Fulton

February 23, 2016
Tweet

More Decks by Patrick Fulton

See All by Patrick Fulton
Storybook for React | ReactPGH Meetup
patrickfulton
0
85
Element (Container) Queries - BDConf DC - October 2015
patrickfulton
3
190
Punk Rock, Long Distance Running, and Web Development
patrickfulton
1
97
Element Queries - Converge 2015
patrickfulton
2
300
Be Kind To Your Future Self
patrickfulton
1
240

Other Decks in Technology

See All in Technology
신뢰할 수 있는 AI 검색 엔진을 만들기 위한 Liner의 여정
huffon
0
370
visionOSでの空間表現実装とImmersive Video表示について / ai-immersive-visionos
cyberagentdevelopers
PRO
1
110
Apple/Google/Amazonの決済システムの違いを踏まえた定期購読課金システムの構築 / abema-billing-system
cyberagentdevelopers
PRO
1
220
ガチ勢によるPipeCD運用大全〜滑らかなCI/CDを添えて〜 / ai-pipecd-encyclopedia
cyberagentdevelopers
PRO
3
210
大規模データ基盤チームのオンプレTiDB運用への挑戦 / dpu-tidb
cyberagentdevelopers
PRO
1
110
よくわからんサービスについての問い合わせが来たときの強い味方 Amazon Q について
kazzpapa3
0
220
ネット広告に未来はあるか？「3rd Party Cookie廃止とPrivacy Sandboxの効果検証の裏側」 / third-party-cookie-privacy
cyberagentdevelopers
PRO
1
130
2024-10-30-reInventStandby_StudyGroup_Intro
shinichirokawano
1
640
[JAWS-UG金沢支部×コンテナ支部合同企画]コンテナとは何か
furuton
3
260
Amazon FSx for NetApp ONTAPを利用するにあたっての要件整理と設計のポイント
non97
1
160
【若手エンジニア応援LT会】AWSで繋がり、共に成長！ ～コミュニティ活動と新人教育への挑戦～
kazushi_ohata
0
180
カメラを用いた店内計測におけるオプトインの仕組みの実現 / ai-optin-camera
cyberagentdevelopers
PRO
1
120

Featured

See All Featured
GraphQLとの向き合い方2022年版
quramy
43
13k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
41
2.1k
The Cost Of JavaScript in 2023
addyosmani
45
6.6k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Practical Orchestrator
shlominoach
186
10k
KATA
mclloyd
29
13k
The Language of Interfaces
destraynor
154
24k
Being A Developer After 40
akosma
86
590k
Speed Design
sergeychernyshev
24
570
Product Roadmaps are Hard
iamctodd
PRO
48
10k

Transcript

  1. None

  2. Breaking up with media queries Patrick Fulton @patrickfulton February 2016

    // Refresh Pittsburgh

  3. Released June 2007 Happy (almost) 9 yr Anniversary!

  4. None

  5. bit.ly/1gSKdcl

  6. None

  7. The Internet in 2016

  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 (min-width: 500px) { .product { background-color: green; } } @media (min-width: 700px) { .product { background-color: blue; } }
  31. None

  32. ❤ Element Queries ❤ Currently, element queries DO NOT have

    native browser support.
  33. None

  34. 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; }

  35. Polyfills! elementQuery Tyson Matanich http://is.gd/mRliE5 “Media Queries Are Not the

    Answer: Element Query Polyfill”
 http://is.gd/cotama

  36. 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)

  37. Polyfills! BoomQueries BoomTown http://is.gd/ejubum

  38. 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

  39. Polyfills! eq.js Sam Richard | @snugug http://is.gd/cadeyi

  40. 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; }

  41. In Production CNN Weather.com Telemundo.com

  42. None

  43. Code Responsibly Progressive Enhancement

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

    Consider where components will appear

  45. 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

  46. “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

  47. 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

  48. 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.
  49. None
  50. None
  51. None
  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. More Resources EQCSS http://elementqueries.com/ Elementary http://is.gd/nmsve8 The State of Element/Container

    Queries
 http://is.gd/xxzlzu React Container Query
 http://is.gd/9skv6d

  57. Bonus BoomQueries + React/Angular/Ember/Backbone http://is.gd/wzge86 eq.js + “dynamic nodes” -

    eqjs.refreshNodes()
 http://is.gd/eyw9vh


  58. Breaking up with media queries Patrick Fulton @patrickfulton February 2016

    // Refresh Pittsburgh