CSS @property: தனிப்பயன் பண்புகளின் ஆற்றலைக் கட்டவிழ்த்து விடுங்கள்

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

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

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

சுருக்கமாக, @property CSS மாறிகளுக்கு சூப்பர் பவர்களை வழங்குகிறது.

@property-ஐ ஏன் பயன்படுத்த வேண்டும்?

நிலையான CSS மாறிகள் நம்பமுடியாத அளவிற்கு பயனுள்ளதாக இருந்தாலும், அவற்றுக்கு வரம்புகள் உள்ளன. @property சிறந்து விளங்கும் இந்தச் சூழ்நிலைகளைக் கவனியுங்கள்:

• அனிமேஷன் மற்றும் மாற்றங்கள்: நிலையான CSS மாறிகள், சரங்களாகக் கருதப்படுவதால், வெவ்வேறு வகையான மதிப்புகளுக்கு இடையில் (எ.கா., ஒரு எண்ணிலிருந்து ஒரு நிறத்திற்கு) மென்மையாக அனிமேட் செய்ய முடியாது. @property மாறியின் வகையை வரையறுக்க உங்களை அனுமதிக்கிறது, மென்மையான மாற்றங்கள் மற்றும் அனிமேஷன்களை செயல்படுத்துகிறது. ஒரு நிறத்தின் சாயலைக் குறிக்கும் ஒரு தனிப்பயன் பண்பை அனிமேட் செய்வதை கற்பனை செய்து பாருங்கள்; ஒரு நிலையான CSS மாறியுடன், இதற்கு ஜாவாஸ்கிரிப்ட் ஹேக்குகள் தேவைப்படும், ஆனால் @property உடன் மற்றும் தொடரியலை <color> என வரையறுப்பதன் மூலம், உலாவி இயல்பாகவே அனிமேஷனைக் கையாள முடியும்.
• வகை சரிபார்ப்பு: ஒரு தனிப்பயன் பண்பு ஒரு குறிப்பிட்ட வகை மதிப்புகளை (எ.கா., <number>, <color>, <length>) மட்டுமே ஏற்றுக்கொள்கிறது என்பதை நீங்கள் உறுதிப்படுத்தலாம். இது பிழைகளைத் தடுக்க உதவுகிறது மற்றும் உங்கள் CSS மிகவும் வலுவாக இருப்பதை உறுதி செய்கிறது. நீங்கள் ஒரு தவறான மதிப்பை ஒதுக்க முயன்றால், உலாவி வரையறுக்கப்பட்ட ஆரம்ப மதிப்பைப் பயன்படுத்தும். இது வளர்ச்சியின் பின்னர் ஏற்படக்கூடிய பிழைகளை நம்பியிருப்பதை விட மிகவும் நம்பகமானது.
• இயல்புநிலை மதிப்புகள் மற்றும் மரபுரிமை: @property பண்புக்கான ஆரம்ப மதிப்பை குறிப்பிடவும் அதன் மரபுரிமை நடத்தையைக் கட்டுப்படுத்தவும் உங்களை அனுமதிக்கிறது. இது உங்கள் CSS-ஐ எளிதாக்குகிறது மற்றும் அதை மேலும் கணிக்கக்கூடியதாக ஆக்குகிறது. தெளிவான ஆரம்ப மதிப்புகளை வரையறுப்பது சிக்கலான திட்டங்களுக்கு அவசியமாகிறது, ஒரு தனிப்பயன் பண்பு வெளிப்படையாக அமைக்கப்படாதபோது எதிர்பாராத காட்சி குறைபாடுகளைத் தடுக்கிறது.
• மேம்படுத்தப்பட்ட CSS வாசிப்புத்திறன் மற்றும் பராமரிப்புத்திறன்: உங்கள் தனிப்பயன் பண்புகளை @property உடன் வெளிப்படையாக வரையறுப்பது உங்கள் CSS-ஐப் புரிந்துகொள்வதற்கும் பராமரிப்பதற்கும் எளிதாக்குகிறது, குறிப்பாக பெரிய திட்டங்களில். இது சுய-ஆவணமாகச் செயல்படுகிறது, ஒரு தனிப்பயன் பண்பு எதற்காக நோக்கம் கொண்டது மற்றும் அதை எவ்வாறு பயன்படுத்த வேண்டும் என்பதைத் தெளிவாக்குகிறது.

