CSS-இல் தேர்ச்சி: @property மூலம் தனிப்பயன் பண்புகளைப் பதிவு செய்தல்

தனிப்பயன் பண்புகள் (CSS மாறிகள் என்றும் அழைக்கப்படுகின்றன) நாம் CSS எழுதும் மற்றும் பராமரிக்கும் முறையை புரட்சிகரமாக்கியுள்ளன. அவை மீண்டும் பயன்படுத்தக்கூடிய மதிப்புகளை வரையறுக்க அனுமதிக்கின்றன, நமது ஸ்டைல்ஷீட்களை மிகவும் நெகிழ்வானதாகவும் பராமரிக்கக்கூடியதாகவும் ஆக்குகின்றன. ஆனால் மதிப்புகளை வரையறுப்பதைத் தாண்டி உங்களால் செல்ல முடிந்தால் என்ன செய்வது? ஒரு தனிப்பயன் பண்பு வைத்திருக்கும் மதிப்பின் வகையை, அதன் ஆரம்ப மதிப்பு மற்றும் மரபுரிமைப் பண்புகளுடன் வரையறுக்க முடிந்தால் என்ன செய்வது? இங்குதான் @property உதவுகிறது.

@property என்றால் என்ன?

@property என்பது ஒரு CSS at-rule ஆகும், இது உலாவியில் ஒரு தனிப்பயன் பண்பை வெளிப்படையாகப் பதிவு செய்ய உங்களை அனுமதிக்கிறது. இந்த பதிவு செயல்முறை, பண்பின் எதிர்பார்க்கப்படும் வகை, அதன் ஆரம்ப மதிப்பு மற்றும் அது அதன் பெற்றோர் உறுப்பிலிருந்து மரபுரிமையாகப் பெற வேண்டுமா என்பது பற்றிய தகவல்களை உலாவிக்கு வழங்குகிறது. இது பல மேம்பட்ட திறன்களைத் திறக்கிறது, அவற்றுள் சில:

• வகைச் சரிபார்ப்பு: தனிப்பயன் பண்பிற்கு சரியான வகை மதிப்பு ஒதுக்கப்பட்டுள்ளதா என்பதை உறுதி செய்கிறது.
• அனிமேஷன்: எண்கள் அல்லது வண்ணங்கள் போன்ற குறிப்பிட்ட வகை தனிப்பயன் பண்புகளுக்கு மென்மையான மாற்றங்கள் மற்றும் அனிமேஷன்களை செயல்படுத்துகிறது.
• இயல்புநிலை மதிப்புகள்: தனிப்பயன் பண்பு வெளிப்படையாக வரையறுக்கப்படாவிட்டால் ஒரு பின்னடைவு மதிப்பை வழங்குகிறது.
• மரபுரிமைக் கட்டுப்பாடு: தனிப்பயன் பண்பு அதன் மதிப்பை அதன் பெற்றோர் உறுப்பிலிருந்து மரபுரிமையாகப் பெறுகிறதா என்பதைத் தீர்மானிக்கிறது.

இதை உங்கள் CSS மாறிகளுக்கு வகை பாதுகாப்பைச் சேர்ப்பதாகக் கருதலாம். இது மிகவும் வலுவான மற்றும் கணிக்கக்கூடிய ஸ்டைல்ஷீட்களை உருவாக்க உங்களை அனுமதிக்கிறது.

@property இன் தொடரியல்

The @property விதி இந்த அடிப்படை தொடரியலைப் பின்பற்றுகிறது:

@property --property-name {
  syntax: '';
  inherits: true | false;
  initial-value: ;
}

ஒவ்வொரு பகுதியையும் விரிவாகப் பார்ப்போம்:

