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

المدونة

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

يوليو 07, 2025

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

الدليل الكامل لتحديثات ECMAScript 2025 للمطورين

يوليو 06, 2025

📘 شرح تفصيلي لتحديثات ECMAScript 2025 جميع مميزات ECMAScript 2025، مع أمثلة عملية وفهم ليه الميزة دي مهمة لأي مبرمج واجهة أمامية. ١. مجموعات مسما...

إزاي تستخدم Web Components ببساطة وذكاء

يوليو 06, 2025

إزاي تستخدم Web Components ببساطة وذكاء كتير من المطورين بيفكروا إن Web Components معمولة عشان تبقى بديل كامل لفريموركات زي React أو Vue. بس الحقيق...

إتقان التحقق الشرطي في Laravel 12

يوليو 07, 2025

إتقان التحقق الشرطي في Laravel&nbsp;12 في Laravel&nbsp;12، نظام التحقق (validation) قوي جدًا، وميزة التحقق الشرطي بتخليك تتحكم في القوانين بتاعتك ب...

React Labs: View Transitions وActivity

يونيو 17, 2025

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

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

يوليو 01, 2025

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