container queries

In this Hasty Treat, Scott and Wes talk about the arrival of CSS nesting. What is CSS nesting? How does CSS nesting work? And does it work in all browsers?

Show Notes

• 00:24 Welcome
• 02:31 What’s up with CSS nesting?
• "CSS Nesting just landed in Firefox 117 which puts it at 100% browser support! You can start using it today — here are 11 examples on how it works 👇
• 04:10 How does CSS nesting work?
• 09:23 What the ampersand does in nesting
• 21:05 It works with media queries
• 25:29 How does it work on all the browsers?
• 29:32 Lightning CSS
• Lightning CSS

Tweet us your tasty treats

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets
• Wes Bos on Bluesky
• Scott on Bluesky
• Syntax on Bluesky

In this Hasty Treat, Scott and Wes explain what container queries are, use cases for them, new units of measurement, and possible issues with container queries.

Show Notes

• 00:28 Welcome
• 01:46 What are Container Queries?
• Tweet about Container Queries
• 03:28 Use cases for Container Queries
• Home Assistant
• Can I Use?
• 06:11 The syntax of container queries
• 13:42 New units
• 22:27 Old iOS versions may cause issues

Tweet us your tasty treats

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Scott and Wes talk about new features coming to GitHub including Hey, GitHub!, GitHub Blocks, GitHub Copilot CLI, and more!

Linode - Sponsor

Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

Show Notes

• 00:23 Welcome
• 01:49 Responsive web design update
• 03:12 Let’s go
• 05:32 Sponsor: Linode
• 06:01 Sponsor: LogRocket
• 07:23 GitHub Next
• GitHub Next
• 08:17 GitHub Copilot for the CLI
• 11:52 Synthesizing results
• Syntax 540 - Responsive Design Techniques
• 13:31 Hey GitHub
• Syntax 481 - Supper Club Voice Coding with Pokey Rule
• 16:55 GitHub Blocks
• 18:58 GitHub Code search
• 21:36 GitHub Collaborative workspaces
• 23:43 GitHub Copilot for your own codebase
• 25:10 GitHub Copilot Radar
• 29:15 GitHub AI Pull Requests

Tweet us your tasty treats

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets

In this episode of Syntax, Wes and Scott talk through some modern responsive design techniques that you may not have heard of, or haven’t had a chance to use yet.

Linode - Sponsor

Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

Freshbooks - Sponsor

Get a 30 day free trial of Freshbooks at freshbooks.com/syntax

Show Notes

• 00:47 Clean Talk
• 03:55 The menu of responsive design
• Syntax 154 with Sara Soueidan
• 06:52 Responsive design basics
• 11:54 What should you build for first in 2022?
• 16:15 Shrink and grow until it looks bad
• 21:36 Menus in responsive
• 23:43 Sponsor: Linode
• 24:13 Grid systems
• 28:08 Grid and Flexbox
• CSS Grid Course
• Flexbox Course
• Can I Use
• 35:02 Sponsor: LogRocket
• 36:00 Container queries
• 45:56 FitText
• 49:12 How do you test these types of things?
• 51:15 Future techniques coming
• 53:28 Sponsor: Freshbooks
• 53:56 SIIIIICK ××× PIIIICKS ×××

××× SIIIIICK ××× PIIIICKS ×××

• Scott: Lutron Light switches
• Wes: Sunco Lighting BR30

Shameless Plugs

• Scott: LevelUp Tutorials
• Wes: Wes Bos Tutorials

Tweet us your tasty treats

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets

In this episode of Syntax, Scott and Wes talk with Miriam Suzanne about all things CSS — container queries, layers, scoping, and more!

Prismic - Sponsor

Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.

Sentry - Sponsor

If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

RevenueCat - Sponsor

RevenueCat makes it easy to build and manage iOS and Android in-app purchases. With a few lines of code, RevenueCat provides IAP infrastructure, customer analytics, data integrations, and gives you time back from dealing with edge cases and updates across the platforms. Created by developers, for developers, thousands of the world’s best apps use RevenueCat to power their in-app purchases and subscriptions. Get started for free at revenuecat.com.

Guests

• Miriam Suzanne

Show Notes

02:21 - When did you come on board with container queries?

10:27 - How would you declare specificity?

• Layer example:

 @layer default; @layer theme; @layer components;  @import url(theme.css) layer(theme);  @layer default {   audio[controls] {     display: block;   } }  

13:08 - What is your background?

18:20 - What are container queries?

22:06 - What is the background on contain? How does it work?

• https://developer.mozilla.org/en-US/docs/Web/CSS/contain

29:25 - Is it still under development?

• https://www.igalia.com/open-prioritization/index

33:51 - Have you tried the EQ polyfill from Johnathan Neal yet?

35:21 - How far out are we?

38:10 - What is Scope?

44:00 - How will MQ and CQ work together?

45:49 - Do you use inline and block?

48:44 - What browser do you use?

Links

• OddBird
• Susy
• Jonathan Neal
• FireFox
• Codepen
• https://github.com/w3c/csswg-drafts
• https://twitter.com/TerribleMia

××× SIIIIICK ××× PIIIICKS ×××

• Scott: Reelgood
• Wes: Embroidery machine

Shameless Plugs

• Miriam: OddBird
• Scott:
  • 1: SvelteKit
  • 2: Level Up Tutorials Pro Spring Sale - 50% off annual subscriptions!
• Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!

Tweet us your tasty treats!

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets

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

Show Notes

4:30 - The General Idea

• Toward Responsive Elements — Brian Kardell

6:20 - Problems

• It’s not as easy as, “how do we write them”
• 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

• ‘containment’ and ResizeObserver,
  • Implemented in all browsers in about 2 years

12:00 - Progress

• Lot’s 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; ); }

“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

• https://github.com/ZeeCoder/container-query
• https://github.com/FreddyFY/styled-container-query

Links

• uses.tech
• Ian Kilpatrick
• Jared Palmer’s tsdx

Tweet us your tasty treats!

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets