CSS @property ਨਿਯਮ

ਪਰਿਭਾਸ਼ਾ ਅਤੇ ਵਰਤੋਂ

CSS @property ਨਿਯਮ ਸਟਾਇਲ ਸ਼ੇਅਰ ਵਿੱਚ ਪਰਸੋਨਾਇਜ਼ਡ ਸੀਐੱਸਐੱਸ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਸਿੱਧੇ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ ਅਤੇ ਕੋਈ ਜਾਵਾਸਕ੍ਰਿਪਟ ਚਲਾਉਣ ਦੀ ਜ਼ਰੂਰਤ ਨਹੀਂ ਹੁੰਦੀ。

@property ਨਿਯਮ ਦਾਤਾ ਟਾਈਪ ਚੈੱਕ ਅਤੇ ਸੀਮਾਵਾਂ ਵਾਲਾ ਹੈ ਜਿਸ ਨੂੰ ਮੂਲਤਬੀ ਮੁੱਲ ਸੁਝਾਅ ਦੇਣਾ ਹੈ ਅਤੇ ਪਰਿਭਾਸ਼ਿਤ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਮਾਤਾ ਐਲੀਮੈਂਟ ਤੋਂ ਮਿਲ ਸਕਣ ਨਾਲ ਸੁਝਾਅ ਦੇਣਾ ਹੈ。

ਵਰਤੋਂ @property ਫਾਇਦਾ:

• ਟਾਈਪ ਚੈੱਕ ਅਤੇ ਸੀਮਾਵਾਂ: ਪਰਸੋਨਾਇਜ਼ਡ ਵਿਸ਼ੇਸ਼ਤਾ ਦਾ ਡਾਟਾ ਟਾਈਪ ਸੁਝਾਅ ਦੇਣਾ ਹੈ ਜਿਵੇਂ <number>、<color>、<length> ਆਦਿ। ਇਹ ਗਲਤੀਆਂ ਨੂੰ ਰੋਕਦਾ ਹੈ ਅਤੇ ਪਰਸੋਨਾਇਜ਼ਡ ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਸਹੀ ਵਰਤੋਂ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ。
• ਮੂਲਤਬੀ ਮੁੱਲ ਸੁਆਧਾਰਣ: ਪਰਸੋਨਾਇਜ਼ਡ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਮੂਲਤਬੀ ਮੁੱਲ ਸੁਆਧਾਰਣ ਕਰ ਸਕਦੇ ਹਾਂ। ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਜੇਕਰ ਬਾਅਦ ਵਿੱਚ ਬੇਵਾਜਬ ਮੁੱਲ ਅਲਾਟ ਕੀਤਾ ਜਾਵੇਗਾ ਤਾਂ ਬਰਾਉਜ਼ਰ ਪਰਿਭਾਸ਼ਿਤ ਮੁੱਲ ਦਾ ਵਰਤੋਂ ਕਰੇਗਾ。
• ਵਾਲਟੇਸ਼ਨ ਵਿਧੀ ਸੁਆਧਾਰਣ: ਪਰਸੋਨਾਇਜ਼ਡ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਮਾਤਾ ਐਲੀਮੈਂਟ ਤੋਂ ਮਿਲ ਸਕਣ ਨਾਲ ਸੁਝਾਅ ਦੇਣਾ ਹੈ。

ਉਦਾਹਰਣ: ਪਰਸੋਨਾਇਜ਼ਡ ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਪਰਿਭਾਸ਼ਾ

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

ਉਪਰੋਕਤ ਪਰਿਭਾਸ਼ਾ ਇਹ ਦਰਸਾਉਂਦੀ ਹੈ ਕਿ --my-color ਇੱਕ ਰੰਗ ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ ਜਿਸ ਨੂੰ ਮਾਤਾ ਐਲੀਮੈਂਟ ਤੋਂ ਮਿਲ ਸਕਦਾ ਹੈ ਅਤੇ ਇਸ ਦਾ ਮੂਲਤਬੀ ਮੁੱਲ lightgray ਹੈ。

ਸੀਐੱਸਐੱਸ ਵਿੱਚ ਪਰਸੋਨਾਇਜ਼ਡ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ:

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 ਨਿਯਮ