خاصية @property في CSS: إتقان تعريف أنواع الخصائص المخصصة والتحقق من صحتها

في المشهد المتطور باستمرار لتطوير الويب، يتطلب البقاء في الطليعة تبني تقنيات وأساليب جديدة تعزز الكفاءة وقابلية الصيانة وتجربة المستخدم الإجمالية. لقد أحدثت خصائص CSS المخصصة، المعروفة أيضًا باسم متغيرات CSS، ثورة في طريقة إدارتنا للأنماط والتحكم فيها. ومع تقديم قاعدة @property، تكتسب CSS أداة أكثر قوة: القدرة على تعريف هذه الخصائص المخصصة والتحقق من صحتها، مما يؤدي إلى أنماط أكثر قوة وقابلية للتنبؤ.

ما هي خاصية @property في CSS؟

تسمح قاعدة @property للمطورين بتعريف النوع والصيغة والخصائص الأخرى للخصائص المخصصة. فكر فيها كطريقة لتوفير بنية وتحقق من الصحة لمتغيرات CSS الخاصة بك. قبل @property، كانت متغيرات CSS مجرد سلاسل نصية يمكن أن تحتوي على أي شيء. هذا النقص في البنية يمكن أن يؤدي إلى أخطاء، مما يجعل تصحيح الأخطاء أكثر صعوبة ويعيق اتساق التصميم العام. تعالج @property هذه المشكلات من خلال توفير آلية للتحكم في أنواع القيم التي يمكن تعيينها لخصائصك المخصصة.

لماذا نستخدم خاصية @property في CSS؟ الفوائد والمزايا

مزايا استخدام @property عديدة وتساهم بشكل مباشر في تحسين ممارسات تطوير الويب:

• تعزيز قابلية صيانة الكود: من خلال تحديد أنواع وسلوكيات الخصائص المخصصة بشكل صريح، فإنك تجعل الكود الخاص بك أكثر توثيقًا ذاتيًا وأسهل للفهم. سيفهم المطورون الآخرون (أو أنت في المستقبل) بسرعة كيفية استخدام خاصية مخصصة.
• تحسين اتساق التصميم: يضمن التحقق من الصحة أنه يتم تعيين القيم الصالحة فقط للخصائص المخصصة. هذا يساعد في الحفاظ على مظهر مرئي متسق عبر موقع الويب أو التطبيق الخاص بك.
• المتانة ومنع الأخطاء: سيتم رفض القيم غير الصالحة، مما يمنع مشاكل التنسيق غير المتوقعة ويقلل من الوقت المستغرق في تصحيح الأخطاء.
• الأنماط الديناميكية: تتيح @property تكاملاً أفضل مع JavaScript، مما يسمح لك بالتحكم في متغيرات CSS وتحديثها برمجيًا بثقة، مع العلم أن القيم صالحة.
• إكمال تلقائي أفضل وتجربة مطور محسنة: يمكن لمحررات الكود توفير إكمال تلقائي وتلميحات كود أكثر ذكاءً، مما يساعد المطورين على كتابة CSS بسرعة ودقة أكبر.
• أداء محسن: على الرغم من أن تأثير الأداء صغير بشكل عام، إلا أن التحقق من الصحة يمكن أن يؤدي أحيانًا إلى تحسينات طفيفة من قبل المتصفح.

المكونات الأساسية لقاعدة @property

تتكون قاعدة @property من عدة مكونات رئيسية تحدد كيفية تصرف خاصية مخصصة.

--property-name

هذا هو اسم الخاصية المخصصة التي تقوم بتعريفها. يجب أن يبدأ بشرطتين (--)، كما هو معتاد لخصائص CSS المخصصة.

            @property --my-color { ... }
            

              
                Copy
              
            
          

syntax

يحدد الواصف syntax النوع أو النمط المسموح به لقيم الخاصية المخصصة. يستخدم مجموعة فرعية من صيغة CSS ويمكن أن يأخذ قيمًا مختلفة، بما في ذلك:

