Frontend Academy · درس

خصائص CSS المخصّصة: التصريح والتحديث

صرّح بالمتغيرات باستخدام -- على :root، وأشر إليها باستخدام var()، وحدّثها ديناميكيًا باستخدام JavaScript لتطبيق السمات مباشرة.

خصائص CSS المخصّصة: التصريح والتحديث درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.

مراجعة: التصريح وتحديد النطاق

يُصرَّح عن خصائص CSS المخصصة باستخدام البادئة -- على أي عنصر. وتكون الخصائص المصرَّح عنها على :root متاحة عالميًا. وترث العناصر الفرعية القيم، ويمكنها تجاوزها محليًا.

:root {
  --spacing: 8px;
  --color-brand: #6366f1;
}
.card {
  --spacing: 12px; /* local override for .card and its children */
  padding: var(--spacing);
}

التحديثات الفورية عبر JavaScript

يمكن تغيير الخصائص المخصصة أثناء التشغيل. استخدم element.style.setProperty('--name', value) لتجاوز القيمة على مستوى العنصر، أو حدّث متغيرًا عامًا على :root للتأثير فورًا في جميع العناصر المستخدمة له.

// Change globally:
document.documentElement.style.setProperty('--color-brand', '#ef4444');

// Change locally on one element:
const card = document.querySelector('.card');
card.style.setProperty('--bg', '#f9f9f9');

قراءة قيم الخصائص المخصصة في JS

اقرأ خاصية مخصصة باستخدام getComputedStyle(element).getPropertyValue('--name').trim(). يقرأ ذلك القيمة المحسوبة (المتسلسلة)، وليس القيمة المضمّنة فقط.

const brandColor = getComputedStyle(document.documentElement)
  .getPropertyValue('--color-brand')
  .trim();
console.log(brandColor); // '#6366f1'

تحريك الخصائص المخصصة

يمكن للمتصفح استيفاء الخصائص المخصصة باستخدام @property (Houdini)، أو استخدامها في الانتقالات عند دمجها مع calc(). ومن دون @property، لا تستطيع المتصفحات الانتقال مباشرةً بين قيم المتغير.

@property — الخصائص المخصصة المسجّلة

تسجّل قاعدة CSS ‏@property خاصية مخصصة مع نوع وقيمة ابتدائية وقاعدة للتوريث. ويمكن إجراء الانتقالات والتحريك للخصائص المسجّلة بشكل أصلي.

@property --brand-opacity {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

.card {
  opacity: var(--brand-opacity);
  transition: --brand-opacity 0.3s;
}
.card:hover {
  --brand-opacity: 0.7;
}

أنظمة الرموز باستخدام الخصائص المخصصة

نموذج رموز التصميم: خزّن جميع قرارات التصميم كخصائص مخصصة. وتستخدم المكونات الرموز بدلًا من القيم الثابتة في الشيفرة. يؤدي تغيير رمز إلى نشر التغيير في كل مكان.

:root {
  /* Colour tokens */
  --token-primary: #6366f1;
  --token-primary-hover: #4f46e5;
  --token-surface: #ffffff;
  --token-on-surface: #1f2937;

  /* Spacing tokens */
  --token-space-sm: 8px;
  --token-space-md: 16px;
  --token-space-lg: 24px;
}

الخصائص المخصصة المتجاوبة

غيّر قيم الخصائص المخصصة داخل استعلامات الوسائط. وستتكيف المكونات التي تستخدم المتغيرات تلقائيًا، وهذا أنظف من كتابة قواعد منفصلة للمكونات عند كل نقطة توقف.

:root {
  --container-max: 640px;
  --font-size-base: 15px;
}
@media (min-width: 1024px) {
  :root {
    --container-max: 1280px;
    --font-size-base: 16px;
  }
}

الخصائص المخصصة في calc()

استخدم المتغيرات داخل calc() لاشتقاق المسافات والأحجام. ينشئ ذلك نظام أحجام متماسكًا ومتسقًا رياضيًا.

:root { --base-space: 8px; }
.m-2 { margin: calc(var(--base-space) * 2); }  /* 16px */
.m-4 { margin: calc(var(--base-space) * 4); }  /* 32px */
.p-3 { padding: calc(var(--base-space) * 3); } /* 24px */

تطبيق السمات على علامات تجارية متعددة

حدّد رموز سمات مختلفة لكل data-attribute. ويمكن لصفحة واحدة دعم سمات متعددة للعلامة البيضاء.

[data-theme='brand-a'] { --primary: #2563eb; }
[data-theme='brand-b'] { --primary: #16a34a; }
[data-theme='brand-c'] { --primary: #dc2626; }

الخصائص المخصصة في SVG

يمكن لسمات SVG مثل fill وstroke استخدام الخصائص المخصصة. يتيح لك ذلك تطبيق سمات على الأيقونات من CSS دون تعديل ترميز SVG.

/* CSS */
:root { --icon-fill: #6366f1; }

/* SVG inline or referenced */
svg { fill: var(--icon-fill); }

تصحيح أخطاء الخصائص المخصصة

في Chrome DevTools، حدّد عنصرًا وابحث عن قيم الخصائص المخصصة في تبويب Computed. يعرض جزء Styles موضع التصريح عن كل متغير. ويعرض قسم Inherited المتغيرات الموروثة من العناصر الأصلية.

تحقق سريع

ما طريقة JavaScript التي تحدّث خاصية CSS مخصصة على عنصر؟

مراجعة: الخصائص المخصصة في CSS بعمق

صرّح عنها على :root للقيم العامة، وتجاوزها على العناصر الفرعية لتحديد النطاق المحلي. حدّثها باستخدام style.setProperty من JS. واقرأها باستخدام getComputedStyle. تتيح @property الانتقالات الأصلية. استخدمها كرموز تصميم لتوفير مصدر واحد للحقيقة. وتجاوزها داخل استعلامات الوسائط للرموز المتجاوبة.

الأسئلة الشائعة

هل درس «خصائص CSS المخصّصة: التصريح والتحديث» مجاني؟

نعم — نص درس «خصائص CSS المخصّصة: التصريح والتحديث» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.

ماذا ستتعلم في «خصائص CSS المخصّصة: التصريح والتحديث»؟

صرّح بالمتغيرات باستخدام -- على :root، وأشر إليها باستخدام var()، وحدّثها ديناميكيًا باستخدام JavaScript لتطبيق السمات مباشرة. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟

لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «خصائص CSS المخصّصة: التصريح والتحديث»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟

نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Frontend Academy