متغيرات CSS (خصائص مخصصة)

اكتشف خصائص CSS المخصصة ، والتي تسمى أيضًا CSS Variables ، وهي ميزة جديدة قوية للمتصفحات الحديثة تساعدك على كتابة CSS بشكل أفضل

مقدمة

في السنوات القليلة الماضية ، حقق معالجات CSS المسبقة نجاحًا كبيرًا. كان من الشائع جدًا أن تبدأ المشاريع الجديدة بـ Less أو SASS. ولا تزال تقنية شائعة جدًا.

الفوائد الرئيسية لهذه التقنيات ، في رأيي ، هي:

  • أنها تسمح لتداخل المحددات
  • توفر وظيفة استيراد سهلة
  • يعطونك المتغيرات

يحتوي CSS الحديث على ميزة قوية جديدة تسمىخصائص CSS المخصصة، المعروف أيضًا باسممتغيرات CSS.

CSS ليست لغة برمجة مثلJavaScriptأو Python أو PHP أو Ruby أو Go حيث تكون المتغيرات أساسية للقيام بشيء مفيد. إن CSS محدودة للغاية فيما يمكن أن تفعله ، وهي أساسًا بناء جملة تعريفي لإخبار المتصفحات بكيفية عرض صفحة HTML.

لكن المتغير هو متغير: الاسم الذي يشير إلى قيمة ، والمتغيرات في CSS تساعد في تقليل التكرار وعدم الاتساق في CSS ، من خلال تركيز تعريف القيم.

ويقدم ميزة فريدة لن تتوفر لدى معالجات CSS الأولية:يمكنك الوصول إلى قيمة متغير CSS وتغييرها برمجيًا باستخدام JavaScript.

أساسيات استخدام المتغيرات

يتم تعريف متغير CSS ببنية خاصة ، مُسبقةشرطانلاسم (--variable-name) ، ثم نقطتان وقيمة. مثله:

:root {
  --primary-color: yellow;
}

(المزيد عند:rootفي وقت لاحق)

يمكنك الوصول إلى القيمة المتغيرة باستخدامvar():

p {
  color: var(--primary-color)
}

يمكن أن تكون القيمة المتغيرة أي قيمة CSS صالحة ، على سبيل المثال:

:root {
  --default-padding: 30px 30px 20px 20px;
  --default-color: red;
  --default-background: #fff;
}

إنشاء متغيرات داخل أي عنصر

يمكن تعريف متغيرات CSS داخل أي عنصر. بعض الأمثلة:

:root {
  --default-color: red;
}

body { –default-color: red; }

main { –default-color: red; }

p { –default-color: red; }

span { –default-color: red; }

a:hover { –default-color: red; }

ما هي التغييرات في تلك الأمثلة المختلفة هوالكائن.

نطاق المتغيرات

إن إضافة متغيرات إلى محدد يجعلها متاحة لجميع الأطفال التابعين لها.

في المثال أعلاه رأيت استخدام:rootعند تحديد متغير CSS:

:root {
  --primary-color: yellow;
}

:rootهي فئة CSS زائفة تحدد العنصر الجذر للشجرة.

في سياق مستند HTML ، باستخدام امتداد:rootالمحدد يشير إلىhtmlعنصر ، ما عدا ذلك:rootلديه أعلىالنوعية(لها الأولوية).

في سياق صورة SVG ،:rootيشير إلىsvgبطاقة شعار.

إضافة خاصية مخصصة CSS إلى:rootيجعله متاحًا لجميع العناصر الموجودة في الصفحة.

إذا قمت بإضافة متغير داخل أ.containerالمحدد ، سيكون متاحًا فقط لأطفال.container:

.container {
  --secondary-color: yellow;
}

واستخدامه خارج هذا العنصر لن ينجح.

يمكن أن تكون المتغيراتأعيد تعيينها:

:root {
  --primary-color: yellow;
}

.container { –primary-color: blue; }

الخارج.containerو--primary-colorسوف يكونأصفر، ولكن سيكون بداخلهأزرق.

يمكنك أيضًا تعيين أو الكتابة فوق متغير داخل HTML باستخدامالأنماط المضمنة:

<main style="--primary-color: orange;">
  <!-- ... -->
</main>

متغيرات CSS تتبع العاديقواعد CSS المتتالية، مع تحديد الأسبقية وفقًا لـالنوعية

التفاعل مع قيمة CSS Variable باستخدام JavaScript

أروع شيء مع CSS Variables هو القدرة على الوصول إليها وتحريرها باستخدام JavaScript.

إليك كيفية تعيين قيمة متغيرة باستخدام JavaScript عادي:

const element = document.getElementById('my-element')
element.style.setProperty('--variable-name', 'a-value')

يمكن استخدام هذا الرمز أدناه للوصول إلى قيمة متغيرة بدلاً من ذلك ، في حالة تحديد المتغير على:root:

const styles = getComputedStyle(document.documentElement)
const value = String(styles.getPropertyValue('--variable-name')).trim()

أو ، للحصول على النمط المطبق على عنصر معين ، في حالة تعيين المتغيرات بنطاق مختلف:

const element = document.getElementById('my-element')
const styles = getComputedStyle(element)
const value = String(styles.getPropertyValue('--variable-name')).trim()

معالجة القيم غير الصالحة

إذا تم تعيين متغير لخاصية لا تقبل قيمة المتغير ، فيُعتبر غير صالح.

على سبيل المثال ، يمكنك تمرير قيمة بكسل إلى ملفpositionأو قيمة rem لخاصية اللون.

في هذه الحالة يعتبر الخط غير صالح ويتم تجاهله.

دعم المتصفح

دعم المستعرض لمتغيرات CSS هوجيد جداووفقًا لـ Can I Use.

متغيرات CSS موجودة لتبقى ، ويمكنك استخدامها اليوم إذا لم تكن بحاجة إلى دعم Internet Explorer والإصدارات القديمة من المتصفحات الأخرى.

إذا كنت بحاجة إلى دعم المتصفحات القديمة ، يمكنك استخدام مكتبات مثلPostCSSأوخرافة، لكنك ستفقد القدرة على التفاعل مع المتغيرات عبر JavaScript أو Browser Developer Tools ، حيث يتم تحويلها إلى CSS القديم الجيد الأقل متغيرًا (وعلى هذا النحو ، تفقد معظم قوة CSS Variables).

متغيرات CSS حساسة لحالة الأحرف

هذا المتغير:

--width: 100px;

يختلف عن:

--Width: 100px;

الرياضيات في متغيرات CSS

للقيام بالرياضيات في CSS Variables ، عليك استخدامcalc()، على سبيل المثال:

:root {
  --default-left-padding: calc(10px * 2);
}

استعلامات الوسائط بمتغيرات CSS

لا يوجد شيء مميز هنا. تنطبق متغيرات CSS عادةً على استعلامات الوسائط:

body {
  --width: 500px;
}

@media screen and (max-width: 1000px) and (min-width: 700px) { –width: 800px; }

.container { width: var(width); }

تعيين قيمة احتياطية لـ var ()

var()يقبل معلمة ثانية ، وهي القيمة الاحتياطية الافتراضية عندما لا يتم تعيين قيمة المتغير:

.container {
  margin: var(--default-margin, 30px);
}

تحميل مجانيكتيب CSS


المزيد من دروس css: