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

يوليو 16, 2025

🌐 إتقان 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.

المدونة

مقارنة CSS: طبقات vs BEM vs Utility Classes

يونيو 26, 2025

مقارنة CSS: Cascade Layers و BEM و Utility Classes المقالة بتتكلّم عن ٣ طرق لإدارة الـ specificity في CSS &ndash; BEM والـ utility‑first classes وك...

تذكير بالمهام مع Laravel وMongoDB

يونيو 30, 2025

📌 بناء تطبيق تذكير مهام المقال ده بيشرح إزاي نعمل تطبيق Laravel يستخدم MongoDB علشان يذكرك بالمهمات بتاعتك، مع تسجيل دخول، CRUD، وتذكير بالإيميلات...

مقارنة بين Scopes + Traits × UseEloquentBuilder في Laravel

يوليو 13, 2025

في Laravel، بنحتاج دايمًا نكتب استعلامات شبه بعض في أكتر من مكان. Laravel بتوفر طريقتين أساسيين نقدر نستخدمهم علشان نرتّب الاستعلامات دي: Scopes + Tra...

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

يوليو 16, 2025

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

استخدام useCallback في React: الفوائد، القيود، والممارسات المثالية

يوليو 31, 2025

Hook useCallback في React يُستخدم لإنشاء نسخة ثابتة من دالة (callback) بحيث لا يُعاد إنشاؤها إلا إذا تغيرت الـ dependencies المحددة. الهدف الأساسي م...

نظام طوابير Laravel واستخدام Supervisor في الإنتاج

يوليو 01, 2025

🚀 نظام Queue &amp; Jobs في Laravel هناخدك خطوة خطوة من أول إنشاء الجداول لحد ما تشغّل الطوابير في Production عن طريق Supervisor. الخطوة 1: إنشاء...