CSS @property रूल

CSS @property रूल

@property नियम डाटा प्रकार चेक, सीमांकन, डिफ़ॉल्ट मूल्य सेट करता है और प्रतियोगिता को मूल्य को विरासत करने की अनुमति देता है।

@property नियम डाटा प्रकार चेक, सीमांकन, डिफ़ॉल्ट मूल्य सेट करता है और प्रतियोगिता को मूल्य को विरासत करने की अनुमति देता है।

कस्टम प्रतियोगिता के उदाहरण की परिभाषा:

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

ऊपरी परिभाषा इस रूप में प्रदर्शित है --myColor एक रंग गुण है, जो पैरंत्रिक एलीमेंट के मूल्य को विरासत कर सकता है और उसका डिफ़ॉल्ट मूल्य lightgray है।

CSS में कस्टम प्रतियोगिता का उपयोग करने के लिए हम var() तंत्र:

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

इस्तेमाल @property फायदे:

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

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

तालिका में नंबर इसका पूर्णत: सभी नियम के पहले ब्राउज़र संस्करण के लिए समर्थन करता है।

सरल @property उदाहरण

इस उदाहरण में दो मनपसंद गुणवत्ताएँ परिभाषित की गई हैं:--my-bg-color और --my-txt-color. फिर, div background-color और color में मनपसंद गुणवत्ता का उपयोग करते हैं:

इंस्टेंस

@property --my-bg-color {
  syntax: "<color>";
  inherits: true;
  initial-value: lightgray;
}
@property --my-txt-color {
  syntax: "<color>";
  inherits: true;
  initial-value: darkblue;
}
div {
  width: 300px;
  height: 150px;
  padding: 15px;
  background-color: var(--my-bg-color);
  color: var(--my-txt-color);
}

स्वयं एक प्रयोग करें

एक अन्य @property उदाहरण

इस उदाहरण में, हम <div> एलीमेंट पर मूलभूत मनपसंद गुणवत्ता का उपयोग करते हैं। फिर, हम .fresh और .nature क्लास में मनपसंद गुणवत्ता को अधिरेखित करने (अन्य रंग को सेट करके), प्रभावशाली परिणाम है:

इंस्टेंस

@property --my-bg-color {
  syntax: "<color>";
  inherits: true;
  initial-value: lightgray;
}
div {
  width: 300px;
  height: 150px;
  padding: 15px;
  background-color: var(--my-bg-color);
}
.fresh {
  --my-bg-color: #ff6347;
}
.nature {
  --my-bg-color: rgb(120, 180, 30);
}

स्वयं एक प्रयोग करें

गलतियों को रोकने और विकल्पी मूल्य के माध्यम से तरीके से बचता है

इस उदाहरण में, हम .nature क्लास में मनपसंद गुणवत्ता को पूर्णांक के रूप में रखा गया है। यह अवैध है, ब्राउज़र initial-value गुणवत्ता में परिभाषित रिजर्व कलर (lightgray):

इंस्टेंस

@property --my-bg-color {
  syntax: "<color>";
  inherits: true;
  initial-value: lightgray;
}
div {
  width: 300px;
  height: 150px;
  padding: 15px;
  background-color: var(--my-bg-color);
}
.fresh {
  --my-bg-color: #ff6347;
}
.nature {
  --my-bg-color: 2;
}

स्वयं एक प्रयोग करें

inherits गुणवत्ता का उपयोग करेंगे

इस उदाहरण में, हम inherits मूल्य रखा गया है falseयह इसका मतलब है कि मनपसंद गुणवत्ता अपने पैरंट एलीमेंट से मूल्य का विरासत नहीं लेती है। परिणाम देखें:

इंस्टेंस

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

स्वयं एक प्रयोग करें

अगला उदाहरण इसके लिए है inherits मूल्य रखा गया है trueयह इसका मतलब है कि मनपसंद गुणवत्ता अपने पैरंट एलीमेंट से मूल्य का विरासत लेती है। परिणाम देखें:

इंस्टेंस

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

स्वयं एक प्रयोग करें

@property का उपयोग करके सहीब एनिमेशन बनाएं

इस्तेमाल @property कानून जो पहले एनिमेट किया नहीं जा सकता था, जैसे ग्रेडिएंट को एनिमेट करने की नई संभावनाएं अब उपलब्ध हैं: देखें नीचे का इंस्टेंस:

इंस्टेंस

ग्रेडिएंट के लिए दो अनुकूलन की गई वेरियेबल निर्दिष्ट करें:

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

स्वयं एक प्रयोग करें

CSS @property रूल