متغيرات CSS - ما أهمية ذلك بالنسبة إليك؟

Rob Dodson

ستصل متغيّرات CSS، المعروفة بشكل أكثر دقة بخصائص CSS المخصّصة، في Chrome 49. يمكن أن تكون هذه التعديلات مفيدة لتقليل التكرار في CSS، وأيضًا في تأثيرات وقت التشغيل الفعّالة، مثل تبديل المظاهر، وتمديد أو تمديد ميزات CSS المستقبلية.

فوضى في CSS

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

في الآونة الأخيرة، لجأ العديد من مطوّري البرامج إلى المعالجات التمهيدية لـ CSS، مثل SASS أو LESS، والتي تحل هذه المشكلة من خلال استخدام متغيرات البيانات المسبقة. لقد عززت هذه الأدوات إنتاجية المطورين إلى حد كبير، إلا أن المتغيرات التي تستخدمها تعاني من عيب كبير، وهي أنها ثابتة ولا يمكن تغييرها في وقت التشغيل. إنّ إضافة إمكانية تغيير المتغيرات في وقت التشغيل لا تفتح الباب أمام عوامل مثل إنشاء مظاهر ديناميكية للتطبيقات، ولكن قد يكون لها تداعيات كبيرة للتصميم سريع الاستجابة وإمكانية تعويض ميزات CSS المستقبلية. مع إصدار Chrome 49، أصبحت هذه الإمكانات متاحة الآن في شكل خصائص CSS المخصّصة.

الخصائص المخصّصة باختصار

تضيف الخصائص المخصصة ميزتين جديدتين إلى مربع أدوات CSS:

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

إليك مثال سريع لتوضيح

:root {
    --main-color: #06c;
}

#foo h1 {
    color: var(--main-color);
}

--main-color هي خاصية مخصّصة من تحديد المؤلف بقيمة #06c. لاحظ أن جميع الخصائص المخصصة تبدأ بشرطتين.

تسترد الدالة var() قيمة السمة المخصّصة وتستبدلها، ما يؤدي إلى ظهور color: #06c;. ما دام تم تحديد الخاصية المخصّصة في مكان ما في ورقة الأنماط، يجب أن تكون متاحة للدالة var.

قد تبدو الصيغة غريبة بعض الشيء في البداية. يسأل العديد من المطورين، "لماذا لا نستخدم $foo فقط لأسماء المتغيرات؟" تم اختيار هذا النهج بشكل خاص ليكون مرنًا قدر الإمكان مع السماح باستخدام وحدات ماكرو $foo في المستقبل. بالنسبة إلى الخلفية الدرامية، يمكنك قراءة هذه المشاركة التي نشرها أحد مؤلفي المواصفات، وهو "Tab Atkins".

بنية الموقع المخصّص

بنية الموقع المخصّص بسيطة.

--header-color: #06c;

تجدر الإشارة إلى أنّ الخصائص المخصّصة حسّاسة لحالة الأحرف، وبالتالي فإنّ --header-color و--Header-Color هما خاصتان مخصّصتان مختلفتان. على الرغم من أنها قد تبدو بسيطة في القيمة الاسمية، إلا أن بناء الجملة المسموح به للخصائص المخصّصة هو في الواقع متساهِل تمامًا. على سبيل المثال، في ما يلي خاصية مخصّصة صالحة:

--foo: if(x > 5) this.width = 10;

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

الشلال

تتّبع الخصائص المخصّصة قواعد التتالي القياسية، وبالتالي يمكنك تحديد الموقع نفسه على مستويات مختلفة من الخصوصية.

:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }

<p>I inherited blue from the root element!</p>
<div>I got green set directly on me!</div>
<div id="alert">
    While I got red set directly on me!
    <p>I’m red too, because of inheritance!</p>
</div>

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

:root {
    --gutter: 4px;
}

section {
    margin: var(--gutter);
}

@media (min-width: 600px) {
    :root {
    --gutter: 16px;
    }
}

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

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

:root {
    --primary-color: red;
    --logo-text: var(--primary-color);
}

الدالة var()

لاسترداد قيمة الخاصية المخصّصة واستخدامها، عليك استخدام الدالة var(). تبدو بنية الدالة var() كما يلي:

var(<custom-property-name> [, <declaration-value> ]? )

عندما يكون <custom-property-name> هو اسم خاصية مخصّصة محدّدة من قِبل المؤلف، مثل --foo، و<declaration-value> هي قيمة احتياطية يتم استخدامها عندما تكون السمة المخصّصة المشار إليها غير صالحة. يمكن أن تكون القيم الاحتياطية قائمة مفصولة بفواصل، والتي سيتم دمجها في قيمة واحدة. على سبيل المثال، تحدّد السمة var(--font-stack, "Roboto", "Helvetica"); عنصرًا احتياطيًا للسمة "Roboto", "Helvetica". ضع في اعتبارك أن القيم المختصرة، مثل تلك المستخدمة للهامش والمساحة المتروكة، لا تكون مفصولة بفواصل، لذا سيبدو العنصر الاحتياطي المناسب للمساحة المتروكة على هذا النحو.

