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

سـأحـاول سرد بعـض خصائص الـ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" باشكـال و رمـوز.

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

معاينـة

المصـادر :

-مصدر

-مصدر

-مصدر