الخصائص المخصّصة

لنفترض أنّك كنت تعمل على إنشاء بعض الأنماط الأولية لموقعك الإلكتروني، ووجدت نفسك تكرّر بعض القيم في CSS. أنت تستخدم اللون dodgerblue كلون أساسي، وتضيفه إلى حدود الأزرار ونص الروابط وخلفيات العناوين، وتستخدم أداة تصميم لاختيار بعض الألوان المشابهة لهذا اللون الأزرق لأجزاء أخرى من الموقع الإلكتروني. بعد ذلك، ستحصل على دليل أسلوب، وسيصبح اللون الأساسي oklch(70% 0.15 270).

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

إنشاء مواقع

أبسط طريقة لإنشاء سمة هي ضبط قيمة لسمة جديدة باسم تحدّده.

.card {
  --base-size: 1em;
}

يجب أن تبدأ جميع أسماء المواقع بشرطتَين. يمنعك ذلك من محاولة استخدام اسم خاصية CSS حالي لقيمة مخصّصة. لن تضيف مواصفات CSS أبدًا خاصية تبدأ بشرطتين.

يمكن بعد ذلك الوصول إلى هذه السمة باستخدام الدالة var(). يضبط هذا المثال حجم الخط ضمن .card-title على ضعف قيمة --base-size.

.card .card-title {
  font-size: calc(2 * var(--base-size));
}

استخدام خاصية مخصّصة

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

الخيارات الاحتياطية

ماذا يحدث إذا حاولت استخدام سمة مخصّصة لم يتم ضبط قيمة لها؟ تأخذ الدالة var() قيمة ثانية سيتم استخدامها كقيمة احتياطية. يمكن أن تكون القيمة الاحتياطية سمة مخصّصة أخرى تحتوي على var() مدمَجة.

#my-element {
  background: var(
    --alert-variant-background,
    var(--alert-primary-background)
  );
}

القيم غير الصالحة

إذا تم تحديد قيمة غير صالحة لسمة مخصّصة، مثل القيمة 1em للسمة background-color، لن يتم استخدام أي تعريفات صالحة أخرى على هذا العنصر لهذه السمة. ويرجع ذلك إلى أنّ المتصفّح لا يمكنه معرفة ما إذا كانت القيمة غير صالحة إلا بعد تجاهل التصريحات الأخرى عند احتساب القيمة. بدلاً من ذلك، ستكون القيمة المستخدَمة قيمة موروثة أو أولية.

.content {
  background-color: blue;
}

.content.invalid {
  --length: 2rem;
  background-color: var(--length);
}

في المثال السابق، لن يكون للعنصر .invalid خلفية زرقاء. بدلاً من ذلك، وبما أنّ السمة background-color لا يتم توريثها، ستكون القيمة transparent، وهي قيمتها الأولية.

التجاوز والاكتساب

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

يتم تحديد الخصائص المخصّصة من خلال التتالي، لذا يمكن أيضًا إلغاؤها بواسطة أداة اختيار أكثر تحديدًا.

المزيد من التحكّم باستخدام @property

يمكن أن يكون أي نوع من الأنواع، ويتم توريثه. للحصول على مزيد من التحكّم في خاصية مخصّصة، يمكنك استخدام القاعدة @property.

سيكون الموقع --base-size الذي أنشأناه سابقًا مكافئًا لبيان @property هذا.

@property --base-size {
  syntax: "*";
  inherits: true;
  initial-value: 18px;
}

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

عند إنشاء سمة مخصّصة باستخدام @property، يمكنك إيقاف الميزة باستخدام inherit: false. يؤدي تجاوز قيمة خاصية مخصّصة مع إيقاف ميزة "الاكتساب" إلى تغييرها للعنصر المحدّد، ولكن ليس للعناصر الثانوية. يكون ذلك مفيدًا غالبًا عندما تستهدف محدّدات متعددة العنصر نفسه.

تحدّد السمة initial-value قيمة الخاصية، ما لم يتم تغييرها لاحقًا. ما لم تكن البنية *، أي أي نوع CSS، يجب أن يضبط @property initial-value. يضمن ذلك أنّه سيكون للسمة دائمًا قيمة الصيغة المحدّدة، ولن تكون غير محدّدة أبدًا.

تعديل الخصائص المخصّصة باستخدام JavaScript

يمكن تعديل قيمة سمة مخصّصة في عنصر باستخدام JavaScript، ويمكنك استخدامها لتعديل أنماط موقعك الإلكتروني بشكلٍ ديناميكي.

const element = document.getElementById("my-button");
getComputedStyle(element).setPropertyValue("--color", orange);

يعدّل هذا المثال علامة النمط في العنصر #my-button، وعند فحصه في "أدوات مطوّري البرامج"، يظهر لك ما يلي:

<button id="my-button" style="--color: orange">Click me</button>

في المثال السابق، يمكنك الاطّلاع على كيفية ضبط السمات المخصّصة من خلال الوصول إلى البيانات المخزّنة في سمات HTML المخصّصة. يحتوي كل زر على السمة data-color بقيمة لون معيّن. تتم إعادة ضبط مجموعة السمات المخصّصة --background في عنصر body إلى قيمة data-color على أي زر يتم النقر عليه.

يمكنك أيضًا استخدام getComputedStyle(element).getPropertyValue("--variable") للحصول على قيمة سمة في عنصر معيّن. يمكن أن يكون هذا الإجراء مفيدًا إذا كان منطقك بحاجة إلى الاستجابة لقيمة متتالية.