استعلامات الميزات @supports

الصياغة

.box { display: block; }

@supports (display: grid) {
  .box { display: grid; }
}

@supports selector(:has(a)) {
  .nav:has(a.active) { border-bottom: 2px solid #7c5cff; }
}

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

<style>
  .box { background: #e5e7eb; padding: 12px; border-radius: 8px; }
  @supports (display: grid) { .box { background: #ddd6fe; } }
  @supports not (display: grid) { .box::after { content: ' (لا يدعم Grid)'; } }
</style>
<div class="box">هذا الصندوق بلون مختلف لأن متصفحك يدعم Grid.</div>

أهم القيم

💡 نصائح عملية

• اكتب النمط الأساسي البسيط أولًا خارج الاستعلام، ثم حسّنه بداخل @supports — لا العكس
• استخدم selector() قبل الاعتماد على محدّدات حديثة مثل :has() في مشاريع تدعم متصفحات أقدم

⚠️ أخطاء شائعة

• الاعتماد على @supports وحده لخاصية مدعومة عالميًا منذ سنوات — لا داعي له
• نسيان أن الشرط يتحقق من دعم القيمة كاملة (property: value) لا الخاصية فقط

خصائص ذات صلة