Lessons: 4Length: 35 minutes
- Overview
- Transcript
1.1 Welcome to the Course
Welcome to a new Envato Tuts+ course. I’m Adi, and in this course we’re exploring something called “container queries”.
When I first heard this term I was like… what? What’s a container query? Well, it’s like a media query, but for containers. Essentially, with these, you can style an element based on its parent’s size. Not viewport size, like a media query, but parent size.
That may not seem like a big deal, but actually, it’s very powerful, as you’ll see in the next few lessons.
In this course, you’ll learn about an existing problem with media queries and how to fix it with container queries, and we’ll also explore container queries in more detail by creating a more complex demo.
And before you yell at me for talking about CSS that’s not ready for production, there’s a very good reason. Container queries are so powerful that I believe they will become mainstream in a very short amount of time. In fact, if you’re watching this course later than 2021, they might already be implemented.
Because of that, I believe we should learn about them right now and be ready for when they’re finally released.
With that said, let’s get started!
Related Links
1.Introduction
1.1Welcome to the Course03:04
2.CSS Container Queries
2.1The Problem With Media Queries04:23
2.2Container Queries to the Rescue10:20
2.3Exploring a More Complex Example17:34
1.1 Welcome to the Course
Hey, hey, welcome to a new Tuts+ course, I'm Adi. And in this course, we're exploring something called container queries. Now, when I first heard this term, I was like, what, what's a container query? Well, it's like a media query, but for containers. Essentially, you can use this new feature in CSS to style an element differently based on its parent size or its container size. So not viewport size like media queries, but container size or parent size. These are container queries. And maybe at first it doesn't sound like such a big deal, but actually, they're very, very powerful, as you'll see in the next few lessons. So in this course, you'll learn about an existing problem with media queries, how to fix that with container queries. And we'll also explore these in more detail by creating a more complex demo. Now, if you've never heard about container queries, don't worry. They're super new, so not a lot of people know about them. In fact, they're so new that currently a single browser supports them. And that's Chrome Canary, the experimental version of Chrome. Yeah, and they're under a flag also. So please don't yell at me for talking about experimental CSS or CSS that's not ready for production because I have a very good reason. I believe this new feature in CSS, container queries, is so powerful that it's gonna be implemented very, very soon and it won't be experimental for much longer. In fact, if you're watching this course later than 2021, when it was recorded, then they might already be implemented and supported by all major browsers, which is fantastic. But until then, I believe we should learn about this new feature right now, learn how to use it, and prepare for when it's finally gonna be released. With that said, I think we should get started. But first, a message from Envato Elements. With one subscription you'll have unlimited access to WordPress themes and plugins, web and email templates, UI kits, and more. There are millions of digital assets to choose from, they have simple commercial licensing, and you can cancel anytime. Subscribe now using the link in the video description. All right, now let's talk about container queries. That's coming up next.