• --property-name: நீங்கள் பதிவு செய்ய விரும்பும் தனிப்பயன் பண்பின் பெயர். இது இரண்டு ஹೈபன்களுடன் (--) தொடங்க வேண்டும்.
• syntax: பண்பிற்கான எதிர்பார்க்கப்படும் மதிப்பின் வகையை வரையறுக்கிறது. இது வகை சரிபார்ப்பு மற்றும் அனிமேஷனுக்கு மிகவும் முக்கியமானது. கிடைக்கக்கூடிய தொடரியல் மதிப்புகளைக் கீழே விரிவாக ஆராய்வோம்.
• inherits: பண்பு அதன் பெற்றோர் உறுப்பிலிருந்து மரபுரிமையாகப் பெற வேண்டுமா என்பதைக் குறிக்கும் ஒரு பூலியன் மதிப்பு. குறிப்பிடப்படவில்லை என்றால், இயல்புநிலையாக false ஆக இருக்கும்.
• initial-value: ஒரு உறுப்பில் வெளிப்படையாக அமைக்கப்படாவிட்டால், பண்பிற்கான இயல்புநிலை மதிப்பு இதுவாகும். இது ஒரு பின்னடைவு மதிப்பு எப்போதும் கிடைப்பதை உறுதி செய்கிறது.

syntax விவரிப்பைப் புரிந்துகொள்ளுதல்

syntax விவரிப்பு என்பது @property விதியின் மிக முக்கியமான பகுதியாகும். இது தனிப்பயன் பண்பிற்கு எந்த வகையான மதிப்பை எதிர்பார்க்க வேண்டும் என்பதை உலாவிக்குச் சொல்கிறது. இங்கே சில பொதுவான தொடரியல் மதிப்புகள் உள்ளன:

