استخدام خصائص CSS المخصصة لتجربة مستخدم أفضل

آخر تحديث - 8 يوليو 2021

جلبت CSS3 معها واحدة من أكبر الإضافات التي تتمتع بها مواصفات CSS لفترة طويلة. لقد ولّد الكثير من الضجة لأنه عالج مشكلة رئيسية ابتليت بالمطورين لسنوات ، وكان السبب الرئيسي الذي دفع الناس إلى تفضيل استخدام المعالجات المسبقة مثل SASS: القدرة على استخدام المتغيرات.

مع إضافة متغيرات CSS ، فإن الكثير من التعليمات البرمجية التي كان يجب كتابتها لدعم الميزات الأساسية مثل التخصيص لم تعد ضرورية. إنها ميزة مفيدة يمكن استخدامها لتجنب التكرار وتمكين المزيد من حالات الاستخدام مثل أحجام الخطوط الديناميكية والبساطة بالإضافة إلى الاستجابة في تطبيق الويب.

التخلص من الفوضى باستخدام متغيرات CSS

الميزة الشائعة لمعظم التطبيقات هي ألوان العلامة التجارية التي يجب أن تظل كما هي ومتسقة في جميع أنحاء التطبيق. لا أحد لديه عقل لتخزين عشر قيم سداسية عشرية مختلفة في رؤوسهم للرجوع إليها في المستقبل ، والانتقال بين الملفات لنسخ القيم ليس مرهقًا فحسب ، بل إنه ضار أيضًا بالإنتاجية. الآن ، تخيل مقدار العمل الذي يجب القيام به إذا كانت هذه الألوان بحاجة إلى التغيير.

يعد استخدام معالجات CSS الأولية مع WordPress الطريقة الأكثر شيوعًا للتعامل مع المشكلة. توفر هذه الدعم لمجموعة كاملة من الميزات مثل mixins والإعلانات المتداخلة وبالطبع المتغيرات ، والتي تعد دفعة كبيرة للإنتاجية.

كل ما عليك فعله هو كتابة التعليمات البرمجية مرة واحدة ويتم تجميعها في CSS ، والتي يمكنك الوصول إليها وتغييرها بحرية إذا كنت ترغب في ذلك. ومع ذلك ، فإن عدم القدرة على العثور على هذه القيم وتغييرها في وقت التشغيل ، على سبيل المثال ، إضافة سمة داكنة إلى تطبيق الويب الخاص بك هو أكبر عيب لهم. إنها مشكلة كبيرة ليس فقط لأن SASS لا تدعمها ، ولكن من المحتمل ألا تفعل ذلك أبدًا.

كان لإضافة المتغيرات المدمجة المخصصة لفتح CSS تأثير كبير على كيفية كتابة التطبيقات ، لا سيما فيما يتعلق بالتصميم سريع الاستجابة.

ما هو دعم المتصفح لمتغيرات CSS مثل؟

هذا هو السؤال الأكثر شيوعًا الذي يظهر عند مناقشة متغيرات CSS. وفقًا لـ Caniuse ، يبلغ دعم المتصفح لمتغيرات CSS 93.16٪. إنه مدعوم في جميع المتصفحات الحديثة (Chrome 49+ و Firefox 31+ و Safari 9.3+ و Opera 36+ و Edge 16+). كما هو الحال دائمًا ، IE مفقود من العرض ولديه حصة سوقية مذهلة تبلغ 6.47٪ . بالنسبة للمطورين الفقراء الذين يتعين عليهم دعم المتصفحات القديمة ، فلا داعي للقلق. Polyfills ، أو الأصح ، ponyfills ، هنا لإنقاذ اليوم.

مقدمة رسمية لمتغيرات CSS

إذا كنت معتادًا على متغيرات CSS ، فلن تواجه أي مشكلة في متغيرات CSS.

يتم التصريح عن متغيرات SASS على النحو التالي:

<قبل>

$ facebook-blue: # 4267B2 ؛

</pre>

بينما يتم الإعلان عن متغيرات CSS بشكل مختلف قليلاً:

<قبل>

:جذر {

–العلامة التجارية: # 4267B2 ؛

}

.brand-navbar {

الخلفية: var (- -brand-color) ؛

}

</pre>

لاحظ بعض الاختلافات بين الصيغتين:

• يجب أن تُسبق متغيرات CSS بشرطتين
• عادةً ما يتم التصريح عن متغيرات CSS داخل ": root" ، ولكن يمكن إعادة تعريفها في أي وقت.
• يتم استرداد خصائص CSS باستخدام وظيفة "var ()".

تتيح متغيرات CSS أيضًا الوصول إلى العديد من الميزات الإضافية.

القيم المتتالية

تتالي خصائص CSS وفقًا لقواعد التتالي العادية. بمعنى آخر ، لا تؤثر عمليات إعادة التصريح أدناه على تلك المذكورة أعلاه.

<قبل>

: الجذر {–اللون: أصفر؛ }

div {– color: أزرق ؛ }

#great {– color: أخضر؛ }

* {color: var (–color)؛ }

<p> سأكون أصفر اللون ، موروث من الجذر! </ p>

