Jassif Team Institution

The CSS @property Rule

@property விதி எந்த JavaScript ஐயும் இயக்காமல் நேரடியாக பாணி தாளில் தனிப்பயன் CSS பண்புகளை (CSS மாறிகள்) வரையறுக்கப் பயன்படுகிறது.

@property விதிக்கு தரவு வகை சோதனை மற்றும் கட்டுப்பாடு, இயல்புநிலை மதிப்பை அமைத்தல் மற்றும் மரபுரிமை நடத்தையை குறிப்பிடுதல் ஆகியவை உள்ளன.

கீழே உள்ள வரையறை --myColor என்ற தனிப்பயன் பண்பை உருவாக்குகிறது, அதை ஒரு color பண்பாக வரையறுக்கிறது, அது அதன் பெற்றோர் உறுப்புகளிலிருந்து மதிப்புகளைப் பெறும் என்பதைக் குறிப்பிடுகிறது, மற்றும் அதன் இயல்புநிலை மதிப்பு lightgray ஆகும்.

Syntax of @property

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

Using the Custom Property

CSS var() செயல்பாடு CSS இல் தனிப்பயன் பண்பைச் செருகப் பயன்படுகிறது:

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

Benefits of Using @property

@property பயன்படுத்துவதன் நன்மைகள்:

CSS @property Example

பின்வரும் உதாரணம் இரண்டு தனிப்பயன் பண்புகளை வரையறுக்கிறது: my-bg-color மற்றும் my-txt-color.

div, பின்னர் பின்னணி-நிறம் மற்றும் நிறம் பண்புகளில் தனிப்பயன் பண்புகளைப் பயன்படுத்துகிறது:

@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);
}

Another @property Example

பின்வரும் உதாரணத்தில் நாம் <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);
}

Avoid Error with Type Checking and Fallback Value

பின்வரும் உதாரணத்தில் நாம் வகுப்பு .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; /* செல்லாதது - lightgray க்கு பின்வாங்கும் */
}

Use of the inherits Value

பின்வரும் உதாரணத்தில் நாம் inherits மதிப்பை false ஆக அமைப்போம். இதன் பொருள் தனிப்பயன் பண்பு அதன் பெற்றோர் உறுப்புகளிலிருந்து மதிப்புகளைப் பெறாது. முடிவைப் பார்க்கவும்:

/* 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 --startColor {
  syntax: "<color>";
  initial-value: #EADEDB;
  inherits: false;
}

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

Exercise

CSS @property Rule

பின்வரும் அட்டவணை CSS @property விதியை விவரிக்கிறது: