دو قابلیت CSS مدرن یعنی انتخابگر :has() و Container Queries، بسیاری از کارهایی را که قبلاً به جاوااسکریپت نیاز داشت ساده کرده‌اند.
انتخابگر :has() چیست؟
با :has() می‌توانید عنصر والد را براساس فرزندانش استایل دهید؛ مثلاً کارتی که تصویر دارد چیدمان دو ستونه بگیرد. این قابلیت در مرورگرهای مدرن پشتیبانی می‌شود.
Container Queries
برخلاف Media Query که به عرض صفحه وابسته است، Container Query به عرض کانتینر والد توجه می‌کند؛ بنابراین یک کامپوننت در هر جای صفحه به‌درستی ریسپانسیو می‌شود. کافی است container-type: inline-size را روی والد تنظیم کنید.
نکته‌های عملی
برای مرورگرهای قدیمی‌تر یک استایل پایه بنویسید و قابلیت‌های جدید را به‌عنوان بهبود تدریجی اضافه کنید. پشتیبانی دقیق را در MDN بررسی کنید.
جمع‌بندی
ترکیب این دو قابلیت، کامپوننت‌های مستقل‌تر و کد CSS تمیزتر به شما می‌دهد.
منابع: MDN Web Docs