• *: எந்தவொரு மதிப்பையும் அனுமதிக்கிறது. இது மிகவும் நெகிழ்வான தொடரியல் ஆகும், மேலும் இது பதிவு செய்யப்படாத ஒரு நிலையான CSS மாறியின் நடத்தையை அப்படியே பிரதிபலிக்கிறது. இதை குறைவாகப் பயன்படுத்துங்கள்.
• <length>: ஒரு நீள மதிப்பினை (எ.கா., 10px, 2em, 50%) எதிர்பார்க்கிறது. இது வெவ்வேறு நீள மதிப்புகளுக்கு இடையில் மென்மையான அனிமேஷன்களை செயல்படுத்துகிறது.
• <number>: ஒரு எண் மதிப்பினை (எ.கா., 1, 3.14, -5) எதிர்பார்க்கிறது. ஒளிபுகாமை (opacity) அல்லது அளவு (scale) போன்ற எண் பண்புகளை அனிமேஷன் செய்யப் பயன்படுகிறது.
• <percentage>: ஒரு சதவீத மதிப்பினை (எ.கா., 25%, 100%) எதிர்பார்க்கிறது.
• <color>: ஒரு வண்ண மதிப்பினை (எ.கா., #f00, rgb(255, 0, 0), hsl(0, 100%, 50%)) எதிர்பார்க்கிறது. மென்மையான வண்ண மாற்றங்கள் மற்றும் அனிமேஷன்களை செயல்படுத்துகிறது.
• <image>: ஒரு பட மதிப்பினை (எ.கா., url(image.jpg), linear-gradient(...)) எதிர்பார்க்கிறது.
• <integer>: ஒரு முழு எண் மதிப்பினை (எ.கா., 1, -10, 0) எதிர்பார்க்கிறது.
• <angle>: ஒரு கோண மதிப்பினை (எ.கா., 45deg, 0.5rad, 200grad) எதிர்பார்க்கிறது. சுழற்சிகளை அனிமேஷன் செய்யப் பயன்படுகிறது.
• <time>: ஒரு நேர மதிப்பினை (எ.கா., 1s, 500ms) எதிர்பார்க்கிறது. தனிப்பயன் பண்புகள் மூலம் அனிமேஷன் கால அளவுகள் அல்லது தாமதங்களைக் கட்டுப்படுத்தப் பயன்படுகிறது.
• <resolution>: ஒரு ரெசொலூஷன் மதிப்பினை (எ.கா., 300dpi, 96dpi) எதிர்பார்க்கிறது.
• <transform-list>: உருமாற்ற செயல்பாடுகளின் பட்டியலை (எ.கா., translateX(10px) rotate(45deg)) எதிர்பார்க்கிறது. சிக்கலான உருமாற்றங்களை அனிமேஷன் செய்ய அனுமதிக்கிறது.
• <custom-ident>: ஒரு தனிப்பயன் அடையாளங்காட்டியை (ஒரு சரம்) எதிர்பார்க்கிறது. இது ஒரு enum போன்றது.
• <string>: ஒரு சர மதிப்பினை (எ.கா., "Hello World") எதிர்பார்க்கிறது. இதில் கவனமாக இருங்கள், ஏனெனில் சரங்களை அனிமேஷன் செய்வது பொதுவாக ஆதரிக்கப்படுவதில்லை.
• தனிப்பயன் தொடரியல்கள்: மேலே உள்ளவற்றின் கலவைகள் மற்றும் | (அல்லது), `[]` (குழுவாக்கம்), `+` (ஒன்று அல்லது அதற்கு மேற்பட்டவை), `*` (பூஜ்யம் அல்லது அதற்கு மேற்பட்டவை), மற்றும் `?` (பூஜ்யம் அல்லது ஒன்று) ஆகிய ஆபரேட்டர்களைப் பயன்படுத்தி நீங்கள் மேலும் சிக்கலான தொடரியல்களை உருவாக்கலாம். எடுத்துக்காட்டாக: <length> | <percentage> ஒரு நீளம் அல்லது சதவீத மதிப்பை அனுமதிக்கிறது.

@property இன் முழு சக்தியையும் பயன்படுத்த சரியான syntax ஐத் தேர்ந்தெடுப்பது அவசியம்.

@property இன் நடைமுறை எடுத்துக்காட்டுகள்

உங்கள் CSS-இல் @property ஐ எவ்வாறு பயன்படுத்துவது என்பதற்கான சில நடைமுறை எடுத்துக்காட்டுகளைப் பார்ப்போம்.

எடுத்துக்காட்டு 1: பின்னணி நிறத்தை அனிமேஷன் செய்தல்

ஒரு பொத்தானின் பின்னணி நிறத்தை நீங்கள் அனிமேஷன் செய்ய விரும்புகிறீர்கள் என்று வைத்துக்கொள்வோம். பின்னணி நிறத்திற்காக ஒரு தனிப்பயன் பண்பை பதிவு செய்ய நீங்கள் @property ஐப் பயன்படுத்தலாம், பின்னர் CSS transition-களைப் பயன்படுத்தி அதை அனிமேஷன் செய்யலாம்.

@property --bg-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #fff;
}

.button {
  background-color: var(--bg-color);
  transition: --bg-color 0.3s ease;
}

.button:hover {
  --bg-color: #f00; /* Red */
}

