خصائص لا تعرفـها عن CSS - مقال كلاود
 إدعم  المنصة   
makalcloud
تسجيل الدخول

خصائص لا تعرفـها عن CSS

  نشر في 05 فبراير 2016 .

لاحظـت منذ فتـرة  كـثـرة أستعمـال مكتبـات جاهـزة وإضافات، قـد تكـون المكتبـات الجاهـزة تسهـل عليـنـا الكثيـر ولكـن كثـرة المكتبـات الجاهـزة و الإضافات تـزيـد من مسـاحة الملـف ممـا يؤدي الي زياده في وقـت تحميـل الصفحـة.

سـأحـاول سرد بعـض خصائص الـCSS التـي قد تغنينـا عـن أستخـدام إضافات جاهزة واشياء قد تكون جديدة عليك.


1- خاصيـة Scrollbar :

كثيـر من المطـورين عنـدما يريدون تغييـر مظهـر شريط التمرير "Scrollbar" يذهبـون الـي أستخـدام إضافـة NiceScroll plugin ولـكـن يوجـد خاصـية فـي الـCSS أيضـا يمكنك من خلالهـا تغير مظهر شريط التمرير.

يمكنـك أستـخـدام :

::-webkit-scrollbar و هذه هي المسئوله عن شريط التمرير بالكامل.

::-webkit-اscrollbar-thumb وهي المسئولة عن الجزء الذي يتحرك داخل شريط التمرير.

يمكنـك تغيير حجـم و لون شريط التمرير من خلال الخاصيتين ولكـن يوجد أيضا 5 خصائص أخري لتتحكـم بالكامل في شريط التمـريـر .

الخـاصيـة مدعمـة علي جميع المتصفحـات عدا Firfox , IE.

معاينـة


2- خاصيـة pointer-events

جميعنـا نعرف event.preventDefault() والتـي تمنع القيمة الأفتراضيـة في الجافا سكريبت 

يمكنك أيضا من خلال الـCSS أن تقـوم بنفـس عمل event.preventDefault() و لكن من  خلال خاصيـة { pointer-events: none; } 

معاينـة


3-  خاصـيـة max-height 

في الجـافا سكريبـت و خاصة في مكتبـة الجـي كويري "jQuery" يمكننـا أستخـدام تأثيـر slideDown & slideUp بكل سهـولة ولكـن الأمـر الذي لا تعـرفة هـو إمكانيـة فعل التأثيـر بالـCSS أيضـا عـن طـريـق خـاصيـة max-height والتـي من خلالهـا يمكنـك تحـديد الحـد الأقصـي لطـول العنصـر.

معاينـة


4- خاصيـة counter 

اذا اردت أن تصنـع عداد أرقام متتاليـة فالامـر بسيـط باستخـدام الجـافا سكريبت و لكـن ما لا تـعرفـة أيضـا هـو أن بإمكـانك عمـل عداد بالـ CSS عن طريق خاصية counter-reset و counter-increment و أضافتها عن طريق before , after للعنصـر.

counter-reset: هنا تهيئ الملف علي رقـم [0] و تقوم بتعريفه باي أسم.

 counter-increment: هنا يقوم بزيادة العنصر وباستخدام after يمكنك و ضع الارقام في المكان المراد ظهورها فيه.

معاينـة


ننهـي الموضـوع بشـئ جميل و لكـن لا يجـب أن تفعلـة يمكنـك معرفتهـا فقـط :) 

-Unicode classes  يمكنـك تسمـية العناصـر ووضـع أسمـاء خاصـة "class" باشكـال و رمـوز.

اكـرر لا تفعـل هذا أرجـوك في أي مشـروع يكفيـك معرفتهـا فقـط :) 

معاينـة



المصـادر :

-مصدر

-مصدر

-مصدر




  • 4

   نشر في 05 فبراير 2016 .

التعليقات


لطرح إستفساراتكم و إقتراحاتكم و متابعة الجديد ... !

مقالات شيقة ننصح بقراءتها !



مقالات مرتبطة بنفس القسم












عدم إظهارها مجدداً

منصة مقال كلاود هي المكان الأفضل لكتابة مقالات في مختلف المجالات بطريقة جديدة كليا و بالمجان.

 الإحصائيات

تخول منصة مقال كلاود للكاتب الحصول على جميع الإحصائيات المتعلقة بمقاله بالإضافة إلى مصادر الزيارات .

 الكتاب

تخول لك المنصة تنقيح أفكارك و تطويرأسلوبك من خلال مناقشة كتاباتك مع أفضل الكُتاب و تقييم مقالك.

 بيئة العمل

يمكنك كتابة مقالك من مختلف الأجهزة سواء المحمولة أو المكتبية من خلال محرر المنصة

   

مسجل

إذا كنت مسجل يمكنك الدخول من هنا

غير مسجل

يمكنك البدء بكتابة مقالك الأول

لتبق مطلعا على الجديد تابعنا