<div> أنا أزرق! </ div>

<div id = ”great”>

انها عملت! انا اخضر!

<p> أنا أخضر أيضًا! موروث من فوق! </ p>

</div>

</pre>

القيم الاحتياطية

تقبل الدالة "var ()" عدة معاملات. يمكن استخدام الثانية كقيمة احتياطية في حالة عدم تحديد خاصية CSS المخصصة. هذه ميزة مفيدة لأي شخص يحتاج إلى الوصول إلى متغيرات CSS عبر JavaScript.

يبدو توقيعه مثل "var (<custom-property-name> [، <declusion-value>]؟) 'ويمكن استخدامه بالطريقة التالية

<قبل>

.brand-navbar {

الخلفية: var (–brand-color، “# 4267B2”) ؛

}

</pre>

إذا لم يتم تعريف "–brand-color" ، فسيتم استخدام "# 4267B2" بدلاً من ذلك ،

الوصول عبر JavaScript

أحد أفضل الأسباب لاستخدام متغيرات CSS على المعالج المسبق هو القدرة على الوصول إلى المتغيرات المخصصة عبر JavaScript. لا تعيش متغيرات المعالج المسبق في المتصفح. يتم تقييمها عند تجميع الكود. بهذه الطريقة ، لا يمكن الوصول إلى متغيرات المعالج المسبق في المتصفح. باستخدام متغيرات CSS ، تعيش الخاصية في المتصفح ، مما يمنح القدرة على تحرير القيم أثناء التنقل.

ضع في اعتبارك لوحة تحكم تسمح للمستخدم بتحديد ألوان مخصصة عبر نافذة منبثقة أو شيء مشابه.

<قبل>

.brand-navbar {

الخلفية: var (–brand-color، “# 4267B2”) ؛

}

// للحصول على القيمة الحالية

getComputedStyle (document.documentElement) .getPropertyValue ('- لون العلامة التجارية') ؛

// لتعيين القيمة

document.documentElement.style.setProperty ('- brand-color'، 'red')؛

// يمكنك حتى تعيين خاصية CSS إلى أخرى

document.documentElement.style.setProperty ('- brand-color'، 'var (–secondary-color)')؛

</pre>

تحديد النطاق العالمي والمحلي

إذا كنت معتادًا على JavaScript (أو أي لغة برمجة ، حقًا) ، فمن المحتمل أنك تفهم مفهوم تحديد النطاق. يمكن تعريف المتغيرات بشكل طبيعي بحيث يمكن الوصول إليها فقط لأجزاء معينة من الكود ، تسمى النطاق المحلي ، أو إتاحتها للاستخدام في جميع أنحاء التطبيق ، يسمى النطاق العام.

تعمل متغيرات CSS بشكل مشابه. يجب تحديد نطاق بعض المتغيرات عالميًا لتسهيل الرجوع إليها ، مثل ألوان العلامة التجارية والتباعد الرأسي. تظل هذه عادةً كما هي في جميع أنحاء التطبيق وفي حالة حدوث تغيير ، يجب أن تنعكس في كل مكان. في المقابل ، تتضمن المتغيرات التي قد تتطلب تحديد النطاق المحلي أزرارًا ذات متغيرات كبيرة وصغيرة مختلفة. إذا كنت تريد تغيير المساحة المتروكة على زر معين ، فلن ترغب في أن تتجاوز التغييرات مساحة DOM بأكملها. يجب تغييره في نقطة واحدة فقط في التطبيق.

بشكل افتراضي ، يتم تحديد خصائص CSS محليًا. وإذا كنت قد عملت باستخدام JavaScript أو أي لغة برمجة أخرى ، فإن النطاق له مجموعة من المشكلات الخاصة به. نظرًا لإمكانية توريثها ، فإنها تعمل أيضًا مثل المتغيرات المحلية ، والتي يمكن أن يكون لها بعض الانعكاسات المثيرة للاهتمام إذا لم تكن حريصًا على كيفية استخدامها. نظرًا لتتالي القيم ، يجب أن تكون على دراية بكيفية تغييرها ، خاصةً عندما يتعلق الأمر بجافا سكريبت.

استخدام الخصائص المخصصة مع استعلامات الوسائط

تمامًا كما هو الحال مع المعالجات الأولية ، يتمثل أحد الجوانب السلبية الرئيسية لاستخدام خصائص CSS في عدم إمكانية استخدامها في استعلامات الوسائط. على سبيل المثال ، هذا لن يعمل.

<قبل>

media (أدنى عرض: var (–breakpoint)) {

الحشو: 1rem.

}

</pre>

ما يمكنك فعله بدلاً من ذلك هو إعادة تعريف الخصائص المخصصة داخل استعلامات الوسائط. إذا كنت بحاجة إلى تغيير حجم الخط عندما يقل حجم المتصفح ، فأنت محظوظ. باستخدام متغيرات CSS ، يمكنك الاستماع إلى تغييرات المتصفح باستخدام JavaScript وتغيير أي أحجام تحتاج إلى تصغيرها مرة واحدة فقط.

ما هي بعض التطبيقات العملية لخصائص CSS المخصصة؟

"اليوم ، بصرف النظر عن استخدام خدمات CDN لتحسين أداء الموقع ، فإن استخدام خصائص CSS المخصصة هو أحد أسرع الطرق لتحسين الإنتاجية" ، كما ينصح Colby Stuart ، وهو مصمم ويب خاص بخدمة كتابة الورق .

بصرف النظر عن الفوائد التي تم إبرازها جيدًا ، فإنها تضيف إلى الإنتاجية ، فهل هناك أي أمثلة واقعية لكيفية استخدامها في تطبيق الويب؟

مضيفا الوضع المظلم

الاتجاه الجديد الذي استحوذ على السوق الاستهلاكية هو الطلب على الوضع المظلم في جميع البرامج الحديثة - بما في ذلك تطبيقات الويب. قد يكون الأمر أكثر تعقيدًا قليلاً من إضافة لون خلفية داكن. تشمل الأشياء الأخرى التي يجب مراعاتها كيف ستتغير ألوان النص وكيف ستتأثر الصور ذات الخلفيات البيضاء.

كل هذا أصبح ممكنًا من خلال إعلان المتغيرات أولاً في جميع أنحاء التطبيق الخاص بك. عندما يقوم المستخدم بتشغيل المفتاح لتحويل مظهر موقع الويب إلى اللون الداكن ، قم بتشغيل وظيفة JavaScript التي تغير متغيرات CSS. إذا كان تطبيق الويب الخاص بك أكثر تعقيدًا ، فقد يشمل ذلك أيضًا استبدال الصور الحالية بأخرى ملائمة للوضع الداكن.

إضافة الوضع الداكن على ووردبريس

كانت متغيرات CSS مؤثرة للغاية لدرجة أنها وصلت إلى عالم WordPress. اليوم ، يعد إنشاء وضع مظلم (أو بشكل عام ، تخصيص) تطبيق WordPress أمرًا تافهًا إلى حد ما.

يعتمد معظم مطوري WordPress على أداة التخصيص لتغيير مظهر ووظائف مواقعهم. يوفر الوصول إلى أشياء مثل الألوان والخطوط وصور الخلفية وما إلى ذلك عن طريق الوصول إلى CSS لموقعك. المشكلة الرئيسية في هذا هي أنه من خلال تغيير CSS بهذه الطريقة ، يجبر PHP على إعادة عرض HTML الخاص بك ، وبذلك ، يتسبب الخادم في إعادة إرسال الملف بالكامل إلى المتصفح. يقدم تطبيقك طلبًا غير ضروري ، ويستهلك بيانات أكثر مما يحتاج إليه.

"إذا كان مثل هذا التطبيق موجهًا إلى المستهلك ، فمن المحتمل أن تتلقى الكثير من الشكاوى. إذا لم يكن لديك ملفات CSS مخصصة لأي متغيرات تريد تغييرها ، فستزداد الأمور سوءًا ". تعتبر هيلينا نيومان ، إحدى كبار المطورين في شركة مراجعة ورق الطباعة وناشر خدمات كتابة السيرة الذاتية ، أنها إضافة ضرورية لمواصفات CSS.

باستخدام متغيرات CSS ، يتم تغيير جميع الألوان في المتصفح باستخدام JavaScript. الطلب الوحيد الذي سيتم تقديمه هو استمرار السمة الحالية على الخادم إذا لزم الأمر. وحتى مع ذلك ، يمكن حفظ هذا المتغير في المتصفح.

إضافة تصميم سريع الاستجابة إلى موقع على شبكة الإنترنت

مع وجود المزيد من الهواتف المحمولة على الإنترنت أكثر من أي وقت مضى ، لم تكن الحاجة إلى مواقع ويب سريعة الاستجابة أكثر وضوحًا من أي وقت مضى. الجانب الأكثر أهمية في التصميم سريع الاستجابة الذي يفاجئ المطورين هو تغيير أحجام الخطوط. بالنسبة إلى تطبيق يستخدم خطوطًا متعددة أو خطوطًا ديناميكية ، يعد تتبعها وتغييرها لمتصفحات مختلفة عملاً روتينيًا.

بدلاً من ذلك ، تتيح لك خصائص CSS المخصصة تحديد حجم خط عالمي يمكن استخدامه وإعادة استخدامه في جميع أنحاء موقع الويب الخاص بك. في حالة الحاجة إلى التغيير ، كل ما عليك فعله هو استدعاء وظيفة JavaScript وستعمل جميعها.

إذا لم تكن بحاجة إلى دعم المتصفحات القديمة ، فيمكن استخدام متغيرات CSS المخصصة جنبًا إلى جنب مع نظام CSS الشبكي الجديد (نسبيًا) للتخلص من الحاجة إلى استعلامات الوسائط تمامًا.

ثم مرة أخرى ، قد تظل استعلامات الوسائط ضرورية إذا كنت بحاجة إلى الاستماع إلى تغييرات العرض داخل CSS نفسها. هذه هي الطريقة الوحيدة التي يمكنك من خلالها دعم المتصفحات التي لا تسمح بتشغيل JavaScript.

استنتاج

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