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

المدونة

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

يوليو 06, 2025

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

Laravel 12.21.0 – تحديث ذكي لتسهيل الاستعلامات والتحقق الصارم للبيانات

أغسطس 03, 2025

أصدرت Laravel النسخة 12.21.0 بمزايا برمجية هامة تساهم في كتابة كود أنظف وأسهل في الصيانة. من أهمها دالة whereValueBetween() الجديدة، بالإضافة إلى...

الفرق بين Redux, Context & React Components في إدارة الحالة

أغسطس 06, 2025

عند بناء تطبيقات باستخدام React، هناك حاجة إلى إدارة البيانات التي تتغير نتيجة تفاعل المستخدم أو جلب البيانات من مصادر خارجية. توجد ثلاث وسائل رئيسي...

لارافيل 12.16.0 - مميزات جديدة للمطورين

يونيو 03, 2025

لارافيل 12.16.0 - مميزات جديدة للمطورين 1. قاعدات تحقق جديدة: in_array_keys دلوقتي تقدر تتحقق إن الأراي فيه على الأقل مفتاح واحد من اللي انت محددهم...

تحديث Laravel 12.18.0

يونيو 17, 2025

تحديث Laravel 12.18.0 صدر نسخه Laravel 12.18.0 فيها شوية ميزات جامدة كده: توابع لتشفير وفك تشفير النصوص باستخدام Stringable ديركت في chain strings...

البرمجة الكائنية (OOP) – المفاهيم الأساسية

أغسطس 09, 2025

البرمجة الكائنية التوجه (Object Oriented Programming - OOP) هي أسلوب حديث في تطوير البرمجيات يُقسّم التطبيق إلى وحدات تسمى كائنات (Objects) تتفاعل م...