p {
    padding: var(--pad, 10px 15px 20px);
}

باستخدام هذه القيم الاحتياطية، يمكن لمؤلف المكون كتابة أنماط دفاعية لعنصره:

/* In the component’s style: */
.component .header {
    color: var(--header-color, blue);
}
.component .text {
    color: var(--text-color, black);
}

/* In the larger application’s style: */
.component {
    --text-color: #080;
    /* header-color isn’t set,
        and so remains blue,
        the fallback value */
}

يفيد هذا الأسلوب بشكل خاص في تصنيف مكونات الويب التي تستخدم Shadow DoM، حيث يمكن للخصائص المخصصة اجتياز حدود الظل. يمكن لمؤلف مكون الويب إنشاء تصميم أولي باستخدام القيم الاحتياطية، وعرض "النقاط الثابتة" في شكل خصائص مخصصة.

<!-- In the web component's definition: -->
<x-foo>
    #shadow
    <style>
        p {
        background-color: var(--text-background, blue);
        }
    </style>
    <p>
        This text has a yellow background because the document styled me! Otherwise it
        would be blue.
    </p>
</x-foo>

/* In the larger application's style: */
x-foo {
    --text-background: yellow;
}

عند استخدام var()، هناك بعض المشاكل التي يجب الانتباه إليها. لا يمكن أن تكون المتغيرات أسماء خصائص. على سبيل المثال:

.foo {
    --side: margin-top;
    var(--side): 20px;
}

ومع ذلك، لا يعادل هذا الإعداد margin-top: 20px;. بدلاً من ذلك، يكون التعريف الثاني غير صالح ويتم طرحه كخطأ.

وبالمثل، لا يمكنك (بسلاسة) بناء قيمة يتم توفير جزء منها بواسطة متغير:

.foo {
    --gap: 20;
    margin-top: var(--gap)px;
}

ومرة أخرى، لا يعادل هذا الإعداد margin-top: 20px;. لإنشاء قيمة، أنت بحاجة إلى شيء آخر، وهو الدالة calc().

بناء القيم باستخدام calc()

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

.foo {
    --gap: 20;
    margin-top: calc(var(--gap) * 1px); /* niiiiice */
}

العمل مع الخصائص المخصصة في JavaScript

للحصول على قيمة خاصية مخصّصة في وقت التشغيل، استخدِم الطريقة getPropertyValue() لكائن CSSStyleDeclaration المحسوب.

/* CSS */
:root {
    --primary-color: red;
}

p {
    color: var(--primary-color);
}

<!-- HTML -->
<p>I’m a red paragraph!</p>

/* JS */
var styles = getComputedStyle(document.documentElement);
var value = String(styles.getPropertyValue('--primary-color')).trim();
// value = 'red'

وبالمثل، لضبط قيمة السمة المخصّصة في وقت التشغيل، استخدِم طريقة setProperty() في الكائن CSSStyleDeclaration.

/* CSS */
:root {
    --primary-color: red;
}

p {
    color: var(--primary-color);
}

<!-- HTML -->
<p>Now I’m a green paragraph!</p>

/* JS */
document.documentElement.style.setProperty('--primary-color', 'green');

يمكنك أيضًا ضبط قيمة السمة المخصّصة للإشارة إلى خاصية مخصّصة أخرى في وقت التشغيل باستخدام دالة var() في طلب الإجراء setProperty().

/* CSS */
:root {
    --primary-color: red;
    --secondary-color: blue;
}

<!-- HTML -->
<p>Sweet! I’m a blue paragraph!</p>

/* JS */
document.documentElement.style.setProperty('--primary-color', 'var(--secondary-color)');

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

المتصفحات المتوافقة

في الوقت الحالي، يدعم Chrome 49 وFirefox 42 وSafari 9.1 وiOS Safari 9.3 الخصائص المخصّصة.

الخصائص الديموغرافية

جرِّب النموذج لإلقاء نظرة على جميع الأساليب المثيرة للاهتمام التي يمكنك الاستفادة منها الآن بفضل الخصائص المخصّصة.

محتوى إضافي للقراءة

إذا كان يهمّك معرفة المزيد عن المواقع المخصّصة، قد كتب فيليب والتون من فريق "إحصاءات Google" دليلاً تمهيديًا حول سبب شغفه بالمواقع المخصّصة. ويمكنك متابعة مستوى تقدّمه في المتصفّحات الأخرى من خلال الانتقال إلى chromestatus.com.