إتقان 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.
المدونة
يوليو 01, 2025
🚫 وقّف نسخ الكود! لو عندك نفس المنطق في كذا Model أو Controller زي Slug أو Logging، Traits في Laravel هتوفر عليك تعب الكتابة والتكرار. 1. إيه هو...
يوليو 01, 2025
🚀 نظام Queue & Jobs في Laravel هناخدك خطوة خطوة من أول إنشاء الجداول لحد ما تشغّل الطوابير في Production عن طريق Supervisor. الخطوة 1: إنشاء...
يونيو 30, 2025
أحدث مميزات ECMAScript 2025 في 25 يونيو 2025، تم اعتماد ES2025 رسميًا. الإضافات الجاية هتسهل عليك كتابة الكود: 1. 📦 Import Attributes و JSON Module...
يوليو 01, 2025
تعزيز PHP enums باستخدام حزمة archtechx/enums من PHP 8.1، ظهر نوع جديد اسمه “enums” بيخليك تعرف قيم ثابتة بأسماء مرمّزة زي statuses...
أغسطس 09, 2025
البرمجة الكائنية التوجه (Object Oriented Programming - OOP) هي أسلوب حديث في تطوير البرمجيات يُقسّم التطبيق إلى وحدات تسمى كائنات (Objects) تتفاعل م...
يوليو 24, 2025
🧠 يعني إيه Dynamic Import؟ الديناميـك إمبورت ببساطة هو إنك تحمّل ملف أو موديول JavaScript "وقت الحاجة بس" مش من أول الصفحة. الميزة دي بتقلل حجم ال...