🌐 إتقان CSS الحديثة: قوة if()، Popover Hints، والتنسيقات الذكية

CSS دلوقتي بقت أذكى بكتير. دالة if()، وميزة popover="hint"، وازاي نكتب تنسيقات متجاوبة وذكية باستخدام أمثلة حقيقية.

🔍 ١. دالة if() في CSS

دي دالة جديدة بتخليك تكتب شرط مباشر في قيمة الـ CSS. مثلاً:

padding: if(100px > 50px, 2rem, 1rem);

كمان تقدر تستخدمها مع media queries أو container queries زي:

@media (width > 600px) {
  .card {
    padding: if(100px > 60px, 3rem, 1rem);
  }
}

مفيدة جداً في التحكم في المساحات والـ responsive design.

🧪 مثال عملي: Padding الزرار حسب القيمة

:root {
  --gap: 20px;
}

button {
  padding: if(var(--gap) > 10px, 1.5rem, 0.5rem);
}

💡 ٢. Popover Hints باستخدام popover="hint"

الميزة دي بتخليك تعمل قائمة منسدلة بدون ما تكتب JavaScript.

<button popovertarget="tip">اعرض معلومة</button>
<div id="tip" popover="hint">
  دي معلومة سريعة باستخدام popover!
</div>

المتصفح بيظبط الظهور والمكان تلقائي. ممتازة للتجربة السلسة والمساعدة التفاعلية.

🤖 ٣. CSS أذكى من قبل

مع مميزات زي :has() و @scope و style queries، CSS دلوقتي بقت فعلاً لغة قوية لبناء واجهات تفاعلية بدون JavaScript.

بس لازم تخلي بالك من التعقيد. استخدم الميزات دي بحكمة وخلي الكود واضح وسهل الصيانة.

🔧 أدوات ونصايح

• استخدم متصفح Chrome Canary أو Edge Dev لتجربة الميزات الجديدة
• راجع الدعم على موقع caniuse.com
• استخدم fallback للتعامل مع المتصفحات اللي لسه مش بتدعم الميزات دي

الميزة دي هتسهل شغلك جدًا، خصوصًا لو بتشتغل على واجهات dynamic أو design systems.