@property தொடரியல்

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

            @property --property-name {
 syntax: <value>;
 inherits: <boolean>;
 initial-value: <value>;
}

            

              
                Copy
              
            
          

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

• --property-name: இது உங்கள் தனிப்பயன் பண்பின் பெயர். இது இரண்டு ஹೈபன்களுடன் (--) தொடங்க வேண்டும். எடுத்துக்காட்டாக, --primary-color.
• syntax: இது பண்பு ஏற்றுக்கொள்ளக்கூடிய மதிப்பின் வகையை வரையறுக்கிறது. இது <color>, <number>, <length>, <percentage>, <url>, <integer>, மற்றும் பல போன்ற CSS <value> வகைகளின் அதே தொடரியலைப் பயன்படுத்துகிறது. எந்த மதிப்பையும் அனுமதிக்க நீங்கள் வைல்டு கார்டு * ஐப் பயன்படுத்தலாம்.
• inherits: இது ஒரு பூலியன் மதிப்பாகும், இது பண்பு அதன் பெற்றோர் உறுப்பிலிருந்து அதன் மதிப்பை மரபுரிமையாகப் பெறுகிறதா என்பதைத் தீர்மானிக்கிறது. இது true அல்லது false ஆக இருக்கலாம்.
• initial-value: இது பண்பின் இயல்புநிலை மதிப்பாகும். இது குறிப்பிட்ட தொடரியலின்படி ஒரு செல்லுபடியாகும் மதிப்பாக இருக்க வேண்டும்.

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

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

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

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

            @property --button-bg-color {
 syntax: <color>;
 inherits: false;
 initial-value: #007bff;
}

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

.button:hover {
 --button-bg-color: #28a745;
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், --button-bg-color என்ற தனிப்பயன் பண்பை <color> தொடரியலுடன் வரையறுக்கிறோம். இது உலாவிக்கு பண்பு எப்போதும் ஒரு நிற மதிப்பாக இருக்க வேண்டும் என்று கூறுகிறது. பொத்தானின் மீது சுட்டியை வைக்கும்போது, நிறம் ஆரம்ப நீலத்திலிருந்து (#007bff) பச்சைக்கு (#28a745) மென்மையாக மாறுகிறது.

எடுத்துக்காட்டு 2: ஒரு எண்ணை அனிமேட் செய்தல்

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

            @property --progress-width {
 syntax: <percentage>;
 inherits: false;
 initial-value: 0%;
}

.progress-bar {
 width: var(--progress-width);
 height: 10px;
 background-color: #4CAF50;
 transition: --progress-width 0.5s ease-in-out;
}

.progress-bar.complete {
 --progress-width: 100%;
}

            

              
                Copy
              
            
          

இங்கே, --progress-width என்ற தனிப்பயன் பண்பை <percentage> தொடரியலுடன் வரையறுக்கிறோம். ஆரம்ப மதிப்பு 0% என அமைக்கப்பட்டுள்ளது. முன்னேற்றப் பட்டியில் .complete வகுப்பு சேர்க்கப்படும்போது, அகலம் மென்மையாக 100% ஆக அனிமேட் ஆகிறது.

எடுத்துக்காட்டு 3: ஒரு நீள மதிப்பைச் சரிபார்த்தல்

ஒரு தனிப்பயன் பண்பு நீள மதிப்புகளை மட்டுமே ஏற்றுக்கொள்கிறது என்பதை உறுதிப்படுத்த நீங்கள் @property-ஐப் பயன்படுத்தலாம்:

            @property --spacing {
 syntax: <length>;
 inherits: true;
 initial-value: 10px;
}

.element {
 margin: var(--spacing);
}

.element.large {
 --spacing: 20px; /* Valid */
}

.element.invalid {
 --spacing: red; /* Invalid - will revert to initial-value */
}

            

              
                Copy
              
            
          

இந்த நிலையில், --spacing என்பது <length> தொடரியலுடன் வரையறுக்கப்பட்டுள்ளது. நீங்கள் நீளம் அல்லாத மதிப்பை (red போன்றவை) ஒதுக்க முயன்றால், உலாவி அதை புறக்கணித்து ஆரம்ப மதிப்பை (10px) பயன்படுத்தும்.

எடுத்துக்காட்டு 4: ஒரு தனிப்பயன் நிழலை வரையறுத்தல்

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

            @property --my-shadow {
 syntax: *;
 inherits: false;
 initial-value: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.shadow-box {
 box-shadow: var(--my-shadow);
}

.shadow-box:hover {
 --my-shadow: 0px 8px 12px rgba(0, 0, 0, 0.2);
 transition: --my-shadow 0.3s ease;
}

            

              
                Copy
              
            
          

உலகளாவிய பரிசீலனைகள் மற்றும் சிறந்த நடைமுறைகள்

உலகளாவிய பார்வையாளர்களுக்காக உருவாக்கப்பட்ட திட்டங்களில் @property-ஐப் பயன்படுத்தும்போது, இந்தக் கருத்தாய்வுகளை மனதில் கொள்ளுங்கள்:

• அணுகல்தன்மை: @property உடன் உருவாக்கப்பட்ட எந்த அனிமேஷன்களும் அல்லது மாற்றங்களும் ஊனமுற்ற பயனர்களுக்கு அணுகல்தன்மை சிக்கல்களை ஏற்படுத்தாது என்பதை உறுதிப்படுத்தவும். தேவைப்பட்டால் அனிமேஷன்களை முடக்குவதற்கான விருப்பங்களை வழங்கவும். உலகின் வெவ்வேறு பகுதிகளில் உள்ள பயனர்களுக்கு இணைய இணைப்பு மற்றும் வன்பொருள் திறன்களின் நிலைகள் வேறுபடலாம் என்பதை நினைவில் கொள்ளுங்கள். குறைந்த திறன் கொண்ட சாதனங்களில் செயல்திறனை எதிர்மறையாக பாதிக்கும் அதிகப்படியான சிக்கலான அனிமேஷன்களைத் தவிர்க்கவும்.
• சர்வதேசமயமாக்கல் (i18n) மற்றும் உள்ளூர்மயமாக்கல் (l10n): தனிப்பயன் பண்புகள் வெவ்வேறு மொழிகள் மற்றும் கலாச்சார சூழல்களுடன் எவ்வாறு தொடர்பு கொள்ளலாம் என்பதைக் கவனியுங்கள். தளவமைப்பு அல்லது அச்சுக்கலையைக் கட்டுப்படுத்த தனிப்பயன் பண்புகளைப் பயன்படுத்துகிறீர்கள் என்றால், உங்கள் வடிவமைப்பு வெவ்வேறு உரை திசைகள் மற்றும் எழுத்துத் தொகுப்புகளுக்கு ஏற்றவாறு மாற்றியமைக்கப்படுவதை உறுதிசெய்யவும். எடுத்துக்காட்டாக, வலமிருந்து இடமாக (RTL) உள்ள மொழிகளில் முன்னேற்றப் பட்டியின் உரை திசையை மாற்ற வேண்டியிருக்கலாம்.
• செயல்திறன்: @property இயல்பான CSS அனிமேஷன்களை இயக்குவதன் மூலம் செயல்திறனை மேம்படுத்த முடியும் என்றாலும், உங்கள் குறியீட்டை மேம்படுத்துவது இன்னும் முக்கியம். பக்கத்தை மெதுவாக்கக்கூடிய தேவையற்ற கணக்கீடுகள் அல்லது சிக்கலான அனிமேஷன்களைத் தவிர்க்கவும். உங்கள் குறியீடு பல தளங்களில் சிறப்பாக செயல்படுவதை உறுதிசெய்ய வெவ்வேறு சாதனங்கள் மற்றும் உலாவிகளில் சோதிக்கவும்.
• உலாவி இணக்கத்தன்மை: உற்பத்தியில் @property-ஐப் பயன்படுத்துவதற்கு முன்பு உலாவி இணக்கத்தன்மையை சரிபார்க்கவும். ஆதரவு கணிசமாக மேம்பட்டுள்ள போதிலும், இந்த அம்சத்தை ஆதரிக்காத பழைய உலாவிகளில் உங்கள் குறியீடு அழகாகச் சிதைவதை உறுதி செய்வது முக்கியம். தேவைப்படும்போது பின்னடைவு ஸ்டைல்களை வழங்க அம்ச வினவல்களை (@supports) பயன்படுத்தவும். 2024-இன் பிற்பகுதியில், அனைத்து முக்கிய உலாவிகளும் இந்த அம்சத்தை ஆதரிப்பதால், உலாவி ஆதரவு மிகவும் நன்றாக உள்ளது.
• பெயரிடும் மரபுகள்: உங்கள் தனிப்பயன் பண்புகளுக்கு தெளிவான மற்றும் சீரான பெயரிடும் மரபுகளைப் பின்பற்றுங்கள். இது உங்கள் குறியீட்டைப் புரிந்துகொள்வதற்கும் பராமரிப்பதற்கும் எளிதாக்கும், குறிப்பாக ஒரு குழுவில் பணிபுரியும்போது. பண்பின் நோக்கத்தை தெளிவாகக் குறிக்கும் விளக்கமான பெயர்களைப் பயன்படுத்தவும். எடுத்துக்காட்டாக, --color என்பதற்கு பதிலாக, --primary-button-color-ஐப் பயன்படுத்தவும்.
• ஆவணப்படுத்தல்: உங்கள் தனிப்பயன் பண்புகளை முழுமையாக ஆவணப்படுத்துங்கள், குறிப்பாக பெரிய திட்டங்களில் அல்லது ஒரு குழுவுடன் பணிபுரியும்போது. ஒவ்வொரு பண்பின் நோக்கம், அதன் தொடரியல், ஆரம்ப மதிப்பு மற்றும் பிற பண்புகளுடன் உள்ள சார்புகள் அல்லது தொடர்புகளை விளக்கவும். இது மற்ற டெவலப்பர்கள் உங்கள் குறியீட்டைப் புரிந்துகொண்டு திறம்பட பயன்படுத்த உதவும்.
• தீமிங் மற்றும் பிராண்டிங்: உங்கள் வலைத்தளம் அல்லது பயன்பாட்டிற்கு நெகிழ்வான மற்றும் தனிப்பயனாக்கக்கூடிய தீம்களை உருவாக்க @property-ஐப் பயன்படுத்தவும். நிறங்கள், எழுத்துருக்கள், இடைவெளி மற்றும் பிற வடிவமைப்பு கூறுகளுக்கு தனிப்பயன் பண்புகளை வரையறுத்து, இந்தப் பண்புகளை மாற்றுவதன் மூலம் பயனர்கள் வெவ்வேறு தீம்களுக்கு இடையில் எளிதாக மாற அனுமதிக்கவும். இது வெவ்வேறு பிராந்தியங்கள் மற்றும் மொழிகளில் நிலைத்தன்மையை பராமரிக்க வேண்டிய உலகளாவிய பிராண்டுகளைக் கொண்ட நிறுவனங்களுக்கு குறிப்பாக பயனுள்ளதாக இருக்கும்.

@property-ஐப் பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள்

@property-ஐப் பயன்படுத்தும்போது பின்பற்ற வேண்டிய சில சிறந்த நடைமுறைகள் இங்கே:

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

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

2024-இன் பிற்பகுதியில், @property குரோம், பயர்பாக்ஸ், சஃபாரி மற்றும் எட்ஜ் உள்ளிட்ட அனைத்து முக்கிய உலாவிகளிலும் ஆதரிக்கப்படுகிறது. இருப்பினும், உற்பத்தியில் @property-ஐப் பயன்படுத்துவதற்கு முன்பு Can I use போன்ற ஆதாரங்களில் சமீபத்திய உலாவி இணக்கத்தன்மை தகவலைச் சரிபார்ப்பது எப்போதும் ஒரு நல்ல யோசனையாகும்.

@property-ஐ ஆதரிக்காத பழைய உலாவிகளுக்கு, பின்னடைவு ஸ்டைல்களை வழங்க அம்ச வினவல்களை (@supports) பயன்படுத்தலாம். எடுத்துக்காட்டாக:

            @supports (--custom-property: initial) {
 /* Styles for browsers that support custom properties */
}

@supports not (--custom-property: initial) {
 /* Fallback styles for older browsers */
}

            

              
                Copy
              
            
          

முடிவுரை

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

எனவே, @property-இன் ஆற்றலைத் தழுவி, உங்கள் அடுத்த திட்டத்தில் CSS தனிப்பயன் பண்புகளின் முழு திறனையும் திறக்கவும்!