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

يونيو 26, 2025

دليل للأنيميشن المتحركة بالسكّول بـ CSS دلوقتي تقدر تربط الأنيميشن بتاعتك بـ السكّول من غير جافاسكريبت &mdash; كله CSS بحت. 1. التلات مكونات بتوع...

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

يوليو 13, 2025

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

React Labs: View Transitions وActivity

يونيو 17, 2025

React Labs: View Transitions وActivity المنشور اتكتب يوم 23 أبريل 2025 من Ricky&nbsp;Hanlon. في React Labs النهارده بيقدّموا ميزتين تجريبيّتين مودرن...

React Native 0.80 وExecuTorch: بداية قوية للذكاء الاصطناعي المحلي في تطبيقات الموبايل

يوليو 28, 2025

🚀 الجديد في React Native 0.80 بالتفصيل الإصدار React Native 0.80 يعتبر نقطة تحول حقيقية في عالم تطوير تطبيقات الموبايل باستخدام React Native. التح...

دورة حياة الطلب في Laravel (Request Lifecycle)

مايو 23, 2026

رحلة الـ Request داخل Laravel: الفكرة الأساسية ودورة الحياة الكاملة فهم عميق لكيفية معالجة إطار العمل لارافل للطلبات من البداية وحتى النهاية لإ...

Laravel 12.19: استخدام Attributes لتنظيم الـ Query Builder

يوليو 07, 2025

Laravel 12.19: استخدام Attributes تنظّم Query Builder في Laravel 12.19، دلوقتي تقدر تستخدم Attribute اسمه #[UseEloquentBuilder] علشان تحدد Query Bu...