இந்த எடுத்துக்காட்டில், நாம் --bg-color என்ற தனிப்பயன் பண்பை <color> தொடரியலுடன் பதிவு செய்கிறோம், அதாவது அது ஒரு வண்ண மதிப்பை எதிர்பார்க்கிறது. initial-value வெள்ளை நிறமாக (#fff) அமைக்கப்பட்டுள்ளது. பொத்தானின் மீது சுட்டியை வைக்கும்போது, --bg-color சிவப்பு நிறத்திற்கு (#f00) மாற்றப்படுகிறது, மேலும் transition மென்மையாக பின்னணி நிற மாற்றத்தை அனிமேஷன் செய்கிறது.

எடுத்துக்காட்டு 2: எண்ணைக் கொண்டு பார்டர் ரேடியஸைக் கட்டுப்படுத்துதல்

ஒரு உறுப்பின் பார்டர் ரேடியஸைக் கட்டுப்படுத்தவும் அதை அனிமேஷன் செய்யவும் நீங்கள் @property ஐப் பயன்படுத்தலாம்.

@property --border-radius {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

.rounded-box {
  border-radius: var(--border-radius);
  transition: --border-radius 0.5s ease;
}

.rounded-box:hover {
  --border-radius: 20px;
}

இங்கே, நாம் --border-radius ஐ <length> ஆகப் பதிவு செய்கிறோம், அது px, em, அல்லது % போன்ற நீள மதிப்புகளை ஏற்கும் என்பதை உறுதிசெய்கிறோம். ஆரம்ப மதிப்பு 0px ஆகும். .rounded-box மீது சுட்டியை வைக்கும்போது, பார்டர் ரேடியஸ் 20px ஆக அனிமேஷன் ஆகிறது.

எடுத்துக்காட்டு 3: நிழல் ஆஃப்செட்டை அனிமேஷன் செய்தல்

ஒரு box shadow-இன் கிடைமட்ட ஆஃப்செட்டை நீங்கள் அனிமேஷன் செய்ய விரும்புகிறீர்கள் என்று வைத்துக்கொள்வோம்.

@property --shadow-offset-x {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

.shadowed-box {
  box-shadow: var(--shadow-offset-x) 5px 10px rgba(0, 0, 0, 0.5);
  transition: --shadow-offset-x 0.3s ease;
}

.shadowed-box:hover {
  --shadow-offset-x: 10px;
}

இந்த நிலையில், --shadow-offset-x ஒரு <length> ஆகப் பதிவு செய்யப்பட்டுள்ளது, மேலும் அதன் ஆரம்ப மதிப்பு 0px ஆகும். box-shadow பண்பு அதன் கிடைமட்ட ஆஃப்செட்டிற்கு இந்த தனிப்பயன் பண்பைப் பயன்படுத்துகிறது. சுட்டியை வைக்கும்போது, ஆஃப்செட் 10px ஆக அனிமேஷன் ஆகிறது.

எடுத்துக்காட்டு 4: தீமிங்கிற்கு <custom-ident> ஐப் பயன்படுத்துதல்

<custom-ident> தொடரியல், முன்வரையறுக்கப்பட்ட சர மதிப்புகளின் தொகுப்பை வரையறுக்க உங்களை அனுமதிக்கிறது, இது உங்கள் CSS மாறிகளுக்கு ஒரு enum-ஐ உருவாக்குகிறது. இது தீமிங் அல்லது தனித்துவமான நிலைகளைக் கட்டுப்படுத்தப் பயன்படுகிறது.

@property --theme {
  syntax: '<custom-ident>';
  inherits: true;
  initial-value: light;
}

:root {
  --theme: light; /* இயல்புநிலை தீம் */
}

body {
  background-color: var(--theme) == light ? #fff : #333;
  color: var(--theme) == light ? #000 : #fff;
}

.dark-theme {
  --theme: dark;
}

இங்கே, --theme <custom-ident> தொடரியலுடன் பதிவு செய்யப்பட்டுள்ளது. @property விதியிலேயே அனுமதிக்கப்பட்ட அடையாளங்காட்டிகளை நாம் வெளிப்படையாகப் பட்டியலிடவில்லை என்றாலும், குறியீடு அவை `light` மற்றும் `dark` என்பதைக் குறிக்கிறது. பின்னர் CSS தற்போதைய தீமின் அடிப்படையில் வெவ்வேறு ஸ்டைல்களைப் பயன்படுத்த நிபந்தனை தர்க்கத்தைப் (var(--theme) == light ? ... : ...) பயன்படுத்துகிறது. ஒரு உறுப்பிற்கு `dark-theme` என்ற வகுப்பைச் சேர்ப்பது தீமை dark-ஆக மாற்றும். `var()` ஐப் பயன்படுத்தும் நிபந்தனை தர்க்கம் நிலையான CSS அல்ல, மேலும் இதற்கு பெரும்பாலும் ப்ரீப்ராசசர்கள் அல்லது ஜாவாஸ்கிரிப்ட் தேவைப்படும் என்பதை நினைவில் கொள்க. CSS வகுப்புகள் மற்றும் கேஸ்கேடிங்கைப் பயன்படுத்துவது ஒரு நிலையான அணுகுமுறையாகும்:

@property --theme {
  syntax: '<custom-ident>';
  inherits: true;
  initial-value: light;
}

:root {
  --theme: light;
}

body {
  background-color: #fff;
  color: #000;
}

body[data-theme="dark"] {
  background-color: #333;
  color: #fff;
}

/* தீமை மாற்ற ஜாவாஸ்கிரிப்ட் */
/* document.body.setAttribute('data-theme', 'dark'); */

இந்த திருத்தப்பட்ட எடுத்துக்காட்டில், தீமைக் கட்டுப்படுத்த body உறுப்பில் data-theme என்ற பண்பைப் பயன்படுத்துகிறோம். `light` மற்றும் `dark` இடையே பண்பை மாற்றுவதற்கு ஜாவாஸ்கிரிப்ட் (கருத்துரையில் உள்ளது) பயன்படுத்தப்படும். இது CSS மாறிகளுடன் தீமிங் செய்வதற்கான மிகவும் வலுவான மற்றும் நிலையான அணுகுமுறையாகும்.

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

@property ஐப் பயன்படுத்துவது பல நன்மைகளை வழங்குகிறது:

• மேம்படுத்தப்பட்ட குறியீட்டின் வாசிப்புத்திறன் மற்றும் பராமரிப்புத்திறன்: ஒரு தனிப்பயன் பண்பிற்கான எதிர்பார்க்கப்படும் மதிப்பின் வகையை வெளிப்படையாக வரையறுப்பதன் மூலம், உங்கள் குறியீட்டை மேலும் புரிந்துகொள்ளக்கூடியதாகவும், பிழைகள் ஏற்பட வாய்ப்பு குறைவாகவும் ஆக்குகிறீர்கள்.
• மேம்பட்ட அனிமேஷன் திறன்கள்: @property தனிப்பயன் பண்புகளுக்கு மென்மையான மாற்றங்கள் மற்றும் அனிமேஷன்களை செயல்படுத்துகிறது, இது மாறும் மற்றும் ஈர்க்கக்கூடிய பயனர் இடைமுகங்களை உருவாக்குவதற்கான புதிய சாத்தியங்களைத் திறக்கிறது.
• சிறந்த செயல்திறன்: பதிவுசெய்யப்பட்ட தனிப்பயன் பண்புகளைப் பயன்படுத்தி உறுப்புகளின் ரெண்டரிங்கை உலாவிகளால் மேம்படுத்த முடியும், இது மேம்பட்ட செயல்திறனுக்கு வழிவகுக்கிறது.
• வகை பாதுகாப்பு: ஒதுக்கப்பட்ட மதிப்பு அறிவிக்கப்பட்ட தொடரியலுடன் பொருந்துகிறதா என்பதை உலாவி சரிபார்க்கிறது, இது எதிர்பாராத நடத்தையைத் தடுக்கிறது மற்றும் பிழைத்திருத்தத்தை எளிதாக்குகிறது. பல டெவலப்பர்கள் குறியீட்டிற்கு பங்களிக்கும் பெரிய திட்டங்களில் இது மிகவும் பயனுள்ளதாக இருக்கும்.
• இயல்புநிலை மதிப்புகள்: ஒரு தனிப்பயன் பண்பு வெளிப்படையாக அமைக்கப்படாவிட்டாலும், எப்போதும் ஒரு சரியான மதிப்பைக் கொண்டிருப்பதை உறுதி செய்வது, பிழைகளைத் தடுக்கிறது மற்றும் உங்கள் CSS-இன் வலிமையை மேம்படுத்துகிறது.

உலாவி இணக்கத்தன்மை

2023 இன் பிற்பகுதியில், @property க்கு நல்ல, ஆனால் உலகளாவிய உலாவி ஆதரவு இல்லை. இது Chrome, Firefox, Safari மற்றும் Edge உள்ளிட்ட பெரும்பாலான நவீன உலாவிகளில் ஆதரிக்கப்படுகிறது. இருப்பினும், பழைய உலாவிகள் இதை ஆதரிக்காமல் இருக்கலாம். ઉત્પાદனத்தில் @property ஐப் பயன்படுத்துவதற்கு முன்பு, எப்போதும் Can I use... போன்ற வலைத்தளங்களில் சமீபத்திய உலாவி இணக்கத்தன்மை தகவல்களைச் சரிபார்க்கவும்.

பழைய உலாவிகளைக் கையாள, நீங்கள் பின்னடைவு ஸ்டைல்களை வழங்க அம்ச வினவல்களைப் (@supports) பயன்படுத்தலாம்:

@supports (--property: value) {
  /* @property பயன்படுத்தும் ஸ்டைல்கள் */
}

@supports not (--property: value) {
  /* @property ஆதரிக்காத உலாவிகளுக்கான பின்னடைவு ஸ்டைல்கள் */
}

--property மற்றும் value ஐ உண்மையான தனிப்பயன் பண்பு மற்றும் அதன் மதிப்புடன் மாற்றவும்.

@property ஐ எப்போது பயன்படுத்த வேண்டும்

பின்வரும் சூழ்நிலைகளில் @property ஐப் பயன்படுத்த பரிசீலிக்கவும்:

• தனிப்பயன் பண்புகளை அனிமேஷன் செய்ய வேண்டியிருக்கும் போது: இது @property இன் முதன்மை பயன்பாட்டு நிகழ்வாகும். சரியான தொடரியலுடன் பண்பை பதிவு செய்வது மென்மையான அனிமேஷன்களை செயல்படுத்துகிறது.
• தனிப்பயன் பண்புகளுக்கு வகை பாதுகாப்பைச் செயல்படுத்த விரும்பும்போது: ஒரு தனிப்பயன் பண்பு எப்போதும் ஒரு குறிப்பிட்ட வகை மதிப்பைக் கொண்டிருப்பதை உறுதிசெய்ய விரும்பினால், அதை பதிவு செய்ய @property ஐப் பயன்படுத்தவும்.
• ஒரு தனிப்பயன் பண்பிற்கு இயல்புநிலை மதிப்பை வழங்க விரும்பும்போது: initial-value விவரிப்பு ஒரு பின்னடைவு மதிப்பைக் குறிப்பிட உங்களை அனுமதிக்கிறது.
• பெரிய திட்டங்களில்: @property குறியீடு பராமரிப்பை மேம்படுத்துகிறது மற்றும் பிழைகளைத் தடுக்கிறது, இது பல டெவலப்பர்களைக் கொண்ட பெரிய திட்டங்களுக்கு குறிப்பாகப் பயனளிக்கிறது.
• மீண்டும் பயன்படுத்தக்கூடிய கூறுகள் அல்லது வடிவமைப்பு அமைப்புகளை உருவாக்கும்போது: @property உங்கள் கூறுகள் முழுவதும் நிலைத்தன்மை மற்றும் கணிக்கக்கூடிய தன்மையை உறுதிப்படுத்த உதவும்.

தவிர்க்க வேண்டிய பொதுவான தவறுகள்

• syntax விவரிப்பை மறப்பது: syntax விவரிப்பு இல்லாமல், உலாவிக்கு எதிர்பார்க்கப்படும் மதிப்பின் வகை தெரியாது, மேலும் அனிமேஷன்கள் சரியாக வேலை செய்யாது.
• தவறான syntax மதிப்பைப் பயன்படுத்துதல்: தவறான தொடரியலைத் தேர்ந்தெடுப்பது எதிர்பாராத நடத்தைக்கு வழிவகுக்கும். எதிர்பார்க்கப்படும் மதிப்பின் வகையைத் துல்லியமாகப் பிரதிபலிக்கும் தொடரியலைத் தேர்ந்தெடுப்பதை உறுதிப்படுத்திக் கொள்ளுங்கள்.
• initial-value வழங்காமல் இருப்பது: ஒரு ஆரம்ப மதிப்பு இல்லாமல், தனிப்பயன் பண்பு வரையறுக்கப்படாமல் இருக்கலாம், இது பிழைகளுக்கு வழிவகுக்கும். எப்போதும் ஒரு பொருத்தமான இயல்புநிலை மதிப்பை வழங்கவும்.
• * ஐ தொடரியலாக அதிகமாகப் பயன்படுத்துதல்: வசதியாக இருந்தாலும், * ஐப் பயன்படுத்துவது வகை சரிபார்ப்பு மற்றும் அனிமேஷனின் நன்மைகளை மறுக்கிறது. நீங்கள் உண்மையிலேயே எந்த வகை மதிப்பையும் அனுமதிக்க வேண்டியிருக்கும் போது மட்டுமே அதைப் பயன்படுத்தவும்.
• உலாவி இணக்கத்தன்மையை புறக்கணித்தல்: எப்போதும் உலாவி இணக்கத்தன்மையைச் சரிபார்த்து, பழைய உலாவிகளுக்கு பின்னடைவு ஸ்டைல்களை வழங்கவும்.

@property மற்றும் CSS ஹுடினி

@property என்பது CSS ஹுடினி எனப்படும் ஒரு பெரிய APIகளின் தொகுப்பின் ஒரு பகுதியாகும். ஹுடினி டெவலப்பர்களை உலாவியின் ரெண்டரிங் இயந்திரத்தை அணுக அனுமதிக்கிறது, இது ஸ்டைலிங் மற்றும் லேஅவுட் செயல்முறையின் மீது அவர்களுக்கு முன்னோடியில்லாத கட்டுப்பாட்டைக் கொடுக்கிறது. மற்ற ஹுடினி APIகள் பின்வருமாறு:

• பெயிண்ட் API: தனிப்பயன் பின்னணி படங்கள் மற்றும் பார்டர்களை வரையறுக்க உங்களை அனுமதிக்கிறது.
• அனிமேஷன் வொர்க்லெட் API: உலாவியின் கம்போசிட்டர் திரெட்டில் நேரடியாக இயங்கும் உயர் செயல்திறன் கொண்ட அனிமேஷன்களை உருவாக்க ஒரு வழியை வழங்குகிறது.
• லேஅவுட் API: தனிப்பயன் லேஅவுட் அல்காரிதம்களை வரையறுக்க உங்களைச் செயல்படுத்துகிறது.
• பார்சர் API: உலாவியின் CSS பார்சருக்கான அணுகலை வழங்குகிறது.

@property கற்றுக்கொள்வதற்கு ஒப்பீட்டளவில் எளிமையான ஒரு ஹுடினி API ஆகும், ஆனால் இது மேலும் மேம்பட்ட ஹுடினி அம்சங்களை ஆராய்வதற்கான கதவைத் திறக்கிறது.

முடிவுரை

@property என்பது ஒரு சக்திவாய்ந்த CSS at-rule ஆகும், இது தனிப்பயன் பண்புகளுக்கான மேம்பட்ட திறன்களைத் திறக்கிறது. உலாவியில் தனிப்பயன் பண்புகளைப் பதிவு செய்வதன் மூலம், நீங்கள் வகை பாதுகாப்பைச் செயல்படுத்தலாம், மென்மையான அனிமேஷன்களை இயக்கலாம் மற்றும் உங்கள் CSS குறியீட்டின் ஒட்டுமொத்த வலிமையை மேம்படுத்தலாம். உலாவி ஆதரவு உலகளாவியதாக இல்லாவிட்டாலும், @property ஐப் பயன்படுத்துவதன் நன்மைகள், குறிப்பாக பெரிய திட்டங்கள் மற்றும் வடிவமைப்பு அமைப்புகளில், நவீன வலை மேம்பாட்டிற்கு இது ஒரு மதிப்புமிக்க கருவியாக அமைகிறது. @property ஐப் பின்பற்றி, உங்கள் CSS திறன்களை அடுத்த கட்டத்திற்கு எடுத்துச் செல்லுங்கள்!