ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿ ಪ್ರಕಾರಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು CSS @property ಯ ಶಕ್ತಿಯನ್ನು ಅನ್ವೇಷಿಸಿ, ಇದು ಸುಧಾರಿತ ಸ್ಟೈಲಿಂಗ್, ಅನಿಮೇಷನ್‌ಗಳು ಮತ್ತು ಸುಗಮ ಪರಿವರ್ತನೆಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ. ಈ ಮಾರ್ಗದರ್ಶಿ ಆಧುನಿಕ ವೆಬ್ ಅಭಿವೃದ್ಧಿಗೆ ಸಿಂಟ್ಯಾಕ್ಸ್, ಬಳಕೆ ಮತ್ತು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳನ್ನು ಒಳಗೊಂಡಿದೆ.
CSS ಮ್ಯಾಜಿಕ್ ಅನ್ನು ಅನ್ಲಾಕ್ ಮಾಡುವುದು: @property ಮತ್ತು ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿ ಟೈಪ್ ವ್ಯಾಖ್ಯಾನಗಳ ಆಳವಾದ ನೋಟ
CSS ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳು (CSS ವೇರಿಯೇಬಲ್‌ಗಳು ಎಂದೂ ಕರೆಯಲ್ಪಡುತ್ತವೆ) ನಾವು CSS ಬರೆಯುವ ಮತ್ತು ನಿರ್ವಹಿಸುವ ರೀತಿಯಲ್ಲಿ ಕ್ರಾಂತಿಯನ್ನುಂಟು ಮಾಡಿವೆ. ಅವು ಮರುಬಳಕೆ, ನಮ್ಯತೆ ಮತ್ತು ನಿರ್ವಹಣೆಯನ್ನು ಒದಗಿಸುತ್ತವೆ, ನಮ್ಮ ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳನ್ನು ಹೆಚ್ಚು ಕ್ರಿಯಾತ್ಮಕ ಮತ್ತು ನಿರ್ವಹಣೆಗೆ ಯೋಗ್ಯವಾಗಿಸುತ್ತವೆ. ಆದಾಗ್ಯೂ, ಇತ್ತೀಚಿನವರೆಗೂ, ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳಿಗೆ ತಮ್ಮ ನಿರೀಕ್ಷಿತ ಡೇಟಾ ಪ್ರಕಾರಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವ ಸಾಮರ್ಥ್ಯದ ಕೊರತೆಯಿತ್ತು, ಇದು ಸುಧಾರಿತ ಸ್ಟೈಲಿಂಗ್ ಮತ್ತು ಅನಿಮೇಷನ್‌ಗಳಿಗೆ ಅವುಗಳ ಸಾಮರ್ಥ್ಯವನ್ನು ಸೀಮಿತಗೊಳಿಸಿತ್ತು. ಇಲ್ಲಿಗೆ @property ನಿಯಮ ಬರುತ್ತದೆ – ಇದು ನಮ್ಮ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳ ಪ್ರಕಾರ, ಸಿಂಟ್ಯಾಕ್ಸ್, ಮತ್ತು ಆರಂಭಿಕ ಮೌಲ್ಯವನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸಲು ನಮಗೆ ಅನುಮತಿಸುವ ಒಂದು ಗೇಮ್-ಚೇಂಜರ್ ಆಗಿದೆ.
@property ನಿಯಮ ಎಂದರೇನು?
@property ನಿಯಮವು CSS ಹೌಡಿನಿ ಕುಟುಂಬದ API ಗಳ ಒಂದು ಭಾಗವಾಗಿದೆ, ಇದು CSS ಇಂಜಿನ್‌ನ ಆಂತರಿಕ ಕಾರ್ಯಗಳನ್ನು ಡೆವಲಪರ್‌ಗಳಿಗೆ ಬಹಿರಂಗಪಡಿಸುವ ಗುರಿಯನ್ನು ಹೊಂದಿದೆ. ನಿರ್ದಿಷ್ಟವಾಗಿ ಹೇಳುವುದಾದರೆ, @property ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟೀಸ್ ಮತ್ತು ವ್ಯಾಲ್ಯೂಸ್ API ನ ಒಂದು ಭಾಗವಾಗಿದೆ. ಇದು ಬ್ರೌಸರ್‌ನೊಂದಿಗೆ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯನ್ನು ನೋಂದಾಯಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ, ಅದರ:
- name: ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯ ಹೆಸರು (ಉದಾ.,
--my-color). - syntax: ಪ್ರಾಪರ್ಟಿಯ ನಿರೀಕ್ಷಿತ ಡೇಟಾ ಪ್ರಕಾರ (ಉದಾ.,
<color>,<number>,<length>). - inherits: ಪ್ರಾಪರ್ಟಿಯು ಅದರ ಪೋಷಕ ಎಲಿಮೆಂಟ್‌ನಿಂದ ಅದರ ಮೌಲ್ಯವನ್ನು ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯಬೇಕೇ (
trueಅಥವಾfalse). - initial-value: ಬೇರೆ ಯಾವುದೇ ಮೌಲ್ಯವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸದಿದ್ದರೆ ಪ್ರಾಪರ್ಟಿಯ ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯ.
ಈ ಗುಣಲಕ್ಷಣಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವ ಮೂಲಕ, ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಹೇಗೆ ಬಳಸಲಾಗುತ್ತದೆ ಮತ್ತು ಅವು ಹೇಗೆ ವರ್ತಿಸುತ್ತವೆ, ವಿಶೇಷವಾಗಿ ಅನಿಮೇಷನ್‌ಗಳು ಮತ್ತು ಪರಿವರ್ತನೆಗಳಲ್ಲಿ, ಎಂಬುದರ ಮೇಲೆ ನೀವು ಹೆಚ್ಚಿನ ನಿಯಂತ್ರಣವನ್ನು ಪಡೆಯುತ್ತೀರಿ.
@property ಅನ್ನು ಏಕೆ ಬಳಸಬೇಕು? ಪ್ರಯೋಜನಗಳು
@property ಅನ್ನು ಬಳಸುವುದು ಹಲವಾರು ಗಮನಾರ್ಹ ಪ್ರಯೋಜನಗಳನ್ನು ನೀಡುತ್ತದೆ:
1. ಟೈಪ್ ಸುರಕ್ಷತೆ ಮತ್ತು ಮೌಲ್ಯಮಾಪನ
@property ಇಲ್ಲದೆ, CSS ಎಲ್ಲಾ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಸ್ಟ್ರಿಂಗ್‌ಗಳಾಗಿ ಪರಿಗಣಿಸುತ್ತದೆ. ನಿರ್ದಿಷ್ಟ ಡೇಟಾ ಪ್ರಕಾರಗಳ ಅಗತ್ಯವಿರುವ ಲೆಕ್ಕಾಚಾರಗಳು ಅಥವಾ ಅನಿಮೇಷನ್‌ಗಳಲ್ಲಿ ನೀವು ಅವುಗಳನ್ನು ಬಳಸಲು ಪ್ರಯತ್ನಿಸಿದಾಗ ಇದು ಅನಿರೀಕ್ಷಿತ ನಡವಳಿಕೆಗೆ ಕಾರಣವಾಗಬಹುದು. ಉದಾಹರಣೆಗೆ, ನೀವು ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯನ್ನು ಸಂಖ್ಯೆಯನ್ನು ಪ್ರತಿನಿಧಿಸಲು ಉದ್ದೇಶಿಸಿದ್ದರೆ ಆದರೆ ಆಕಸ್ಮಿಕವಾಗಿ ಅದಕ್ಕೆ ಸ್ಟ್ರಿಂಗ್ ಮೌಲ್ಯವನ್ನು ನಿಯೋಜಿಸಿದರೆ, ನಿಮ್ಮ ಅನಿಮೇಷನ್‌ಗಳು ಮುರಿಯಬಹುದು ಅಥವಾ ತಪ್ಪಾದ ಫಲಿತಾಂಶಗಳನ್ನು ಉಂಟುಮಾಡಬಹುದು.
@property ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯ ನಿರೀಕ್ಷಿತ ಸಿಂಟ್ಯಾಕ್ಸ್ (ಡೇಟಾ ಪ್ರಕಾರ) ಅನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುವ ಮೂಲಕ ಇದನ್ನು ಪರಿಹರಿಸುತ್ತದೆ. ಬ್ರೌಸರ್ ನಂತರ ಈ ಸಿಂಟ್ಯಾಕ್ಸ್‌ಗೆ ವಿರುದ್ಧವಾಗಿ ನಿಯೋಜಿಸಲಾದ ಮೌಲ್ಯವನ್ನು ಮೌಲ್ಯೀಕರಿಸುತ್ತದೆ, ಅದು ನಿರೀಕ್ಷಿತ ಪ್ರಕಾರಕ್ಕೆ ಅನುಗುಣವಾಗಿದೆಯೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಮೌಲ್ಯವು ಸಿಂಟ್ಯಾಕ್ಸ್‌ಗೆ ಹೊಂದಿಕೆಯಾಗದಿದ್ದರೆ, ಬ್ರೌಸರ್ ಆರಂಭಿಕ ಮೌಲ್ಯವನ್ನು ಬಳಸುತ್ತದೆ (ಒದಗಿಸಿದ್ದರೆ) ಅಥವಾ ಪ್ರಾಪರ್ಟಿಯನ್ನು ಅಮಾನ್ಯವೆಂದು ಪರಿಗಣಿಸುತ್ತದೆ.
2. ಸುಗಮ ಅನಿಮೇಷನ್‌ಗಳು ಮತ್ತು ಪರಿವರ್ತನೆಗಳು
@property ನ ನಿಜವಾದ ಶಕ್ತಿಯು ಅನಿಮೇಷನ್‌ಗಳು ಮತ್ತು ಪರಿವರ್ತನೆಗಳಿಗೆ ಬಂದಾಗ ಹೊಳೆಯುತ್ತದೆ. ಅದಿಲ್ಲದೆ, ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಅನಿಮೇಟ್ ಮಾಡುವುದು ಕಷ್ಟಕರವಾಗಿರುತ್ತದೆ ಏಕೆಂದರೆ ಜೆನೆರಿಕ್ ಸ್ಟ್ರಿಂಗ್‌ನ ವಿಭಿನ್ನ ಮೌಲ್ಯಗಳ ನಡುವೆ ಹೇಗೆ ಇಂಟರ್‌ಪೋಲೇಟ್ ಮಾಡಬೇಕೆಂದು ಬ್ರೌಸರ್‌ಗೆ ತಿಳಿದಿರುವುದಿಲ್ಲ. ಬಯಸಿದ ಪರಿಣಾಮವನ್ನು ಸಾಧಿಸಲು ನೀವು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಹ್ಯಾಕ್‌ಗಳನ್ನು ಆಶ್ರಯಿಸಬೇಕಾಗಬಹುದು ಅಥವಾ ಸೀಮಿತ CSS ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಬಳಸಬೇಕಾಗಬಹುದು.
ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯ ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವ ಮೂಲಕ, ಅನಿಮೇಷನ್‌ಗಳು ಮತ್ತು ಪರಿವರ್ತನೆಗಳ ಸಮಯದಲ್ಲಿ ಅದರ ಮೌಲ್ಯಗಳ ನಡುವೆ ಹೇಗೆ ಇಂಟರ್‌ಪೋಲೇಟ್ ಮಾಡಬೇಕೆಂದು ನೀವು ಬ್ರೌಸರ್‌ಗೆ ತಿಳಿಸುತ್ತೀರಿ. ಉದಾಹರಣೆಗೆ, ನೀವು <color> ಸಿಂಟ್ಯಾಕ್ಸ್‌ನೊಂದಿಗೆ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿದರೆ, ಬ್ರೌಸರ್‌ಗೆ ಬಣ್ಣಗಳ ನಡುವೆ ಸುಗಮ ಬಣ್ಣದ ಗ್ರೇಡಿಯಂಟ್ ಬಳಸಿ ಇಂಟರ್‌ಪೋಲೇಟ್ ಮಾಡಬೇಕೆಂದು ತಿಳಿದಿರುತ್ತದೆ. ಅಂತೆಯೇ, ನೀವು <number> ಸಿಂಟ್ಯಾಕ್ಸ್‌ನೊಂದಿಗೆ ಪ್ರಾಪರ್ಟಿಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿದರೆ, ಬ್ರೌಸರ್‌ಗೆ ರೇಖೀಯ ಪ್ರಗತಿಯನ್ನು ಬಳಸಿಕೊಂಡು ಸಂಖ್ಯೆಗಳ ನಡುವೆ ಇಂಟರ್‌ಪೋಲೇಟ್ ಮಾಡಬೇಕೆಂದು ತಿಳಿದಿರುತ್ತದೆ.
3. ಸುಧಾರಿತ ಕೋಡ್ ಓದುವಿಕೆ ಮತ್ತು ನಿರ್ವಹಣೆ
@property ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯು ಯಾವ ಡೇಟಾ ಪ್ರಕಾರವನ್ನು ಪ್ರತಿನಿಧಿಸಲು ಉದ್ದೇಶಿಸಲಾಗಿದೆ ಎಂಬುದನ್ನು ಸ್ಪಷ್ಟಪಡಿಸುವ ಮೂಲಕ ನಿಮ್ಮ CSS ಕೋಡ್‌ನ ಓದುವಿಕೆ ಮತ್ತು ನಿರ್ವಹಣೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ. ಇದು ಇತರ ಡೆವಲಪರ್‌ಗಳಿಗೆ (ಮತ್ತು ನಿಮ್ಮ ಭವಿಷ್ಯದ ನಿಮಗೆ) ಪ್ರಾಪರ್ಟಿಯ ಉದ್ದೇಶ ಮತ್ತು ಅದನ್ನು ಹೇಗೆ ಬಳಸಬೇಕು ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
ಇದಲ್ಲದೆ, ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯ ಆರಂಭಿಕ ಮೌಲ್ಯವನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸುವ ಮೂಲಕ, ಬೇರೆ ಯಾವುದೇ ಮೌಲ್ಯವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸದಿದ್ದರೆ ಬಳಸಲಾಗುವ ಸ್ಪಷ್ಟ ಫಾಲ್‌ಬ್ಯಾಕ್ ಮೌಲ್ಯವನ್ನು ನೀವು ಒದಗಿಸುತ್ತೀರಿ. ಇದು ಅನಿರೀಕ್ಷಿತ ದೃಶ್ಯ ದೋಷಗಳನ್ನು ತಡೆಯಬಹುದು ಮತ್ತು ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಹೆಚ್ಚು ದೃಢವಾಗಿಸುತ್ತದೆ.
4. ವರ್ಧಿತ ಕಾರ್ಯಕ್ಷಮತೆ
ಕೆಲವು ಸಂದರ್ಭಗಳಲ್ಲಿ, @property ಅನ್ನು ಬಳಸುವುದರಿಂದ ನಿಮ್ಮ CSS ಕೋಡ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸಬಹುದು. ನಿಮ್ಮ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳ ನಿರೀಕ್ಷಿತ ಡೇಟಾ ಪ್ರಕಾರಗಳ ಬಗ್ಗೆ ಬ್ರೌಸರ್‌ಗೆ ಹೆಚ್ಚಿನ ಮಾಹಿತಿಯನ್ನು ಒದಗಿಸುವ ಮೂಲಕ, ನೀವು ರೆಂಡರಿಂಗ್ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು ಅದಕ್ಕೆ ಅವಕಾಶ ನೀಡುತ್ತೀರಿ. ಇದು ವೇಗದ ಅನಿಮೇಷನ್‌ಗಳು ಮತ್ತು ಪರಿವರ್ತನೆಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು, ವಿಶೇಷವಾಗಿ ಸಂಕೀರ್ಣ ಲೇಔಟ್‌ಗಳಲ್ಲಿ.
@property ಯ ಸಿಂಟ್ಯಾಕ್ಸ್
@property ನಿಯಮವನ್ನು ಈ ಕೆಳಗಿನ ಸಿಂಟ್ಯಾಕ್ಸ್ ಬಳಸಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾಗಿದೆ:
@property --property-name {
syntax: <type>;
inherits: true | false;
initial-value: <value>;
}
ಈ ಪ್ರತಿಯೊಂದು ಘಟಕಗಳನ್ನು ವಿಶ್ಲೇಷಿಸೋಣ:
--property-name: ಇದು ನೀವು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತಿರುವ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯ ಹೆಸರು. ಇದು ಎರಡು ಹೈಫನ್‌ಗಳೊಂದಿಗೆ (--) ಪ್ರಾರಂಭವಾಗಬೇಕು ಮತ್ತು ಯಾವುದೇ ಮಾನ್ಯ CSS ಐಡೆಂಟಿಫೈಯರ್ ಅಕ್ಷರಗಳನ್ನು ಒಳಗೊಂಡಿರಬಹುದು. ಉದಾಹರಣೆಗೆ:--primary-color,--font-size,--spacing-unit.syntax: ಇದು ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯ ನಿರೀಕ್ಷಿತ ಡೇಟಾ ಪ್ರಕಾರವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ. ಇದನ್ನು CSS ಮೌಲ್ಯ ಪ್ರಕಾರದ ವಿವರಣಕಾರವನ್ನು ಬಳಸಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾಗಿದೆ. ಕೆಲವು ಸಾಮಾನ್ಯ ಸಿಂಟ್ಯಾಕ್ಸ್ ಮೌಲ್ಯಗಳು ಸೇರಿವೆ:<color>: ಬಣ್ಣದ ಮೌಲ್ಯವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ (ಉದಾ.,#ffffff,rgb(255, 255, 255),hsl(0, 0%, 100%),white).<number>: ಸಂಖ್ಯಾತ್ಮಕ ಮೌಲ್ಯವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ (ಉದಾ.,1,3.14,-42).<length>: ಉದ್ದದ ಮೌಲ್ಯವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ (ಉದಾ.,10px,2em,50vh,1rem).<percentage>: ಶೇಕಡಾವಾರು ಮೌಲ್ಯವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ (ಉದಾ.,50%,100%,25.5%).<string>: ಸ್ಟ್ರಿಂಗ್ ಮೌಲ್ಯವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ (ಉದಾ.,"Hello","World").<image>: ಚಿತ್ರದ ಮೌಲ್ಯವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ (ಉದಾ.,url("image.jpg"),linear-gradient(...)).<angle>: ಕೋನದ ಮೌಲ್ಯವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ (ಉದಾ.,45deg,0.5rad,1turn).*: ಯಾವುದೇ ಮಾನ್ಯ CSS ಮೌಲ್ಯವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ. ಎಚ್ಚರಿಕೆಯಿಂದ ಬಳಸಿ, ಏಕೆಂದರೆ ಇದು ಟೈಪ್ ಚೆಕಿಂಗ್‌ನ ಉದ್ದೇಶವನ್ನು ಸೋಲಿಸುತ್ತದೆ.- ಕಸ್ಟಮ್ ಸಿಂಟ್ಯಾಕ್ಸ್: ರೆಗ್ಯುಲರ್ ಎಕ್ಸ್‌ಪ್ರೆಶನ್-ರೀತಿಯ ಮಾದರಿಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಸಂಕೀರ್ಣ ಸಿಂಟ್ಯಾಕ್ಸ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
inherits: ಈ ಬೂಲಿಯನ್ ಮೌಲ್ಯವು ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯು ಅದರ ಪೋಷಕ ಎಲಿಮೆಂಟ್‌ನಿಂದ ಅದರ ಮೌಲ್ಯವನ್ನು ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯಬೇಕೇ ಎಂಬುದನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ.trueಗೆ ಹೊಂದಿಸಿದರೆ, ಪ್ರಾಪರ್ಟಿಯು ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯುತ್ತದೆ.falseಗೆ ಹೊಂದಿಸಿದರೆ, ಪ್ರಾಪರ್ಟಿಯು ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯುವುದಿಲ್ಲ ಮತ್ತು ಎಲಿಮೆಂಟ್‌ನಲ್ಲಿ ಸ್ಪಷ್ಟವಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸದಿದ್ದರೆ ಅದರ ಆರಂಭಿಕ ಮೌಲ್ಯವನ್ನು ಬಳಸುತ್ತದೆ. ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯವುfalseಆಗಿದೆ.initial-value: ಇದು ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯ ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ. ಪ್ರಾಪರ್ಟಿಯನ್ನು ಎಲಿಮೆಂಟ್‌ನಲ್ಲಿ ಸ್ಪಷ್ಟವಾಗಿ ಹೊಂದಿಸದಿದ್ದರೆ, ಅದು ಈ ಮೌಲ್ಯವನ್ನು ಬಳಸುತ್ತದೆ. ಆರಂಭಿಕ ಮೌಲ್ಯವು ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಸಿಂಟ್ಯಾಕ್ಸ್‌ಗೆ ಅನುಗುಣವಾಗಿ ಮಾನ್ಯವಾದ ಮೌಲ್ಯವಾಗಿರಬೇಕು. ಯಾವುದೇ ಆರಂಭಿಕ ಮೌಲ್ಯವನ್ನು ಒದಗಿಸದಿದ್ದರೆ ಮತ್ತು ಬೇರೆ ಯಾವುದೇ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿಸದಿದ್ದರೆ, ಪ್ರಾಪರ್ಟಿಯು ಅದರ ಅನ್‌ಸೆಟ್ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿರುವಂತೆ ಪರಿಗಣಿಸಲಾಗುತ್ತದೆ.
ಕ್ರಿಯೆಯಲ್ಲಿ @property ಯ ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳು
ನಿಮ್ಮ CSS ಕೋಡ್‌ನಲ್ಲಿ @property ಅನ್ನು ಹೇಗೆ ಬಳಸುವುದು ಎಂಬುದರ ಕೆಲವು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳನ್ನು ನೋಡೋಣ.
ಉದಾಹರಣೆ 1: ಬಣ್ಣವನ್ನು ಅನಿಮೇಟ್ ಮಾಡುವುದು
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು --background-color ಎಂಬ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯನ್ನು ರಚಿಸುತ್ತೇವೆ ಮತ್ತು ಅದನ್ನು CSS ಪರಿವರ್ತನೆಗಳನ್ನು ಬಳಸಿ ಅನಿಮೇಟ್ ಮಾಡುತ್ತೇವೆ. ಬ್ರೌಸರ್ ಬಣ್ಣಗಳ ನಡುವೆ ಸರಿಯಾಗಿ ಇಂಟರ್‌ಪೋಲೇಟ್ ಮಾಡುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನಾವು ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು <color> ಎಂದು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತೇವೆ.
@property --background-color {
syntax: <color>;
inherits: false;
initial-value: #ffffff; /* White */
}
.box {
width: 200px;
height: 200px;
background-color: var(--background-color);
transition: --background-color 0.5s ease-in-out;
}
.box:hover {
--background-color: #007bff; /* Blue */
}
ಈ ಕೋಡ್‌ನಲ್ಲಿ:
- ನಾವು
--background-colorಎಂಬ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯನ್ನು<color>ಸಿಂಟ್ಯಾಕ್ಸ್‌ನೊಂದಿಗೆ ವ್ಯಾಖ್ಯಾನಿಸುತ್ತೇವೆ,inheritsಅನ್ನುfalseಗೆ ಹೊಂದಿಸುತ್ತೇವೆ ಮತ್ತುinitial-valueಅನ್ನು ಬಿಳಿ (#ffffff) ಗೆ ಹೊಂದಿಸುತ್ತೇವೆ. - ನಾವು
var(--background-color)ಬಳಸಿ ಈ ಪ್ರಾಪರ್ಟಿಯನ್ನು.boxಎಲಿಮೆಂಟ್‌ನbackground-colorಗೆ ಅನ್ವಯಿಸುತ್ತೇವೆ. - ನಾವು
--background-colorಪ್ರಾಪರ್ಟಿಗೆ ಒಂದು ಪರಿವರ್ತನೆಯನ್ನು ಸೇರಿಸುತ್ತೇವೆ ಇದರಿಂದ ಮೌಲ್ಯ ಬದಲಾದಾಗ ಅದು ಸುಗಮವಾಗಿ ಅನಿಮೇಟ್ ಆಗುತ್ತದೆ. - ನಾವು
--background-colorನ ಮೌಲ್ಯವನ್ನು ಹೋವರ್ ಮೇಲೆ ನೀಲಿ (#007bff) ಗೆ ಬದಲಾಯಿಸುತ್ತೇವೆ, ಇದರಿಂದ ಸುಗಮ ಬಣ್ಣ ಪರಿವರ್ತನೆಯ ಪರಿಣಾಮ ಉಂಟಾಗುತ್ತದೆ.
ಉದಾಹರಣೆ 2: ಸಂಖ್ಯೆಯನ್ನು ಅನಿಮೇಟ್ ಮಾಡುವುದು
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು --blur-radius ಎಂಬ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯನ್ನು ರಚಿಸುತ್ತೇವೆ ಮತ್ತು ಅದನ್ನು CSS ಪರಿವರ್ತನೆಗಳನ್ನು ಬಳಸಿ ಅನಿಮೇಟ್ ಮಾಡುತ್ತೇವೆ. ಬ್ರೌಸರ್ ಉದ್ದದ ಮೌಲ್ಯಗಳ ನಡುವೆ ಸರಿಯಾಗಿ ಇಂಟರ್‌ಪೋಲೇಟ್ ಮಾಡುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನಾವು ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು <length> ಎಂದು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತೇವೆ. ಈ ಉದಾಹರಣೆಯು ಉದ್ದಗಳನ್ನು ಬಳಸುವ ಜನಪ್ರಿಯ ಬಳಕೆಯ ಪ್ರಕರಣವನ್ನು ಸಹ ಪ್ರದರ್ಶಿಸುತ್ತದೆ: ಪಿಕ್ಸೆಲ್ ಮೌಲ್ಯಗಳು. ಇದನ್ನು ಇತರ ಯುನಿಟ್ ಪ್ರಕಾರಗಳಿಗೂ ಸುಲಭವಾಗಿ ಅನುವಾದಿಸಬಹುದು. ಆರಂಭಿಕ ಮೌಲ್ಯವನ್ನು `0px` ಗೆ ಹೊಂದಿಸುವುದು ನಿರ್ಣಾಯಕವಾಗಿದೆ ಎಂಬುದನ್ನು ಗಮನಿಸುವುದು ಸಹ ಮುಖ್ಯವಾಗಿದೆ, ಏಕೆಂದರೆ ಬ್ರೌಸರ್‌ಗೆ ಪರಿವರ್ತನೆಗಳನ್ನು ಸರಿಯಾಗಿ ನಿರ್ವಹಿಸಲು ಮೂಲ ಯುನಿಟ್ ಅಗತ್ಯವಿದೆ.
@property --blur-radius {
syntax: <length>;
inherits: false;
initial-value: 0px;
}
.image {
width: 300px;
height: 200px;
background-image: url("image.jpg");
filter: blur(var(--blur-radius));
transition: --blur-radius 0.3s ease-in-out;
}
.image:hover {
--blur-radius: 5px;
}
ಈ ಕೋಡ್‌ನಲ್ಲಿ:
- ನಾವು
--blur-radiusಎಂಬ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯನ್ನು<length>ಸಿಂಟ್ಯಾಕ್ಸ್‌ನೊಂದಿಗೆ ವ್ಯಾಖ್ಯಾನಿಸುತ್ತೇವೆ,inheritsಅನ್ನುfalseಗೆ ಹೊಂದಿಸುತ್ತೇವೆ ಮತ್ತುinitial-valueಅನ್ನು0pxಗೆ ಹೊಂದಿಸುತ್ತೇವೆ. - ನಾವು
var(--blur-radius)ಬಳಸಿ ಈ ಪ್ರಾಪರ್ಟಿಯನ್ನು.imageಎಲಿಮೆಂಟ್‌ನfilter: blur()ಫಂಕ್ಷನ್‌ಗೆ ಅನ್ವಯಿಸುತ್ತೇವೆ. - ನಾವು
--blur-radiusಪ್ರಾಪರ್ಟಿಗೆ ಒಂದು ಪರಿವರ್ತನೆಯನ್ನು ಸೇರಿಸುತ್ತೇವೆ ಇದರಿಂದ ಮೌಲ್ಯ ಬದಲಾದಾಗ ಅದು ಸುಗಮವಾಗಿ ಅನಿಮೇಟ್ ಆಗುತ್ತದೆ. - ನಾವು
--blur-radiusನ ಮೌಲ್ಯವನ್ನು ಹೋವರ್ ಮೇಲೆ5pxಗೆ ಬದಲಾಯಿಸುತ್ತೇವೆ, ಇದರಿಂದ ಸುಗಮ ಬ್ಲರ್ ಪರಿಣಾಮ ಉಂಟಾಗುತ್ತದೆ.
ಉದಾಹರಣೆ 3: ಆನುವಂಶಿಕ ಪ್ರಾಪರ್ಟಿಗಳೊಂದಿಗೆ ವಿಷಯಾಧಾರಿತ UI ಅನ್ನು ರಚಿಸುವುದು
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು ಆನುವಂಶಿಕ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಬಳಸಿ ಸರಳ ವಿಷಯಾಧಾರಿತ UI ಅನ್ನು ರಚಿಸುತ್ತೇವೆ. ನಾವು --theme-color ಎಂಬ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತೇವೆ ಮತ್ತು ಅದನ್ನು :root ಎಲಿಮೆಂಟ್‌ನಲ್ಲಿ ಹೊಂದಿಸುತ್ತೇವೆ. ಇದು ಎಲ್ಲಾ ಚೈಲ್ಡ್ ಎಲಿಮೆಂಟ್‌ಗಳಿಗೆ ಥೀಮ್ ಬಣ್ಣವನ್ನು ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯಲು ಅನುಮತಿಸುತ್ತದೆ.
@property --theme-color {
syntax: <color>;
inherits: true;
initial-value: #4caf50; /* Green */
}
:root {
--theme-color: #4caf50;
}
.button {
background-color: var(--theme-color);
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
.button:hover {
--theme-color: #388e3c; /* Darker Green */
}
ಈ ಕೋಡ್‌ನಲ್ಲಿ:
- ನಾವು
--theme-colorಎಂಬ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯನ್ನು<color>ಸಿಂಟ್ಯಾಕ್ಸ್‌ನೊಂದಿಗೆ ವ್ಯಾಖ್ಯಾನಿಸುತ್ತೇವೆ,inheritsಅನ್ನುtrueಗೆ ಹೊಂದಿಸುತ್ತೇವೆ ಮತ್ತುinitial-valueಅನ್ನು ಹಸಿರು (#4caf50) ಗೆ ಹೊಂದಿಸುತ್ತೇವೆ. - ನಾವು
--theme-colorನ ಮೌಲ್ಯವನ್ನು:rootಎಲಿಮೆಂಟ್‌ನಲ್ಲಿ ಹೊಂದಿಸುತ್ತೇವೆ, ಅದನ್ನು ಡಾಕ್ಯುಮೆಂಟ್‌ನಲ್ಲಿರುವ ಎಲ್ಲಾ ಎಲಿಮೆಂಟ್‌ಗಳಿಗೆ ಲಭ್ಯವಾಗುವಂತೆ ಮಾಡುತ್ತೇವೆ. - ನಾವು
.buttonಎಲಿಮೆಂಟ್‌ನbackground-colorಅನ್ನು ಹೊಂದಿಸಲು ಈ ಪ್ರಾಪರ್ಟಿಯನ್ನು ಬಳಸುತ್ತೇವೆ. - ನಾವು
--theme-colorನ ಮೌಲ್ಯವನ್ನು ಹೋವರ್ ಮೇಲೆ ಗಾಢ ಹಸಿರು (#388e3c) ಗೆ ಬದಲಾಯಿಸುತ್ತೇವೆ, UI ನ ಥೀಮ್ ಅನ್ನು ಬದಲಾಯಿಸಲು ಆನುವಂಶಿಕ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಹೇಗೆ ಸುಲಭವಾಗಿ ನವೀಕರಿಸಬಹುದು ಎಂಬುದನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತೇವೆ.
ಉದಾಹರಣೆ 4: ಕಸ್ಟಮ್ ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವುದು
syntax ಪ್ರಾಪರ್ಟಿಯು ಹೆಚ್ಚು ನಿರ್ದಿಷ್ಟವಾದ ಮಾದರಿಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಸ್ಟ್ರಿಂಗ್ ಅನ್ನು ಸಹ ಸ್ವೀಕರಿಸಬಹುದು, ಇದು ಹೆಚ್ಚು ಸಂಕೀರ್ಣವಾದ ಮೌಲ್ಯಗಳನ್ನು ಮೌಲ್ಯೀಕರಿಸಲು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ. ಸಿಂಟ್ಯಾಕ್ಸ್ MDN (Mozilla Developer Network) ನಲ್ಲಿ ದಾಖಲಿಸಲಾದ ರೆಗ್ಯುಲರ್ ಎಕ್ಸ್‌ಪ್ರೆಶನ್-ರೀತಿಯ ವ್ಯವಸ್ಥೆಯನ್ನು ಬಳಸುತ್ತದೆ. ಈ ಉದಾಹರಣೆಯು `top`, `bottom`, `left`, ಮತ್ತು `right` ಕೀವರ್ಡ್ ಆಯ್ಕೆಗಳನ್ನು ಮಾನ್ಯ ಮೌಲ್ಯಗಳಾಗಿ ಸ್ವೀಕರಿಸುವ ಹಿನ್ನೆಲೆ ಸ್ಥಾನಕ್ಕಾಗಿ ಕಸ್ಟಮ್ ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು ಹೇಗೆ ವ್ಯಾಖ್ಯಾನಿಸುವುದು ಮತ್ತು ಬಳಸುವುದು ಎಂಬುದನ್ನು ವಿವರಿಸುತ್ತದೆ.
@property --background-position {
syntax: "[ top | bottom | left | right ]{1,2}";
inherits: false;
initial-value: top left;
}
.container {
width: 300px;
height: 300px;
background-image: url('image.jpg');
background-position: var(--background-position);
}
/* Valid positions */
.container.top-right {
--background-position: top right;
}
.container.bottom-left {
--background-position: bottom left;
}
/* Invalid position (will fallback to initial-value) */
.container.invalid {
--background-position: center;
}
ಇಲ್ಲಿ, `syntax` ಅನ್ನು ಮಾನ್ಯ ಕೀವರ್ಡ್‌ಗಳ ಸ್ಟ್ರಿಂಗ್ ಪ್ರಾತಿನಿಧ್ಯವನ್ನು ಬಳಸಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಲಾಗಿದೆ. `[ ]` ಸಂಕೇತವು ಆಯ್ಕೆಗಳ ಗುಂಪನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ, `|` ಚಿಹ್ನೆಯು ಅವುಗಳನ್ನು ಪ್ರತ್ಯೇಕಿಸುತ್ತದೆ, ಮತ್ತು `{1,2}` ಅನುಮತಿಸಲಾದ ಮೌಲ್ಯಗಳ ಸಂಖ್ಯೆಯನ್ನು ಒಂದು ಅಥವಾ ಎರಡು ಕೀವರ್ಡ್‌ಗಳಿಗೆ ಸೀಮಿತಗೊಳಿಸುತ್ತದೆ. `center` ನಂತಹ ಅಮಾನ್ಯ ಮೌಲ್ಯವನ್ನು ಬಳಸಿದರೆ, ಬ್ರೌಸರ್ `top left` ನ `initial-value` ಗೆ ಹಿಂತಿರುಗುತ್ತದೆ.
ಬ್ರೌಸರ್ ಬೆಂಬಲ
@property ಗೆ ಬ್ರೌಸರ್ ಬೆಂಬಲವು ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಸಾಮಾನ್ಯವಾಗಿ ಉತ್ತಮವಾಗಿದೆ, ಅವುಗಳೆಂದರೆ:
- Chrome (ಆವೃತ್ತಿ 64 ಮತ್ತು ಮೇಲ್ಪಟ್ಟು)
- Edge (ಆವೃತ್ತಿ 79 ಮತ್ತು ಮೇಲ್ಪಟ್ಟು - Chromium ಆಧಾರಿತ)
- Firefox (ಆವೃತ್ತಿ 72 ಮತ್ತು ಮೇಲ್ಪಟ್ಟು)
- Safari (ಆವೃತ್ತಿ 14.1 ಮತ್ತು ಮೇಲ್ಪಟ್ಟು)
ಆದಾಗ್ಯೂ, ನೀವು ಬಳಸುತ್ತಿರುವ ವೈಶಿಷ್ಟ್ಯಗಳು ನಿಮ್ಮ ಬಳಕೆದಾರರು ಬಳಸುವ ಸಾಧ್ಯತೆಯಿರುವ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಬೆಂಬಲಿತವಾಗಿವೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು Can I use... ನಂತಹ ವೆಬ್‌ಸೈಟ್‌ಗಳಲ್ಲಿ ಇತ್ತೀಚಿನ ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆಯ ಕೋಷ್ಟಕಗಳನ್ನು ಪರಿಶೀಲಿಸುವುದು ಯಾವಾಗಲೂ ಒಳ್ಳೆಯದು.
@property ಅನ್ನು ಬೆಂಬಲಿಸದ ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಿಗಾಗಿ, ಬ್ರೌಸರ್ @property ನಿಯಮವನ್ನು ನಿರ್ಲಕ್ಷಿಸುತ್ತದೆ ಮತ್ತು ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯನ್ನು ಸಾಮಾನ್ಯ CSS ವೇರಿಯೇಬಲ್ ಆಗಿ ಪರಿಗಣಿಸುತ್ತದೆ. ಇದರರ್ಥ ಅನಿಮೇಷನ್‌ಗಳು ಮತ್ತು ಪರಿವರ್ತನೆಗಳು ನಿರೀಕ್ಷೆಯಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸದಿರಬಹುದು, ಆದರೆ ಕೋಡ್ ಇನ್ನೂ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.
@property ಬಳಸಲು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು
@property ಬಳಸುವಾಗ ನೆನಪಿನಲ್ಲಿಡಬೇಕಾದ ಕೆಲವು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು ಇಲ್ಲಿವೆ:
- ಯಾವಾಗಲೂ ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿ: ಟೈಪ್ ಸುರಕ್ಷತೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಮತ್ತು ಸುಗಮ ಅನಿಮೇಷನ್‌ಗಳು ಮತ್ತು ಪರಿವರ್ತನೆಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು ನಿಮ್ಮ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳ
syntaxಅನ್ನು ಯಾವಾಗಲೂ ವ್ಯಾಖ್ಯಾನಿಸಲು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. - ಆರಂಭಿಕ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿಸಿ: ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯವನ್ನು ಒದಗಿಸಲು ಮತ್ತು ಅನಿರೀಕ್ಷಿತ ದೃಶ್ಯ ದೋಷಗಳನ್ನು ತಡೆಯಲು
initial-valueಅನ್ನು ಒದಗಿಸಿ. - ವಿವರಣಾತ್ಮಕ ಹೆಸರುಗಳನ್ನು ಬಳಸಿ: ನಿಮ್ಮ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳಿಗೆ ಅವುಗಳ ಉದ್ದೇಶ ಮತ್ತು ಡೇಟಾ ಪ್ರಕಾರವನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ಸೂಚಿಸುವ ವಿವರಣಾತ್ಮಕ ಹೆಸರುಗಳನ್ನು ಆರಿಸಿ. ಉದಾಹರಣೆಗೆ,
--colorಬದಲಿಗೆ--button-background-colorಬಳಸಿ. - ಆನುವಂಶಿಕತೆಯನ್ನು ಪರಿಗಣಿಸಿ: ನಿಮ್ಮ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳು ತಮ್ಮ ಪೋಷಕ ಎಲಿಮೆಂಟ್‌ಗಳಿಂದ ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯಬೇಕೇ ಅಥವಾ ಬೇಡವೇ ಎಂಬುದನ್ನು ನಿರ್ಧರಿಸಿ. ಥೀಮ್ ಬಣ್ಣಗಳು ಅಥವಾ ಫಾಂಟ್ ಗಾತ್ರಗಳಂತಹ UI ಉದ್ದಕ್ಕೂ ಹಂಚಿಕೊಳ್ಳಬೇಕಾದ ಪ್ರಾಪರ್ಟಿಗಳಿಗಾಗಿ
inherits: trueಬಳಸಿ. - ಸಂಪೂರ್ಣವಾಗಿ ಪರೀಕ್ಷಿಸಿ: ನಿಮ್ಮ ಕೋಡ್ ನಿರೀಕ್ಷೆಯಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ವಿವಿಧ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಪರೀಕ್ಷಿಸಿ.
@propertyಅನ್ನು ಬೆಂಬಲಿಸದ ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಿಗಾಗಿ ಫಾಲ್‌ಬ್ಯಾಕ್ ಕಾರ್ಯವಿಧಾನಗಳನ್ನು ಬಳಸಿ. - ನಿಮ್ಮ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ದಾಖಲಿಸಿ: ನಿಮ್ಮ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳ ಉದ್ದೇಶ ಮತ್ತು ಬಳಕೆಯನ್ನು ವಿವರಿಸಲು ನಿಮ್ಮ CSS ಕೋಡ್‌ಗೆ ಕಾಮೆಂಟ್‌ಗಳನ್ನು ಸೇರಿಸಿ. ಇದು ಇತರ ಡೆವಲಪರ್‌ಗಳಿಗೆ (ಮತ್ತು ನಿಮ್ಮ ಭವಿಷ್ಯದ ನಿಮಗೆ) ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಸುಲಭವಾಗಿಸುತ್ತದೆ. Stylelint ನಂತಹ ಪರಿಕರಗಳನ್ನು ಸಹ ಈ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಜಾರಿಗೊಳಿಸಲು ಕಾನ್ಫಿಗರ್ ಮಾಡಬಹುದು.
@property ಮತ್ತು CSS ಹೌಡಿನಿ
ಹಿಂದೆ ಹೇಳಿದಂತೆ, @property CSS ಹೌಡಿನಿ ಕುಟುಂಬದ API ಗಳ ಒಂದು ಭಾಗವಾಗಿದೆ. CSS ಹೌಡಿನಿ ಎಂಬುದು CSS ಇಂಜಿನ್‌ನ ಆಂತರಿಕ ಕಾರ್ಯಗಳನ್ನು ಡೆವಲಪರ್‌ಗಳಿಗೆ ಬಹಿರಂಗಪಡಿಸುವ ಕಡಿಮೆ-ಮಟ್ಟದ API ಗಳ ಸಂಗ್ರಹವಾಗಿದೆ, ಇದು ಕಸ್ಟಮ್ ವೈಶಿಷ್ಟ್ಯಗಳು ಮತ್ತು ನಡವಳಿಕೆಗಳೊಂದಿಗೆ CSS ಅನ್ನು ವಿಸ್ತರಿಸಲು ಅವರಿಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.
ಇತರ ಹೌಡಿನಿ API ಗಳು ಸೇರಿವೆ:
- Paint API: ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ ಕಸ್ಟಮ್ ಹಿನ್ನೆಲೆ ಚಿತ್ರಗಳು, ಬಾರ್ಡರ್‌ಗಳು ಮತ್ತು ಮಾಸ್ಕ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
- Animation Worklet API: ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ ಉನ್ನತ-ಕಾರ್ಯಕ್ಷಮತೆಯ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ರಚಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
- Layout API: ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್‌ಗಳು ಅಥವಾ ಮೇಸನ್ರಿ ಲೇಔಟ್‌ಗಳಂತಹ ಎಲಿಮೆಂಟ್‌ಗಳಿಗಾಗಿ ಕಸ್ಟಮ್ ಲೇಔಟ್ ಅಲ್ಗಾರಿದಮ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
- Parser API: ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ CSS ಕೋಡ್ ಅನ್ನು ಪಾರ್ಸ್ ಮಾಡಲು ಮತ್ತು ಮ್ಯಾನಿಪುಲೇಟ್ ಮಾಡಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
@property ಅನ್ನು ಇತರ ಹೌಡಿನಿ API ಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸುವ ಮೂಲಕ, ನೀವು ನಿಜವಾಗಿಯೂ ಶಕ್ತಿಯುತ ಮತ್ತು ಗ್ರಾಹಕೀಯಗೊಳಿಸಬಹುದಾದ CSS ಪರಿಹಾರಗಳನ್ನು ರಚಿಸಬಹುದು.
ತೀರ್ಮಾನ
@property ನಿಯಮವು CSS ಗೆ ಒಂದು ಶಕ್ತಿಯುತ ಸೇರ್ಪಡೆಯಾಗಿದ್ದು, ಇದು ನಿಮಗೆ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿ ಪ್ರಕಾರಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ, ಸುಧಾರಿತ ಸ್ಟೈಲಿಂಗ್, ಅನಿಮೇಷನ್‌ಗಳು ಮತ್ತು ಪರಿವರ್ತನೆಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ. @property ಅನ್ನು ಬಳಸುವ ಮೂಲಕ, ನಿಮ್ಮ CSS ಕೋಡ್‌ನ ಟೈಪ್ ಸುರಕ್ಷತೆ, ಓದುವಿಕೆ, ನಿರ್ವಹಣೆ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ನೀವು ಸುಧಾರಿಸಬಹುದು.
ಬ್ರೌಸರ್ ಬೆಂಬಲವು ಸಾಮಾನ್ಯವಾಗಿ ಉತ್ತಮವಾಗಿದ್ದರೂ, ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ವಿವಿಧ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಪರೀಕ್ಷಿಸುವುದು ಮತ್ತು @property ಅನ್ನು ಬೆಂಬಲಿಸದ ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಿಗೆ ಫಾಲ್‌ಬ್ಯಾಕ್ ಕಾರ್ಯವಿಧಾನಗಳನ್ನು ಒದಗಿಸುವುದು ಮುಖ್ಯವಾಗಿದೆ.
ಈ ಲೇಖನದಲ್ಲಿ ವಿವರಿಸಿರುವ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸುವ ಮೂಲಕ, ನೀವು ನಿಜವಾಗಿಯೂ ಅದ್ಭುತವಾದ ವೆಬ್ ಅನುಭವಗಳನ್ನು ರಚಿಸಲು @property ಯ ಶಕ್ತಿಯನ್ನು ಬಳಸಿಕೊಳ್ಳಬಹುದು.