تحدث ستاس ميلنيكوف ، مؤلف دورة HTML HTML Layout ، عن الفروق الدقيقة التي يمكن أن تعقد العمل مع خصائص CSS المخصصة.قواعد بناء اسم الخاصية المخصصة
لقد اعتدنا على حقيقة أن خصائص CSS المضمنة غير حساسة لحالة الأحرف. لذلك ، ستعطي الطرق التالية لإعلان خاصية
border نفس النتيجة:
button { BORDER: 2px solid
خصائص مخصصة ، على النقيض من ذلك ، حساسة لحالة الأحرف ، لذلك المثال التالي بإنشاء خاصيتين مخصصتين مختلفتين:
button { --NETOLOGY-BRAND-COLOR:
الآن أصبح الإطار # 800080 (أرجواني) ، وأصبح النص # 27ae60 (أخضر).
قيم صالحة للخصائص المخصصة
بالنسبة إلى خاصية CSS عادية ، يمكنك فقط تعيين القيم المسموح بها بواسطة المعيار. وفقًا لمعيار الخاصية المخصصة ، يمكن استخدام أي قيمة CSS صالحة كقيمة. على سبيل المثال ، كما هو الحال مع كافة الخصائص المخصصة التالية:
.element::before { --color: rgba(0, 0, 0, 1); --hex:
على سبيل المثال ، لنقم بتعيين الإطار بلون # 800080 للزر:
button { --netologyBrandColor:
بالإضافة إلى القيم القياسية ، يمكنك تعيين خاصية مخصصة واحدة كقيمة لآخر.
button { --netologyBrandColor:
لا تختلف النتيجة عن سابقتها ، ولا يزال للزر إطار ذو لون # 800080.
إذا كانت خاصية المستخدم
--netologyBrandColor تحتوي على قيمة غير صحيحة لخاصية
border-color ، على سبيل المثال 18px ، فسوف يتحول الإطار إلى اللون الأسود.
button { --netologyBrandColor: 18px; --buttonBorderColor: var(--netologyBrandColor); border-width: 2px; border-style: solid; border-color: var(--buttonBorderColor); }
الحقيقة هي أنه قبل أن يطبق المستعرض قيمة خاصية المستخدم للخاصية المدمجة ، فإنه سيفحصها للتأكد من صحتها. إذا كانت القيمة متوفرة للخاصية المضمنة ، فسيطبقها المتصفح. إذا لم يكن كذلك ، فستقوم بتعيين القيمة الافتراضية للخاصية المضمنة.
في حالتنا ، يعد 18px قيمة غير صحيحة للخاصية
border-color المدمجة ، وبالتالي فإن المتصفح سوف يقوم بتعيين القيمة الافتراضية ، أي
currentColor . هذا سهل جدًا للتحقق من خلال تعيين خاصية
color على # 800080:
button { --netologyBrandColor: 18px; --buttonBorderColor: var(--netologyBrandColor); border-width: 2px; border-style: solid; border-color: var(--buttonBorderColor); color:
كما ترى ، قام المتصفح بتطبيق القيمة رقم 800080 للإطار. في هذا المثال ، استخدمت بناء الجملة الكامل لضبط الإطار. ولكن يمكننا استخدام واحدة قصيرة ، وهي خاصية
border .
button { --netologyBrandColor: 18px; --buttonBorderColor: var(--netologyBrandColor); border: 2px solid var(--buttonBorderColor); color:
نحن هنا في انتظار فارق بسيط آخر. يوجد قسم منفصل في المعيار يصف سلوك الخصائص المخصصة في مثل هذا الموقف. وفقًا له ، إذا كانت خاصية المستخدم تحتوي على قيمة غير صحيحة لخاصية مضمنة ، فإن خاصية المستخدم هذه غير صالحة ، لذلك سيتجاهل المستعرض الخاصية المضمنة.
في مثالنا ، تحتوي خاصية
border المضمنة على إحدى القيم التي تم تعيينها إلى الخاصية المخصصة -
--buttonBorderColor بقيمة غير صحيحة تبلغ 18 بكسل. وفقًا للخوارزمية الموصوفة ، تجاهل المستعرض ببساطة خاصية
border ، وبالتالي فقد العنصر الحد.
القيمة الافتراضية للخصائص المخصصة
عندما نظرنا إلى مثال دالة
var ، استخدمنا معلمة واحدة فقط - اسم الخاصية المخصصة.
button { --netologyBrandColor:
لكن إلى جانب ذلك ، يمكن أن تقبل الدالة
var القيمة الثانية - القيمة الافتراضية. لإعلان قيمة افتراضية ، تحتاج إلى وضع فاصلة بعد اسم الخاصية المخصصة وكتابة القيمة نفسها.
عندما يدرك المستعرض أن المطور لم يعلن عن قيمة للخاصية المخصصة ، فإنه يستخدم القيمة الافتراضية. على سبيل المثال ، القيمة # 800080 (الأرجواني) لخاصية مخصصة هي
--netologyBrandColor .
button { border: 2px solid var(--netologyBrandColor,
نرى الإطار والنص يتحول إلى اللون الأرجواني. ولكن إذا قمت بتحريك الزر ، فسوف يتحول إلى اللون الأخضر. يشير هذا إلى أن المتصفح قام بتطبيق القيمة # 27ae60 على خاصية المستخدم ، وبالتالي استبدال القيمة الافتراضية.
ولكن هذا ليس كل الاحتمالات وظيفة
var . في المثال السابق ،
--netologyBrandColor استخدام الخاصية المخصصة
--netologyBrandColor مرتين ، على التوالي ، لذلك قمت بتعيين القيمة الافتراضية مرتين.
ولكن يمكن القيام به بشكل مختلف. تسمح لك وظيفة
var بتمرير وظيفة
var أخرى ، بحيث يمكنك تعيين خاصية مخصصة أخرى كقيمة افتراضية.
--defaultButtonColor كتابة المثال السابق باستخدام الخاصية المخصصة
--defaultButtonColor :
button { --defaultButtonColor:
ظاهريا ، لن تتغير النتيجة. ولكن الآن لتغيير القيمة الافتراضية ، يجب عليك القيام بذلك فقط في مكان واحد ، وليس في عدة ، كما كان من قبل.
وراثة الخصائص المخصصة
يحتوي CSS على آلية وراثة تتيح للعناصر وراثة الخصائص من العناصر الأصل. في هذا الصدد ، الخصائص المخصصة لا تختلف عنها. على سبيل المثال ، سأكتب الكود الذي
--netologyBrandColor الخاصية المخصصة -
--netologyBrandColor من عنصر النص الأصلي.
body { --netologyBrandColor:
عند النظر إلى المفتش ، يمكنك أن تلاحظ النقش "موروثة من الجسم" ، والذي يوضح لنا أن الخاصية المخصصة مأخوذة من العنصر الأساسي. ولكن إذا أضفنا الخاصية المخصصة
--netologyBrandColor لعنصر
button ، فإنه يتجاوز الخاصية بالفعل من العنصر الأساسي.
body { --netologyBrandColor:
يوضح المفتش أن الخاصية المخصصة -
--netologyBrandColor لعنصر
button تتخطى الخاصية
--netologyBrandColor ، والتي حددناها للعنصر الأساسي.
القيم العالمية
في معيار CSS ، قدمت Custom Properties
root زائفة
root خاصة تسمح لك بتحديد الخصائص المخصصة التي تنطبق على العنصر الجذر للمستند. على سبيل المثال ، في مستند
html لعنصر
html .
:root { --netologyBrandColor:
في المفتش ، يمكننا أن نرى أن الخاصية المخصصة المعلنة يتم تطبيقها على عنصر html. ولكن ، بالإضافة إلى مستند HTML ، تعمل
root المزيف في مستندات SVG. على سبيل المثال ، سأعلن عن الخصائص المخصصة في علامة
style .
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 28" width="50" height="50"> <style> :root{ --iconColor:
وهنا نرى أنه
root إضافة
root الجذر الزائفة إلى عنصر الجذر SVG. وفقًا لذلك ، هذا يثبت أن فئة الجذر الزائفة تنطبق ليس فقط على علامة
html ، ولكن أيضًا على أي عنصر الجذر.
الخاتمة
في هذه المقالة ، التقينا مع مطبات الخصائص المخصصة التي يمكن أن تكون مربكة. وفقا لذلك ، يمكننا أن نبدأ في استخدامها. لذلك ، في المقالة التالية سأتحدث عن الحيل العملية التي أستخدمها في مشاريعي.
من المحررين
دورات Netology حول الموضوع: