مرحبا يا هبر! أقدم إليكم ترجمة المقالة
"أهم 5 أسباب تجعلي أحب خصائص CSS المخصصة" لستاس ميلنيكوف
غيّرت مواصفات خاصية CSS المخصصة وجهة نظري لتطوير الويب إلى الأبد. لهذا السبب أريد أن أكتب لماذا أنا أحب خصائص CSS المخصصة.
ما هي خصائص CSS المخصصة؟
باختصار ، خصائص CSS المخصصة هي خصائص تم إنشاؤها بواسطة المطور. لا يعرف المتصفح أي شيء عنها حتى يحددها المطور.
يبدأ الإعلان عن أي خاصية مخصصة بشرطة اثنين ، وبعد ذلك يجب إضافة اسم الخاصية. ثم قمت بإضافة اللون وتعيين قيمة الممتلكات.
على سبيل المثال ، قمت بإنشاء الخاصية melnik909BrandColor ، بقيمة
أرجوانية لعنصر
الزر :
button { --melnik909BrandColor: purple; }
فار وظيفة
الميزة الأولى لخصائص CSS المخصصة هي وظيفة
var . باستخدام هذه الوظيفة ، يمكنني إخبار المستعرض بأخذ قيمة الخاصية المخصصة وإضافتها إلى أي خاصية CSS.
للقيام بذلك ، يجب أن أقوم بتحديد خاصية CSS وأضف قيمة هذه الخاصية ، وفي نفس المكان قم بتعيين الدالة
var مع خاصية مخصصة كوسيطة.
على سبيل المثال ، أضفت خاصية --melnik909BrandColor لخصائص الحدود واللون.
button { --melnik909BrandColor: purple; color: var(--melnik909BrandColor); border: 2px solid var(--melnik909BrandColor); }
يمكن تغيير الخصائص المخصصة مباشرة في المتصفح
قد يقول قارئ ذو خبرة يعرف أدوات مثل Sass أو LESS ،
"Stas ، لماذا يجب أن أدرس الخصائص المخصصة لـ CSS؟ أعرف متغيرات Sass وهذا يكفي بالنسبة لي .
"تحذير! تساعد متغيرات Sass و LESS في تنظيم CSS بحيث يكون من السهل على المطورين الاحتفاظ بالكود. على سبيل المثال ، قمت بإنشاء متغير $ melnik909BrandColor الذي قمت بحفظ اللون فيه:
$melnik909BrandColor: purple; button { color: $melnik909BrandColor; border: 2px solid $melnik909BrandColor; }
بعد التحويل البرمجي ، سأرى الرمز التالي في المتصفح:
button { color: purple; border: 2px solid purple; }
يوضح هذا المثال أن متغيرات Sass و LESS ليست في المستعرض.
الميزة الثانية لخصائص CSS المخصصة هي أنها في المتصفح. بهذه الطريقة ، يمكنني تغيير القيم هناك. على سبيل المثال ، يمكنني تغيير قيمة الخاصية —melnik909BrandColor لحالة تحديد عنصر
الزر :
button { --melnik909BrandColor: purple; color: var(--melnik909BrandColor); border: 2px solid var(--melnik909BrandColor); } button:hover { --melnik909BrandColor: #27ae60; }
يمكنك استخدام خصائص CSS المخصصة واستعلامات الوسائط معًا
الميزة الثالثة لخصائص CSS المخصصة هي أنه يمكن تغيير قيمها باستخدام استعلامات الوسائط. على سبيل المثال ، أقوم بتعريف خاصية melnik909BrandColor لتغيير لون نص العنصر الأساسي على أجهزة مختلفة.
body { color: var(--melnik909BrandColor); } @media (max-width: 768px) { body { --melnik909BrandColor: purple; } } @media (min-width: 769px) { body { --melnik909BrandColor: tomato; } }
احسب وظيفة وخصائص CSS المخصصة
هناك أوقات نحتاج فيها إلى استخدام وظيفة
calc . على سبيل المثال ، أود استخدام هذه الوظيفة عندما أحتاج إلى حساب عدد العناصر في صف واحد:
.child { width: calc(100% / 4); } .child { width: calc(100% / 3); }
ومع ذلك ، من الصعب إعادة استخدام هذا الرمز ، وهنا ستساعدنا خصائص CSS المخصصة. يمكننا إنشاء متغير يقرأ عدد العناصر. على سبيل المثال ، سأضيف الخاصية –- بنود عدد إلى المثال السابق:
.child { width: calc(100% / var(--itemsNumber)); }
وسأحدد القيم في العنصر
الأصل :
.parent { --itemsNumber: 5; } .parent { --itemsNumber: 7; }
ناقلات الرسومات التخصيص
هناك طريقتان لتخصيص الرسومات المتجهة باستخدام خصائص CSS مخصصة.
في الطريقة الأولى ، نحدد سمات
ملء ، حد ، وعرض حد ، وإضافة خصائص CSS مخصصة لهم كقيمة لهم.
علاوة على ذلك ، يمكننا إضافة قيم السمات عن طريق تعيين قيم الخصائص المخصصة:
<svg class="svg-with-attr" viewBox="0 0 55.867 55.867"> <path stroke="var(--iconStroke)" stroke-width="var(--iconStrokeWidth)" fill="var(--iconFill)" d="..."> </svg>
الآن يمكننا إضافة قيم السمات من خلال تحديد قيمة الخصائص المخصصة:
.svg-with-attr { --iconFill: #eeeeee; --iconStroke: #000000; --iconStrokeWidth: 1px; }
على اليسار يوجد الرمز الافتراضي بدون أنماط ، وعلى اليمين يوجد الرمز مع الأنماط.
في الطريقة الثانية ، نحدد خصائص CSS المخصصة لخصائص الحد
، وعرض الحد ، وملء الخصائص باستخدام قواعد CSS.
body { --iconFill: #ffcc00; --iconStroke: #000000; --iconStrokeWidth: 2px; } .svg-with-props { stroke: var(--iconStroke); stroke-width: var(--iconStrokeWidth); fill: var(--iconFill); }