Container Queries و انتخاب‌گر :has()

Container Queries و انتخاب‌گر :has() دو قابلیت جدید در CSS هستند که طراحی واکنش‌پذیر را هوشمندتر و سبک‌تر می‌کنند. با استفاده از آن‌ها می‌توان بدون جاوااسکریپت، رفتار کامپوننت‌ها را بر اساس اندازه ظرف یا وجود عناصر خاص کنترل کرد.

.card-grid {
  container-type: inline-size;
  container-name: cards;
}

@container cards (min-width: 600px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
    

.card:has(img) {
  padding: 12px;
  display: grid;
  grid-template-columns: 120px 1fr;
}

.form:has(input[value=""]) .submit {
  opacity: 0.6;
  pointer-events: none;
}
    

نتیجه؟ طراحی واکنش‌پذیر دقیق‌تر، کد کمتر، و تجربه کاربری بهتر بدون نیاز به جاوااسکریپت. این دو قابلیت برای ساخت کامپوننت‌های مدرن و مستقل بسیار کاربردی هستند.