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

Rob Dodson

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

ازدحام CSS

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

في الآونة الأخيرة، اتجه العديد من المطوّرين إلى استخدام أدوات معالجة CSS المسبقة، مثل SASS أو LESS، التي تحلّ هذه المشكلة من خلال استخدام متغيّرات أدوات المعالجة المسبقة. على الرغم من أنّ هذه الأدوات قد عزّزت إنتاجية المطوّرين بشكل كبير، إلا أنّ المتغيّرات التي يستخدمونها تعاني من عيب كبير، وهو أنّها ثابتة ولا يمكن تغييرها أثناء التشغيل. إنّ إضافة إمكانية تغيير المتغيّرات أثناء التشغيل لا تؤدي فقط إلى فتح الباب أمام أشياء مثل تصميم التطبيقات الديناميكي، بل لها أيضًا تبعات مهمة على التصميم السريع الاستجابة وإمكانية استخدام polyfill لميزات 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)');

بما أنّ السمات المخصّصة يمكن أن تشير إلى سمات مخصّصة أخرى في جداول الأنماط، يمكنك تخيُّل كيف يمكن أن يؤدّي ذلك إلى جميع أنواع تأثيرات أثناء التشغيل المثيرة للاهتمام.

دعم المتصفح

تتوفّر الخصائص المخصّصة حاليًا في الإصدار 49 من Chrome والإصدار 42 من Firefox والإصدار 9.1 من Safari والإصدار 9.3 من Safari على أجهزة iOS.

عرض توضيحي

جرِّب عيّنة لالتقاط لمحة عن جميع الأساليب المثيرة للاهتمام التي يمكنك الاستفادة منها الآن بفضل المواقع المخصّصة.

مراجع إضافية

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