CSS @property नियम

परिभाषा और उपयोग

CSS @property नियम का उपयोग करता है: शैली पट्टी में सीधे विशिष्ट CSS गुण को परिभाषित करने के लिए, बिना किसी JavaScript चलाने के।

@property नियम डाटा टाइप जांच और प्रतिबंध वाले हैं, डिफ़ॉल्ट मूल्य सेट कर सकते हैं और गुण को उत्तराधिकार कर सकते हैं।

उपयोग करना @property फायदे:

  • टाइप जांच और प्रतिबंध: विशिष्ट गुण के डाटा टाइप को निर्दिष्ट करना होता है, जैसे <number>、<color>、<length> आदि। यह त्रुटि को रोकता है और विशिष्ट गुण का सही उपयोग सुनिश्चित करता है।
  • डिफ़ॉल्ट मूल्य सेट करना: विशिष्ट गुण के लिए डिफ़ॉल्ट मूल्य सेट कर सकते हैं। यह बचाव मूल्य का प्रयोग करने को सुनिश्चित करता है यदि बाद में अवैध मूल्य आवंटित किया जाता है।
  • उत्तराधिकार व्यवहार सेट करना: विशिष्ट गुण को अपने पैरंत्र से उत्तराधिकार कर सकता है क्या इसे निर्दिष्ट करना होता है।

उदाहरण: विशिष्ट गुण को परिभाषित करना

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

उपरोक्त परिभाषा से पता चलता है कि --my-color एक रंग गुण है, जो अपने पैरंत्र से मूल्य ले सकता है और इसका डिफ़ॉल्ट मूल्य lightgray है।

CSS में विशिष्ट गुण का उपयोग करना:

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

उदाहरण

उदाहरण 1

ग्रेडिएंट के लिए दो आवश्यक विशेषताएँ निर्दिष्ट करता है - और उनका उपयोग ग्रेडिएंट को एनिमेट करने के लिए करता है:

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

खुद का प्रयोग करें

उदाहरण 2

दो आवश्यक विशेषताएँ निर्दिष्ट करता है: एक परियोजना आकार के लिए और एक परियोजना रंग के लिए:

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

खुद का प्रयोग करें

CSS व्याकरण

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

विशेषता मूल्य

मूल्य वर्णन
--propertyname आवश्यक।स्वयं विशेषता का नाम।
syntax

यह <length>、<number>、<percentage>、<length-percentage>、<color>、<image>、<url>、<integer>、<angle>、<time>、<resolution>、<transform-function> या <custom-ident> हो सकता है, या डाटा प्रकार और मुख्य शब्द मूल्य की सूची हो सकती है।

+ (स्पेस से अलग) और # (कमा से अलग) गुणाक एक मूल्य सूची को अपेक्षा करते हैं, उदाहरण के लिए <color># <color> मूल्य सूची को अपेक्षा करता है।

विरामचिह्न (|) अपेक्षित व्याकरण के लिए 'या' शर्त को बनाने के लिए उपयोग किया जा सकता है, उदाहरण के लिए <length> | auto <length> या auto स्वीकार करता है, जबकि <color># | <integer># के लिए अपेक्षा की जाती है कि <color> मूल्य सूची को कमा से अलग किया जाए या <integer> मूल्य सूची को कमा से अलग किया जाए।
initial-value विशेषता के प्रारंभिक मूल्य सेट करता है।
inherits true या false।@property द्वारा निर्दिष्ट स्वयं विशेषता का पंरिपालन द्वारा विरासत होने के लिए नियंत्रण करता है।

ब्राउज़र समर्थन

टेबल में कीमतें पहली पूरी तरह से @ नियम को समर्थन करने वाले ब्राउज़र का संस्करण के रूप में प्रदर्शित करती हैं।

च्रोम एज फायरफॉक्स सफारी ओपेरा
85 85 128 16.4 71

संबंधित पृष्ठ

शिक्षा:CSS @property नियम