اجعل CSS ديناميكيًا باستخدام خصائص CSS المخصصة

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

تسمح لك خصائص CSS المخصصة بما يلي:

• قم بتعيين قيم عشوائية لخاصية باسم من اختيارك
• استخدم الدالة var() لاستخدام هذه القيم في الخصائص الأخرى

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

في هذه المقالة ، ستتعلم كيف يمكنك استخدام خصائص CSS المخصصة لجعل أوراق الأنماط أكثر ديناميكية ، وربما تجعل خطوة Sass / LESS الإضافية في خط أنابيب الأصول قديمة.

متغير CSS الأصلي والأقل قوة

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

دعنا نلقي نظرة على مثال:

 .element { color: blue; border: 2px solid currentColor; /* Sets a solid, 2px wide, blue border to the element */ }

بالإضافة إلى التتالي ، يمكن أن ينتج عن ذلك أيضًا ما يلي:

 .element span { background: currentColor; /* Sets a blue background color for every span child of .element, unless a color property is declared in this same block */ } .element span.red { color: red; /* Sets a red background color for every span child of .element that has the class .red, since currentColor is applied to the background of every span child of .element no matter if they have the .red class or not */ }

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

متغيرات CSS كاملة

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

بعد طلب المطورين لفترة طويلة ، تمت كتابة مسودة لتفسير المتغيرات الأصلية لـ CSS. يُشار إليها رسميًا باسم خصائص CSS المخصصة ، ولكن يُشار إليها أحيانًا باسم متغيرات CSS.

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

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

 :root { --color-black: #2e2e2e; } .element { background: var(--color-black); }

الآن ، قد تفكر في: "أي نوع من بناء الجملة هذا !؟"

حسنًا ، تشرح Lea Verou سبب بناء جملة "dash-dash" بالبساطة المطلقة ، كما تقول في حديثها المذهل ، CSS Variables: var (–subtitle):

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

يمكننا استرداد قيمة الخاصية المخصصة باستخدام وظيفة var() ، والتي يمكننا استخدامها في كل مكان باستثناء المحددات أو أسماء الخصائص أو إعلانات استعلام الوسائط.

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

لتوضيح الأمر أكثر ، اسمحوا لي أن أوضح الموقف باستخدام بعض الأمثلة. تعد كتلة التعليمات البرمجية التالية جزءًا من ورقة أنماط SASS:

 :root { $value: 30px; } @media screen and (min-width: 768px) { $value: 60px; } .corners { border-radius: $value; }

يتم تجميع هذا المقتطف من إعلانات وقواعد SASS إلى CSS على النحو التالي:

 .corners { border-radius: 30px; }

يمكنك أن ترى أن كلاً من الخصائص الموجودة في الداخل :root والاستعلام عن media تضيعان بعد التجميع ، لأن متغيرات SASS لا يمكن أن توجد داخل ملف CSS (أو ، بشكل أكثر دقة ، يمكن إجبارها على التواجد في ملف CSS ، ولكن يتم تجاهلها نظرًا لأن بعض قواعدها اللغوية غير صالحة لـ CSS) ، لذلك لا يمكن تحديث قيمة المتغير بعد ذلك.

الآن دعونا ننظر في نفس الحالة ، ولكن تم تطبيقها باستخدام متغيرات CSS فقط مع عدم تطبيق معالج سابق / لاحق لـ CSS (على سبيل المثال ، بدون أي ترجمة أو تجميع يتم إجراؤها):

 :root { --value: 30px; } @media screen and (min-width: 768px) { --value: 60px; } .corners { border-radius: var(--value); }

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

تجعل إمكانيات الخصائص المخصصة هذه الميزة قوية للغاية حتى أنه يمكنك القيام بأشياء مثل الإصلاح التلقائي.

يعين Lea Verou مثالاً باستخدام خاصية clip-path . نبدأ بتعيين قيمة الخاصية التي نريد أن نبدأها initial ولكن نستخدم خاصية مخصصة ، ثم ننتقل إلى تعيين قيمة كل خاصية مسبوقة على قيمة الخاصية المخصصة:

 * { --clip-path: initial; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); }

بعد ذلك ، كل ما تبقى هو تغيير قيمة الخاصية المخصصة داخل المحدد:

 header { --clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 2.5em), 0% 100%); }

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

خصائص مخصصة CSS مضادة للرصاص

كما ذكرنا ، لا يزال دعم المتصفح لخصائص CSS المخصصة غير قياسي إلى حد كبير. فكيف يمكن التغلب على هذا؟

هذا هو المكان الذي تدخل فيه PostCSS ومكوِّنها الإضافي postcss-css-variables.

إذا كنت تتساءل عن PostCSS ، فتحقق من مقالتي PostCSS: SASS's New Play Date ، وارجع إلى هذا بعد الانتهاء. ستحصل بعد ذلك على فكرة أساسية عما يمكنك فعله بهذه الأداة الرائعة ولن تشعر بالارتباك عند قراءة بقية المقال.

باستخدام postcss-css-variables ، وضبط خيار preserve على صحيح ، يمكننا الاحتفاظ بجميع إعلانات الدالة var() في المخرجات والحصول على القيمة المحسوبة كإعلان احتياطي. كما أنه يحتفظ --var . ضع في اعتبارك أنه باستخدام المكون الإضافي PostCSS هذا ، يمكن تحديث الخصائص المخصصة ديناميكيًا بعد عملية الترجمة ، لكن القيم الاحتياطية ستظل كما هي ما لم يتم استهدافها بشكل خاص وتغييرها بشكل فردي.

إذا كنت تبحث عن طريقة خالية من المعالجات السابقة / اللاحقة لاستخدام متغيرات CSS ، فيمكنك دائمًا التحقق من الدعم الحالي يدويًا باستخدام قاعدة @support وتطبيق احتياطي مناسب عندما يكون الدعم غير مكتمل أو غير موجود. علي سبيل المثال:

 :root { --color-blue: #1e90ff; /* hex value for dodgerblue color */ } .element { background: var(--color-blue); } @supports (not(--value: 0)) { /* CSS variables not supported */ .element { background: dodgerblue; } }

تغيير قيمة خاصية مخصصة باستخدام JavaScript

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

لنفترض أن لديك سمة فاتحة وتريد تبديلها إلى سمة داكنة ، بافتراض أن لديك بعض CSS مثل ما يلي:

 :root { --text-color: black; --background-color: white; } body { color: var(--text-color); background: var(--background-color); }

يمكنك تحديث --text-color --background-color عن طريق القيام بما يلي:

 var bodyStyles = document.body.style; bodyStyles.setProperty('--text-color', 'white'); bodyStyles.setProperty('--background-color', 'black');

حالات استخدام مثيرة للاهتمام

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

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

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

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

بث حياة جديدة في ملفات CSS الخاصة بك

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

المواصفات حاليًا تحت حالة توصية المرشح ، مما يعني أن التوحيد قاب قوسين أو أدنى ، وهو سبب وجيه للتعمق في هذه الميزة والاستفادة منها إلى أقصى حد.