بعد از سالها انتظار، Container Queries بالاخره در تمام مرورگرهای مدرن پشتیبانی میشه. این یعنی دیگه برای طراحی ریسپانسیو فقط به Viewport وابسته نیستی!
✅ تفاوت با Media Queries:
· قابلیت Media Queries: بر اساس اندازه صفحه نمایش
· قابلیت Container Queries: بر اساس اندازه المان والد
✅ مثال کاربردی:
.card-container {
container-type: inline-size;
}
@container (min-width: 500px) {
.card {
display: flex;
flex-direction: row;
}
}
@container (max-width: 499px) {
.card {
display: flex;
flex-direction: column;
}
}💡 این قابلیت برای طراحی کامپوننت‌های مستقل مثل کارت‌های محصول، ویجت‌ها و بخش‌های مختلف سایت فوق‌العاده هست. دیگه نیازی نیست کل سایت رو بر اساس اندازه صفحه تغییر بدی!
@CodeVerse_dev