CSS @property రూల్

CSS @property రూల్

@property నియమం స్వంత CSS అనునామా విధమైనది, ఇది జావాస్క్రిప్ట్ నడపకుండా సైట్ లోనే నిర్వచించబడుతుంది.

@property నియమం డాటా రకం పరిశీలనను మరియు పరిమితులను కలిగి ఉంటుంది, డిఫాల్ట్ విలువను నిర్వచిస్తుంది మరియు అనునామా విలువను పారంతరం చేయవచ్చు అని నిర్వచిస్తుంది.

స్వంత అనునామా ప్రతిపాదన నిర్వచనం దర్శిస్తుంది

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

పైని నిర్వచనం ప్రతిపాదిస్తుంది --myColor ఒక రంగు అనునామా విధమైనది, ఇది పూర్వీక కంటెక్స్ట్ విలువను ఉంచవచ్చు, సంక్షిప్త విలువ లైట్గ్రే.

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: "";
  inherits: true;
  initial-value: lightgray;
}
@property --my-txt-color {
  syntax: "";
  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> మూలకంపై మూలతనం పరిమిత అంశాన్ని ఉపయోగిస్తాము. ఆపై మేము మరొక @property ఉదాహరణ ను ఉపయోగిస్తాము: .fresh మరియు .nature క్లాసులో పరిమిత అంశాన్ని పైగా కప్పిన (ఇతర రంగుల ద్వారా అమర్చడం), అద్భుత ప్రభావం ఉంది:

实例

@property --my-bg-color {
  syntax: "";
  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: "";
  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: "";
  inherits: false;
  initial-value: lightgray;
}

亲自试一试

మరొక ఉదాహరణ మార్చబడుతుంది: inherits విలువను అమర్చండి: trueఇది అర్థం చేస్తుంది పరిమిత అంశం తన పూర్వ మూలకం నుండి విలువను ఉంచుతుంది. ఫలితాలను చూడండి:

实例

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

亲自试一试

使用 @property 创建平滑动画

使用 @property 规则可以实现的全新机会是动画化以前无法动画化的内容：渐变。查看以下实例：

实例

为渐变指定两个自定义属性：

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

亲自试一试

CSS @property రూల్