CSS @ప్రపర్టీ రూల్

  • ముంది పేజీ position
  • తరువాతి పేజీ quotes

నిర్వచనం మరియు వినియోగం

CSS @property నియమాలు యొక్క ఉపయోగం: స్టైల్స్ టేబుల్స్‌లో కస్టమ్ సిఎస్ఎస్ అట్రిబ్యూట్స్ ను నేరుగా నిర్వచించడానికి ఉపయోగించబడతాయి, జావాస్క్రిప్ట్ నడపకుండా.

@property పరిశీలన పరిమితించడం మరియు నిర్వహించడం కలిగిన నియమాలు, డిఫాల్ట్ విలువను నిర్వహించవచ్చు మరియు అట్రిబ్యూట్ నుండి ఉత్తరాధికారం అని నిర్వహించవచ్చు.

ఉపయోగించండి @property ప్రయోజనం యొక్క ఉదాహరణ:

  • రకం పరిశీలన మరియు పరిమితించడం: కస్టమ్ అట్రిబ్యూట్ యొక్క డేటా రకాన్ని నిర్వహించండి, ఉదాహరణకు <number>、<color>、<length> మొదలైనవి. ఇది తప్పులను నివారించడానికి మరియు కస్టమ్ అట్రిబ్యూట్ యొక్క సరైన వాడకానికి ఉపయోగపడుతుంది.
  • డిఫాల్ట్ విలువ నిర్వహించండి: కస్టమ్ అట్రిబ్యూట్ కు డిఫాల్ట్ విలువ అందించవచ్చు. ఇది తరువాత అనేక విలువలను కేటాయించినప్పుడు అనియంత్రిత విలువను వాడకందుకు బ్రాసర్ ప్రయోగిస్తుంది.
  • ఉత్తరాధికార ప్రవర్తన నిర్వహించండి: కస్టమ్ అట్రిబ్యూట్ తండ్రి ఎలమెంట్ నుండి ఉత్తరాధికారం పొందగలదా అని నిర్వహించండి.

ఉదాహరణ: కస్టమ్ అట్రిబ్యూట్ నిర్వచించండి

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

పైని నిర్వచనం ఇంకా --my-color ఒక రంగు అట్రిబ్యూట్ అని చెప్పేది, ఇది తండ్రి ఎలమెంట్ నుండి విలువను ఉంచుకునవచ్చు మరియు డిఫాల్ట్ విలువ లైట్‌గ్రే అని ఉంది.

సిఎస్ఎస్‌లో కస్టమ్ అట్రిబ్యూట్స్ వాడండి:

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 ద్వారా సూచించిన స్వంత అనునామిక గుణము అప్రమేయంగా వారిస్థాపకంగా నిర్వహించడానికి నియంత్రణ.

బ్రౌజర్ మద్దతు

పట్టికలో విద్యుత్తులు మొదటి పూర్తిగా @ పద్ధతిని అనుసరించే బ్రౌజర్ సంస్కరణను సూచిస్తాయి.

Chrome Edge ఫైర్ఫాక్స్ సఫారీ ఓపెరా
85 85 128 16.4 71

సంబంధిత పేజీలు

ట్యూటోరియల్ గురించిCSS @ప్రపర్టీ రూల్

  • ముంది పేజీ position
  • తరువాతి పేజీ quotes