كما نشير دائما، فالعالم التقني و البرمجي في تقدم دائم و عليك ان تتمسك به جيدا عندما يحلق للأمام و ان تواكبه بدورك، في مقالنا الخفيف هذا، سنراجع معك ميزة تم إضافتها في لغة التنسيق CSS، هذه الميزة التي لم تكن متوفرة من قبل تم إدراجها الآن في هذه اللغة التنسيقية العالمية التي يستخدمها العالم في إضافة زركشات على تصاميمهم الخاصة بإحترافية تامة .
- أصل المشكلة و ما الذي نقصده بالـ CSS Variables ؟
في الحقيقة إسمها الأصلي هو CSS Custom Properties، لكن إختصارا نطلق عليها إسم CSS Variables، في لغة التنسيق CSS إن كان لديك أزيد من عنصر تريد ان تضع نفس اللون عليهم جميعا، فسيتوجب عليك وضع في كل مرة نفس الكود اللوني (#339194) في كل مرة تقوم بإستدعاء احد العناصر، حتى الآن لا مشكلة، تخيل معي لو إنتهيت من المشروع البرمجي الذي يضم ازيد من 5000 سطر في لغة التنسيق، ثم أرسلته للعميل و أخبرك: " هل تعلم، هذا اللون الرئيسي سيئ، أريدك أن تجعله بالأحمر " حينها سيتوجب عليك تغيير اللون في أزيد من 5000 سطر، في محررات متقدمة IDE سيمكنك فعل ذلك بالبحث عن اللون في الصفحة كاملة و تغييره دفعة واحدة لا مشكلة في ذلك، لكن ماذا لو كانت مجموعة من الصفحات ؟ او ماذا لو كان الستايل الذي تريد تغييره هو حجم الخط الذي يبلغ 12px، لا يمكنك ان تقوم بالبحث عن 12px و تقوم بتغييره، فقد تجد بعض الـ padding بقياس 12px و تقوم بتغييرها عن طريق الخطأ !
ثم تم تحديث الـ CSS بشكل أكثر إحترافية، إذ تم إطلاق هذا التحديث بشكل رسمي في الـ 15 من شهر فبراير / شباط من سنة 2018، و أصبح بإمكانك إستخدامه على شكل CSS عادي و بسهولة كذلك .
- كيف يعمل الـ CSS Variables ؟
إن إستخدامها سهل جدا، يكفي أولا تحديد العنصر الأساسي للصفحة او الصفحات و يحمل إسم root، هذا الـ root سيتضمن كل المتغيرات و خواصها، ثم بعدها يمكنك إستخدام ذلك المتغير الذي قمت بتحديده في عنصر root على شكل var() في الـ CSS، إليك صورة توضيحية للأمر :
إن لم تفهم الصورة فلا تقلق، سأشرحها لك، كما أشرت يتم أولا تعليم عنصر root على هيئة :root في أعلى الـ Sheet الخاص بلغة التنسيق، يُفضل إستخدامه في صفحة مختصة تحميل عنصر settings على سبيل المثال من أجل إعادة إستخدامه في صفحات متعددة للحفاظ على المتغيرات في كل الصفحات، يتم تحديد متغير و إعطائه قيمة محددة عن طريق السطر :
--var : value ;
على سبيل المثال، إن اردت ان احدد قياسا محددا لعناوين كبرى، فيمكنني ان اقوم بالتالي :
:root {
--titleSize : 1.5em;
}
ثم لاحقا بعدها سأضطر لإستخدام هذا المتغير على أحد العناصر، و لنقل مثل H1 فيُصبح الامر كالتالي :
h1 { font-size : var(--titleSize); }
و هكذا يمكنك تضمين مجموعة من المتغيرات في صفحة الويب الخاصة بك عن طريق لغة التنسيق، و بذلك إن اردت تغيير لون كل العناصر التي تحمل لونا محددا او تغيير قياسها و ما الى ذلك، فيكفي ان تقوم بالتوجه الى العنصر الأساسي root ثم تقوم بتغيير المتغير لا أكثر، و سيتم تغيير كل الستايل في كل الصفحات و كل العناصر التي تحمل ذلك المتغير .