تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

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

Una Kravets

الاستعداد لتعزيز أداء خدمة مقارنة الأسعار (CSS) أصبحت القاعدة @property التي تشكّل جزءًا من مظلة CSS Houdini لواجهات برمجة التطبيقات (CSS) لواجهات برمجة تطبيقات هوديني متاحة بالكامل على جميع المتصفّحات الحديثة. تتيح هذه الميزة المميّزة إمكانية الوصول إلى مستويات جديدة من التحكّم والمرونة في خصائص 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 لتحريك الألوان في تدرج خلفية

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

@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 الخارقة.