• <color>: يمثل قيمة لون (مثل red، #FF0000، rgba(255, 0, 0, 1)).
• <length>: يمثل قيمة طول (مثل 10px، 5em، 20%).
• <number>: يمثل قيمة رقمية (مثل 10، 3.14).
• <percentage>: يمثل قيمة نسبة مئوية (مثل 50%).
• <url>: يمثل عنوان URL (مثل url('image.jpg')).
• <integer>: يمثل قيمة عدد صحيح (مثل 10، -5).
• <angle>: يمثل قيمة زاوية (مثل 45deg، 0.5turn).
• <time>: يمثل قيمة زمنية (مثل 2s، 200ms).
• <string>: يمثل قيمة سلسلة نصية.
• <image>: يمثل قيمة صورة (مثل url).
• *: يقبل أي قيمة CSS صالحة. هذا نهج متساهل للغاية ويجب استخدامه بحذر.
• الأنواع المدمجة: يمكنك دمج أنواع متعددة باستخدام قوائم مفصولة بمسافات (مثل <length> <length> <length> لتعريف ثلاث قيم طول) أو استخدام الرمز '|' للسماح بأي من الأنواع المدرجة (مثل <length> | <percentage> لدعم إما طول أو نسبة مئوية).
• الصيغ المخصصة: الصيغ المخصصة، للسيناريوهات الأكثر تعقيدًا، غالبًا ما تكون مدعومة من خلال تطبيقات مخصصة، على الرغم من أنها ستوصف عادةً باستخدام صيغة تشبه التعبيرات النمطية (regex) مثل [a-z]+.

            
@property --base-color {
  syntax: <color>;
  inherits: false;
  initial-value: #333;
}

            

              
                Copy
              
            
          

inherits

يحدد الواصف inherits ما إذا كانت الخاصية المخصصة ترث قيمتها من عنصرها الأصل. بشكل افتراضي، لا ترث الخصائص المخصصة. يمكن التحكم في هذا السلوك بقيمة منطقية: true أو false.

            
@property --font-size {
  syntax: <length>;
  inherits: true;
  initial-value: 16px;
}

            

              
                Copy
              
            
          

initial-value

يحدد الواصف initial-value القيمة الافتراضية للخاصية المخصصة إذا لم يتم تعريفها بشكل صريح في CSS. يوفر هذا قيمة احتياطية عندما لا يتم تحديد الخاصية، على غرار سلوك خصائص CSS القياسية.

            
@property --border-width {
  syntax: <length>;
  inherits: false;
  initial-value: 1px;
}

            

              
                Copy
              
            
          

أمثلة عملية

دعنا نتعمق في بعض الأمثلة العملية لتوضيح كيفية استخدام @property بفعالية.

مثال 1: تعريف خاصية لون

في هذا المثال، نحدد خاصية مخصصة --primary-color لتمثيل اللون الأساسي في نظام التصميم الخاص بنا. نحدد أنها تقبل قيم الألوان فقط.

            
@property --primary-color {
  syntax: <color>;
  inherits: false;
  initial-value: #007bff;
}

body {
  --primary-color: #007bff; /* Valid */
  color: var(--primary-color);
}

h1 {
  --primary-color: rgb(255, 0, 0); /* Valid */
  color: var(--primary-color);
}

            

              
                Copy
              
            
          

مثال 2: تعريف خاصية طول

هنا، نحدد خاصية مخصصة --spacing لإدارة التباعد بين العناصر، والتي تقبل قيم الطول. يوضح هذا المثال بوضوح قيمة تعيين `initial-value` كقيمة افتراضية للموقع بأكمله. هذا مفيد بشكل خاص عند استخدام نظام تصميم يتم فيه تحديد الإعدادات الافتراضية للتباعد.

            
@property --spacing {
  syntax: <length>;
  inherits: false;
  initial-value: 1rem;
}

p {
  margin-bottom: var(--spacing);
}

            

              
                Copy
              
            
          

مثال 3: تعريف خاصية عدد صحيح

يحدد هذا المثال خاصية مخصصة لعدد الأعمدة في تخطيط الشبكة، مع التحقق من أن القيمة هي عدد صحيح.

            
@property --grid-columns {
  syntax: <integer>;
  inherits: false;
  initial-value: 3;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
}

            

              
                Copy
              
            
          

مثال 4: وراثة الخصائص

هنا نحدد خاصية مخصصة *ستكون* موروثة. خاصية `font-size` المعينة على `1rem` في body ستؤثر على جميع العناصر الأبناء ما لم يتم تجاوزها.

            
@property --font-size {
  syntax: <length>;
  inherits: true;
  initial-value: 1rem;
}

body {
  --font-size: 1rem;
  font-size: var(--font-size);
}

h2 {
  font-size: 1.25rem; /* Overrides inherited value */
}

            

              
                Copy
              
            
          

مثال 5: دمج الأنواع

باستخدام العامل '|' ، يمكننا دمج الأنواع. هنا نقبل إما `length` أو `percentage` لإزاحة الظل.

            
@property --shadow-offset {
  syntax: <length> | <percentage>;
  inherits: false;
  initial-value: 0;
}

.box {
  box-shadow: 0 var(--shadow-offset) var(--shadow-offset) gray;
}

            

              
                Copy
              
            
          

أفضل الممارسات لاستخدام @property

لتحقيق أقصى استفادة من @property، اتبع أفضل الممارسات التالية:

• تحديد الخصائص في موقع مركزي: قم بتجميع تعريفات @property الخاصة بك في ملف CSS مخصص أو قسم مخصص، غالبًا في الجزء العلوي من ورقة الأنماط الرئيسية أو داخل ملف نظام التصميم. هذا يعزز التنظيم ويسهل إدارة خصائصك المخصصة.
• استخدام أسماء خصائص وصفية: اختر أسماء تشير بوضوح إلى الغرض من كل خاصية مخصصة (على سبيل المثال، --primary-button-color ، --header-font-size). هذا يحسن القراءة والفهم.
• توفير توثيق شامل: وثق خصائصك المخصصة، بما في ذلك صيغتها واستخدامها وأي قيود. يمكن تضمين هذا التوثيق في شكل تعليقات بجانب CSS الخاص بك أو في دليل نمط منفصل.
• اختيار الصيغة الصحيحة: حدد بعناية syntax المناسب لكل خاصية. استخدام الصيغة الصحيحة يمنع الأخطاء ويضمن أن القيم المعينة صالحة.
• النظر في الوراثة بعناية: قرر ما إذا كان يجب أن ترث الخاصية قيمتها من عنصرها الأصل. يعتمد هذا على طبيعة الخاصية وكيفية تطبيقها عبر تصميمك.
• استخدام initial-value بشكل استراتيجي: قم بتعيين initial-value لجميع الخصائص المخصصة التي تتطلب قيمة افتراضية. يوفر هذا قيمة احتياطية ويضمن تطبيق النمط حتى لو لم يتم تعيين الخاصية بشكل صريح.
• الاستفادة من أنظمة التصميم: ادمج @property في نظام التصميم الخاص بك للحفاظ على الاتساق وتحسين سير عمل فريقك في التطوير. باستخدامها بالاقتران مع مكونات أخرى، يمكنك بناء تصميمات أكثر قوة ووحدات، وهو غالبًا الهدف عند إنشاء مكونات للاستخدام العالمي.
• الاختبار الشامل: اختبر خصائصك المخصصة وسلوكها عبر متصفحات وأجهزة مختلفة لضمان التوافق وتجربة مستخدم متسقة. يعد الاختبار عبر المتصفحات خطوة حاسمة، حيث أن دعم `property` لم يتم تنفيذه عالميًا بعد.

توافق المتصفحات

اعتبارًا من 26 أكتوبر 2023، يختلف دعم قاعدة @property عبر المتصفحات. يتمتع Chrome و Edge و Safari بدعم جيد، بينما دعم Firefox في حالة محدودة. استشر دائمًا موارد مثل Can I Use ([https://caniuse.com/mdn-css_at-rules_property](https://caniuse.com/mdn-css_at-rules_property)) للبقاء على اطلاع دائم بتوافق المتصفحات.

اعتبارات هامة لتوافق المتصفحات:

• اكتشاف الميزات: استخدم تقنيات اكتشاف الميزات للتعامل برشاقة مع المتصفحات التي لا تدعم @property. يمكنك استخدام فحص خاصية CSS أو اكتشاف ميزة JavaScript لتطبيق أنماط بديلة أو polyfills.
• التحسين التدريجي: صمم موقع الويب الخاص بك بنمط أساسي يعمل بدون @property. ثم، قم بتحسين التصميم تدريجيًا عن طريق إضافة دعم @property إلى المتصفحات المتوافقة.
• Polyfills والحلول البديلة: فكر في استخدام polyfills أو توفير حلول بديلة للمتصفحات التي لا تدعم @property بشكل كامل. قد يتضمن ذلك استخدام متغيرات CSS عادية، أو المعالجة المسبقة باستخدام SASS أو LESS أو منهجيات أخرى.

استخدام خاصية @property في CSS مع JavaScript

واحدة من أكبر مزايا خصائص CSS المخصصة هي قدرتها على التلاعب بها باستخدام JavaScript، مما يتيح التصميم الديناميكي وتجارب المستخدم المحسنة. تعزز @property هذه القدرة، مما يجعل التكامل بين CSS و JavaScript أكثر قوة وقابلية للتنبؤ.

إليك كيفية التفاعل مع الخصائص المخصصة المحددة باستخدام @property في JavaScript:

1. الحصول على قيمة خاصية مخصصة: استخدم getPropertyValue() لاسترداد قيمة خاصية مخصصة.

               
   const element = document.querySelector('.my-element');
   const primaryColor = getComputedStyle(element).getPropertyValue('--primary-color');
   console.log(primaryColor); // e.g., "#007bff"
   
               
   
                 
                   Copy
                 
               
             

2. تعيين قيمة خاصية مخصصة: استخدم setProperty() لتعيين قيمة خاصية مخصصة. بسبب المعلمة syntax لتعريف `@property`، يمكن أن يؤدي التعيين المستند إلى JavaScript إلى تشغيل التحقق من صحة القيمة داخل المتصفح.

               
   element.style.setProperty('--primary-color', 'green');
   
               
   
                 
                   Copy
                 
               
             

مثال: تغيير اللون الديناميكي باستخدام JavaScript

دعنا نوضح كيفية إنشاء تغيير لون ديناميكي باستخدام JavaScript و @property.

HTML:

            
<button class="my-button">Change Color</button>

            

              
                Copy
              
            
          

CSS:

            
@property --button-color {
  syntax: <color>;
  inherits: false;
  initial-value: #007bff;
}

.my-button {
  background-color: var(--button-color);
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

            

              
                Copy
              
            
          

JavaScript:

            
const button = document.querySelector('.my-button');

button.addEventListener('click', () => {
  const newColor = 'red'; // Could be based on some logic/input
  button.style.setProperty('--button-color', newColor);
});

            

              
                Copy
              
            
          

في هذا المثال، يؤدي النقر فوق الزر إلى تغيير لون خلفية الزر عن طريق تعديل الخاصية المخصصة --button-color باستخدام JavaScript.

التدويل (i18n) وخاصية @property في CSS

يمكن أن تكون خاصية @property في CSS أداة قيمة في إنشاء تطبيقات ويب تدعم لغات ومناطق مختلفة. إليك كيفية تطبيقها على i18n:

• الطباعة: حدد خصائص مخصصة لأحجام الخطوط وارتفاعات الأسطر وعائلات الخطوط، مما يسمح لك بتكييف مظهر النص بناءً على اللغة المحددة.
• التخطيط: استخدم خصائص للتباعد والهوامش والحشو لاستيعاب الاختلافات في اتجاه النص (على سبيل المثال، من اليسار إلى اليمين مقابل من اليمين إلى اليسار) وعروض الأحرف المختلفة.
• الألوان: استخدم خصائص لألوان عناصر واجهة المستخدم، مثل ألوان الأزرار وألوان النصوص وألوان الخلفية. يمكن تعديلها لتتماشى مع التفضيلات الثقافية أو إرشادات التصميم لمناطق محددة.
• اتجاه النص: استخدم خاصية مخصصة للتحكم في اتجاه النص (مثل ltr، rtl) وتعديل التخطيط وفقًا لذلك.

مثال: تكييف أحجام الخطوط بناءً على اللغة

في هذا المثال، نوضح كيفية تكييف حجم خط العناوين وفقًا للغة المحددة. سيستخدم النهج مكتبة JavaScript لتحديد اللغة المناسبة وتعيين الخصائص المخصصة.

            
@property --heading-font-size {
  syntax: <length>;
  inherits: false;
  initial-value: 2rem;
}

h1 {
  font-size: var(--heading-font-size);
}

            

              
                Copy
              
            
          

ثم، قم بتعيين القيمة ديناميكيًا في JavaScript بناءً على اللغة المكتشفة:

            
// Assuming a global variable or function to get the user's language
const userLanguage = getUserLanguage();
const heading = document.querySelector('h1');

if (userLanguage === 'ja') {
  heading.style.setProperty('--heading-font-size', '1.8rem'); // Adjust for Japanese
} else {
  heading.style.setProperty('--heading-font-size', '2rem'); // Default
}

            

              
                Copy
              
            
          

اعتبارات إمكانية الوصول

عند العمل مع @property، من الضروري مراعاة إمكانية الوصول:

• تباين الألوان: تأكد من وجود تباين لوني كافٍ بين النص والخلفيات. استخدم خصائص مخصصة للألوان لتحديث التصميم بسهولة لتلبية متطلبات التباين.
• حجم النص: اسمح للمستخدمين بالتحكم في حجم النص. استخدم وحدات نسبية (rem، em) وخصائص مخصصة لتسهيل تغيير حجم الخط.
• مؤشرات التركيز: قم بتخصيص مؤشرات التركيز لجعلها مرئية بوضوح. استخدم خصائص مخصصة للتحكم في لون ونمط حدود التركيز.
• سمات ARIA: تأكد من أن العناصر لها سمات ARIA المناسبة عند استخدام خصائص مخصصة للتحكم في الحالات أو السلوك.
• التنقل باستخدام لوحة المفاتيح: تحقق من أن موقع الويب الخاص بك يمكن التنقل فيه بسهولة باستخدام لوحة المفاتيح، خاصة إذا تم استخدام خصائص مخصصة لإدارة العناصر التفاعلية.

الاعتبارات والحلول البديلة عبر المتصفحات

على الرغم من أن @property أداة قوية، تذكر أن دعم المتصفح لم يتم تنفيذه عالميًا بعد. يجب عليك استخدام تقنيات عبر المتصفحات للتخفيف من تأثير نقص الدعم.

• التحسين التدريجي: صمم أنماطك باستخدام متغيرات CSS الأساسية، ثم استخدم `@property` للميزات المضافة في المتصفحات المدعومة.
• اكتشاف الميزات: استخدم طرق اكتشاف الميزات لتحديد ما إذا كان المتصفح يدعم @property قبل تطبيق الأنماط التي تستخدمها. يمكن إجراء فحص بسيط باستخدام JavaScript.
• الحلول البديلة في CSS: قدم قيمًا احتياطية للخصائص غير المدعومة. يمكن القيام بذلك عن طريق تعيين الخصائص مباشرة، أو باستخدام متغيرات مختلفة للمتصفحات المدعومة وغير المدعومة.
• المعالجات المسبقة: استخدم معالجات CSS المسبقة مثل Sass أو Less لترجمة الهياكل عالية المستوى إلى CSS قياسي يمكن استخدامه في المتصفحات التي لا تدعم `@property` بالكامل. على الرغم من أن هذا يضيف خطوة إضافية، إلا أن الفوائد غالبًا ما تفوق العيوب.

مثال على حل بديل في CSS:

            
.element {
  --base-color: #333; /* Default value for browsers without @property */
  color: var(--base-color);
}

@supports (color: --base-color) { /* Feature Detection for @property*/
  @property --base-color {
    syntax: <color>;
    inherits: false;
    initial-value: #333;
  }
  /* Add more complex styling here utilizing the @property */
}

            

              
                Copy
              
            
          

الأدوات والمكتبات

يمكن أن تساعد العديد من الأدوات والمكتبات في العمل مع @property:

• إضافات PostCSS: يمكن أن تساعد إضافات مثل `postcss-custom-properties` و `postcss-custom-properties-experimental` في تحويل الخصائص المخصصة وتوفير الدعم للمتصفحات القديمة عن طريق تحويل تعريفات `@property` إلى قواعد CSS مكافئة.
• Stylelint: ادمج stylelint وقواعد أو إضافات مخصصة للتحقق من صحة استخدام وبنية خصائصك المخصصة.
• أطر عمل أنظمة التصميم: ادمج @property في أطر عمل أنظمة التصميم الشائعة مثل Ant Design و Material UI و Bootstrap لضمان اتساق التصميم وتوفير تجربة أكثر سلاسة للمطورين.

الخلاصة

تعد خاصية @property في CSS إضافة قوية إلى مجموعة أدوات تطوير الويب، حيث تجلب البنية والتحقق من الصحة والقدرات الديناميكية إلى الخصائص المخصصة. من خلال تحديد نوع وسلوك متغيرات CSS الخاصة بك، يمكنك تعزيز قابلية صيانة الكود، وتحسين اتساق التصميم، وإنشاء حلول تنسيق أكثر قوة وقابلية للتنبؤ.

مع تحسن دعم المتصفحات، يصبح دمج @property في مشاريعك ذا أهمية متزايدة. من خلال تبني أفضل الممارسات الموضحة في هذا الدليل، يمكنك الاستفادة من فوائد هذه الميزة الجديدة وكتابة CSS أكثر كفاءة وقابلية للصيانة والتوسع. تبنى @property، وقم بتحويل سير عمل تطوير الويب الخاص بك!

لمزيد من التعلم

• MDN Web Docs: @property
• CSS Custom Properties for Cascading Variables Module Level 1
• Can I Use: @property