CSS @property کا رول

تعریف و استعمال

CSS @property قوانین استعمال: خودکار CSS خاصیت مستقیم طور پر استایل تھیبل میں تعریف کرنے کے لئے استعمال کی جاتی ہیں، بغیر کسی جاوا اسکریپٹ چلانے کی ضرورت نہیں ہوتی。

@property قوانین نوع کی چیک اور محدودیت کا حامل ہیں، دفعتی مرادے مقرر کرسکتے ہیں اور خاصیت کا وراثت لینا یا نہ لینا مقرر کرسکتے ہیں。

استعمال: @property فائدے:

• نوع کی چیک اور محدودیت: خودکار خاصیت کا نوع مقرر کرنا ضروری ہے، مثلاً <number>، <color>، <length> وغیرہ۔ یہ غلطیوں کو روکتی ہے اور خودکار خاصیت کی صحیح استعمال کو یقینی بناتی ہے。
• دفعتی مرادہ تنظیم کرنا: خودکار خاصیت کا دفعتی مرادہ مقرر کر سکتے ہیں۔ یہ یقینی بناتا ہے کہ اگر بعد میں ناقص یا نادرست مرادہ مقرر کیا جائے تو براوزر اس کا تعمیری مرادہ استعمال کرے گا。
• وراثت تنظیم کرنا: خودکار خاصیت کو اصل عنصر سے وراثت لینا یا نہ لینا مقرر کرنا ضروری ہے。

مثال: خودکار خاصیت کی تعریف

@property --my-color {
  syntax: "";
  inherits: true;
  initial-value: lightgray;
}

مذکورہ تعریف کے مطابق --my-color ایک رنگ خاصیت ہے، جس کا مراد اصل عنصر سے وراثت لینا ہے اور اس کا دفعتی مرادہ lightgray ہے。

CSS میں خودکار خاصیت استعمال کرنا:

body {
  backgound-color: var(--my-color);
}

实例

例子 1

为渐变指定两个自定义属性 - 并使用它们来动画化渐变：

@property --startColor {
  syntax: "";
  initial-value: #EADEDB;
  inherits: false;
}
@property --endColor {
  syntax: "";
  initial-value: #BC70A4;
  inherits: false;
}

亲自试一试

例子 2

指定两个自定义属性：一个用于项目大小，一个用于项目颜色：

@property --item-size {
  syntax: "";
  inherits: true;
  initial-value: 50%;
}
@property --item-color {
  syntax: "";
  inherits: false;
  initial-value: lightgray;
}

亲自试一试

CSS 语法

@property --propertyname {
  syntax: "";
  initial-value: red;
  inherits: false;
}

属性值

براوزر کی پشتیبندی

جداول میں دکھائی جانے والی اعداد پہلی طور پر اس @قوانین کو پورا طور پر پشتیبند کرنے والی براوزر کی نسخے کی نمائش کرتے ہیں。

مربوط صفحات

تعلیم:CSS @property کا رول