إتقان 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.
المدونة
سبتمبر 13, 2025
لو محتاج تبعت إشعارات Push من تطبيق Laravel سواء للموبايل أو للويب، فالحل الأسرع والأبسط هو إنك تستخدم Notifire اللي بيربط Laravel مباشرةً مع Fireba...
أغسطس 09, 2025
البرمجة الكائنية التوجه (Object Oriented Programming - OOP) هي أسلوب حديث في تطوير البرمجيات يُقسّم التطبيق إلى وحدات تسمى كائنات (Objects) تتفاعل م...
يونيو 17, 2025
تحديث Laravel 12.18.0 صدر نسخه Laravel 12.18.0 فيها شوية ميزات جامدة كده: توابع لتشفير وفك تشفير النصوص باستخدام Stringable ديركت في chain strings...
يونيو 26, 2025
دليل للأنيميشن المتحركة بالسكّول بـ CSS دلوقتي تقدر تربط الأنيميشن بتاعتك بـ السكّول من غير جافاسكريبت — كله CSS بحت. 1. التلات مكونات بتوع...
يوليو 24, 2025
🧠 يعني إيه Dynamic Import؟ الديناميـك إمبورت ببساطة هو إنك تحمّل ملف أو موديول JavaScript "وقت الحاجة بس" مش من أول الصفحة. الميزة دي بتقلل حجم ال...
يوليو 01, 2025
تعزيز PHP enums باستخدام حزمة archtechx/enums من PHP 8.1، ظهر نوع جديد اسمه “enums” بيخليك تعرف قيم ثابتة بأسماء مرمّزة زي statuses...