الاستعداد لتعزيز أداء خدمة مقارنة الأسعار (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 الخارقة.