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

Rob Dodson

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

فوضى CSS

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

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

هذه التقنية مفيدة بشكل خاص لتحديد مواضيع مكونات الويب التي تستخدم الظل نموذج العناصر في المستند (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.