Podcasts Technology Syntax - Tasty Web Development Treats Hasty Treat - The Status of Element Queries / Container Queries

Hasty Treat - The Status of Element Queries / Container Queries

Published: March 2, 2020, 2 p.m.

In this Hasty Treat, Scott and Wes talk about container queries, what they are and how you can use them.

Sentry - Sponsor

If you want to know what\u2019s happening with your errors, track them with\xa0Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting\xa0Sentry.io\xa0and using the coupon code \u201ctastytreat\u201d.

Show Notes

4:30 - The General Idea

6:20 - Problems

  • It\u2019s not as easy as, \u201chow do we write them\u201d
  • Some of the requirements may need a fundamental change to browser engines
    • May be very impractical and take a long time

\u201cDid you know, for example, that there are multiple many year long efforts with huge investments underway already aimed at unlocking many new things in CSS? There are - and I don\u2019t mean Houdini!\u201d ~ Brian Kardell

8:56 - What\u2019s been happening?

  • Lots of conversations
  • Dead ends

\u201cHow do we make this into more solvable problems?\u201d and \u201cHow do we actually make some progress, mitigate risk - take a step, and and actually get something to developers?\u201d ~ Brian Kardell

12:00 - Progress

  • Lot\u2019s of discussion
    • Goog, Moz, Apple, smart people
  • Not there yet
  • Big ideas that could go somewhere

.foo { display: grid; grid-template-columns: switch( (available-inline-size > 1024px) 1fr 4fr 1fr; (available-inline-size > 400px) 2fr 1fr; (available-inline-size > 100px) 1fr; default 1fr; ); }

\u201cA whole lot of the problems with existing ideas is that they heave to loop back through (expensive) phases potentially several times and make it (seemingly) impossible to keep CSS rendering in the same frame.\u201d ~ Brian Kardell

  • Or a system based on resizeObserver

\u201cIn the coming months I hope to continue to think about, explore this space and continue discussions with others. I would love to publish some research and maybe some new (functional) experiments with JS that aim to be \u2018closer\u2019 to a path that might be paveable.\u201d ~ Brian Kardell

Links Tweet us your tasty treats!