Minimize containers
If, like me, you’re eager to use the latest CSS features, like container queries, you’re probably excited to dive in! But we also know it’s not in the Baseline yet… Thankfully, there are things we can do, such as using @supports to check for feature availability.
For container queries, there’s an additional strategy. By using min-width container queries rather than max-width ones, we increase the likelihood that our fallback experience remains usable! It’s a classic responsive design approach to think mobile-first, and in this case, it really helps.
.main {
/* Mobile styles here, everyone will see this*/
}
@container (min-width: 600px) {
.main {
/* Tablet styles here */
}
}
@container (min-width: 800px) {
.main {
/* Desktop styles here */
}
}Currently, global support for container queries is at 93.7%. For the remaining users without support, this approach ensures they still get the mobile layout, even on larger screens. While it’s not perfect, it’s fully functional and ensures a better overall user experience. A neat trick!
