@property: إضافة متغيّرات CSS للجيل التالي مع دعم المتصفِّحات العامة

Una Kravets

تاريخ النشر: 12 تموز (يوليو) 2024

إليك ميزة جديدة في CSS. أصبحت قاعدة @property، التي تشكّل جزءًا من مجموعة واجهات برمجة التطبيقات CSS Houdini، متاحة بالكامل الآن في جميع المتصفحات الحديثة. توفّر هذه الميزة المميّزة مستويات جديدة من التحكّم والمرونة في السمات المخصّصة لتنسيق CSS (المعروفة أيضًا باسم متغيّرات CSS)، ما يجعل أوراق الأنماط أكثر ذكاءً وديناميكية.

مزايا @property

• المعنى الدلالي: استخدِم @property لتحديد نوع (بنية) لسماتك المخصّصة. يُعلم ذلك المتصفّح بنوع البيانات التي يحتوي عليها موقعك المخصّص (مثل الألوان أو الأطوال أو الأرقام)، ما يمنع ظهور نتائج غير متوقّعة ويوفّر إمكانيات جديدة، مثل إضافة تأثيرات متحركة إلى التدرّجات.
• القيم الاحتياطية: لن تختفي الأنماط بعد الآن. استخدِم @propertyلضبط قيمة أولية لسمة مخصّصة. وفي حال تعيين قيمة غير صالحة لاحقًا، سيستخدم المتصفّح القيمة الاحتياطية المحدّدة.
• معالجة الأخطاء المحسّنة: توفّر أمان الأنواع المحسّن وإمكانية ضبط العناصر الاحتياطية فرصًا جديدة للاختبار والتحقّق من الصحة مباشرةً في ملف CSS.

إنشاء خصائص مخصّصة متقدّمة

لإنشاء سمة مخصّصة "عادية"، اضبط اسم سمة مسبوقًا برمز -- وامنح هذه السمة قيمة. ويُحلّل المتصفّح قيمة هذه السمات المخصّصة كسلسلة.

يوضّح المثال التالي كيفية بدء سمة مخصّصة تلقائية (تستند إلى سلسلة).

:root {
 --myColor: hotpink;
}

للاستفادة من مزايا "السمات المخصّصة المتقدّمة" هذه، بما في ذلك الدلالات التي تتجاوز السلسلة، سجِّل السمة المخصّصة لأسلوب CSS باستخدام @property.

في هذا المثال، يتمّ إعداد السمة المخصّصة نفسها باستخدام @property.

@property --myColor {
    syntax: '<color>';
    inherits: false;
    initial-value: hotpink;
  }

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

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

عرض توضيحي: خلفية متدرّجة ومبهرة

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

ويمكن تحقيق ذلك من خلال إعداد قيم المواقع المخصّصة على أنّها ألوان:

@property --card-bg {
  syntax: "<color>";
  inherits: false;
  initial-value: lavender;
}

@property --shine-1 {
  syntax: "<color>";
  inherits: false;
  initial-value: wheat;
}

@property --shine-2 {
  syntax: "<color>";
  inherits: false;
  initial-value: lightpink;
}

بعد ذلك، يمكنك الوصول إليها لإنشاء الخلفية المتدرجة الأولية:

.card {
background: radial-gradient(
      300px circle at 55% 60% in oklab,
      var(--shine-2), transparent 100% 100%),
      radial-gradient(farthest-side circle at 75% 30% in oklab,
      var(--shine-1) 0%, var(--card-bg) 100%);
}

بالإضافة إلى ذلك، يمكنك بعد ذلك تعديل القيم في الإطارات الرئيسية:

@keyframes animate-color-1 {
  to {
    --shine-1: orange;
  }
}

@keyframes animate-color-2 {
  to {
    --shine-2: hotpink;
  }
}

أضِف الحركة إلى كلّ من:

animation: animate-color-1 8s infinite linear alternate, animate-color-2 1s infinite linear alternate;

الخاتمة

إنّ السمات المخصّصة المسجّلة في CSS هي ميزة فعّالة جدًا تعمل على توسيع نطاق لغة CSS من خلال توفير معنى وسياق لمتغيّرات CSS. والآن، مع طرح @property في الإصدار الأساسي، تزداد قوة هذه الميزة في CSS.

موادّ إضافية للقراءة

• مستندات ويب MDN
• @property: منح قدرات خارقة لمتغيّرات CSS