Hasty Treat - The Status of Element Queries / Container Queries
Mar 2, 2020
Discover the innovative world of container queries and their potential to revolutionize responsive design in web development. The speakers discuss the complex challenges of implementing these features, alongside current progress in the field. They dive into effective error handling with tools like Sentry, shedding light on how to streamline your workflow. The conversation touches on the compatibility hurdles developers face with new CSS features, all while maintaining a humorous take on the tech landscape. Excitement for the future of web design radiates throughout!
24:16
forum Ask episode
web_stories AI Snips
view_agenda Chapters
auto_awesome Transcript
info_circle Episode notes
insights INSIGHT
Container Queries
Media queries style elements based on viewport size.
Container/element queries will style elements based on their container's size.
question_answer ANECDOTE
Card Grid Use Case
Scott Tolinsky wants container queries for a card grid component.
The component's cards should change based on their width, not the viewport width, as media queries do.
insights INSIGHT
Complexity of Container Queries
Creating container queries isn't as simple as changing media queries.
It requires fundamental browser engine changes, which are complex and time-consuming.
Get the Snipd Podcast app to discover more snips from this episode
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’s happening with your errors, track them with Sentry. 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 Sentry.io and using the coupon code “tastytreat”.
Some of the requirements may need a fundamental change to browser engines
May be very impractical and take a long time
“Did 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’t mean Houdini!” ~ Brian Kardell
8:56 - What’s been happening?
Lots of conversations
Dead ends
“How do we make this into more solvable problems?” and “How do we actually make some progress, mitigate risk - take a step, and and actually get something to developers?” ~ Brian Kardell
“A 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.” ~ Brian Kardell
Or a system based on resizeObserver
“In 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 ‘closer’ to a path that might be paveable.” ~ Brian Kardell
Syntax - Tasty Web Development Treats