CSS @property: ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿ ಮಾದರಿ ವ್ಯಾಖ್ಯಾನ ಮತ್ತು ಮೌಲ್ಯಮಾಪನದಲ್ಲಿ ಪ್ರಾವೀಣ್ಯತೆ

ವೆಬ್ ಡೆವಲಪ್‌ಮೆಂಟ್‌ನ ನಿರಂತರವಾಗಿ ವಿಕಸಿಸುತ್ತಿರುವ ಕ್ಷೇತ್ರದಲ್ಲಿ, ದಕ್ಷತೆ, ನಿರ್ವಹಣೆ ಮತ್ತು ಒಟ್ಟಾರೆ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಹೆಚ್ಚಿಸುವ ಹೊಸ ತಂತ್ರಜ್ಞಾನಗಳು ಮತ್ತು ತಂತ್ರಗಳನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವುದು ಅತ್ಯಗತ್ಯ. CSS ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳು, CSS ವೇರಿಯಬಲ್‌ಗಳು ಎಂದೂ ಕರೆಯಲ್ಪಡುತ್ತವೆ, ನಾವು ಸ್ಟೈಲ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸುವ ಮತ್ತು ನಿಯಂತ್ರಿಸುವ ವಿಧಾನದಲ್ಲಿ ಕ್ರಾಂತಿಯನ್ನುಂಟುಮಾಡಿವೆ. @property ನಿಯಮದ ಪರಿಚಯದೊಂದಿಗೆ, CSS ಇನ್ನಷ್ಟು ಶಕ್ತಿಶಾಲಿ ಸಾಧನವನ್ನು ಪಡೆಯುತ್ತದೆ: ಈ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವ ಮತ್ತು ಮೌಲ್ಯೀಕರಿಸುವ ಸಾಮರ್ಥ್ಯ, ಇದು ಹೆಚ್ಚು ದೃಢವಾದ ಮತ್ತು ನಿರೀಕ್ಷಿತ ಸ್ಟೈಲಿಂಗ್‌ಗೆ ಕಾರಣವಾಗುತ್ತದೆ.

CSS @property ಎಂದರೇನು?

@property ನಿಯಮವು ಡೆವಲಪರ್‌ಗಳಿಗೆ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳ ಪ್ರಕಾರ, ಸಿಂಟ್ಯಾಕ್ಸ್ ಮತ್ತು ಇತರ ಗುಣಲಕ್ಷಣಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಅನುಮತಿಸುತ್ತದೆ. ಇದನ್ನು ನಿಮ್ಮ CSS ವೇರಿಯಬಲ್‌ಗಳಿಗೆ ರಚನೆ ಮತ್ತು ಮೌಲ್ಯಮಾಪನವನ್ನು ಒದಗಿಸುವ ಒಂದು ಮಾರ್ಗವೆಂದು ಯೋಚಿಸಿ. @property ಬರುವ ಮೊದಲು, CSS ವೇರಿಯಬಲ್‌ಗಳು ಕೇವಲ ಪಠ್ಯದ ಸ್ಟ್ರಿಂಗ್‌ಗಳಾಗಿದ್ದವು ಮತ್ತು ಯಾವುದನ್ನಾದರೂ ಹಿಡಿದಿಟ್ಟುಕೊಳ್ಳಬಹುದಿತ್ತು. ಈ ರಚನೆಯ ಕೊರತೆಯು ದೋಷಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು, ಡೀಬಗ್ ಮಾಡುವುದನ್ನು ಹೆಚ್ಚು ಸವಾಲಾಗಿಸುತ್ತದೆ ಮತ್ತು ಒಟ್ಟಾರೆ ವಿನ್ಯಾಸದ ಸ್ಥಿರತೆಗೆ ಅಡ್ಡಿಯಾಗಬಹುದು. @property ನಿಮ್ಮ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳಿಗೆ ನಿಯೋಜಿಸಬಹುದಾದ ಮೌಲ್ಯಗಳ ಪ್ರಕಾರಗಳನ್ನು ನಿಯಂತ್ರಿಸುವ ಮೂಲಕ ಈ ಸಮಸ್ಯೆಗಳನ್ನು ಪರಿಹರಿಸುತ್ತದೆ.

CSS @property ಅನ್ನು ಏಕೆ ಬಳಸಬೇಕು? ಪ್ರಯೋಜನಗಳು ಮತ್ತು ಅನುಕೂಲಗಳು

@property ಬಳಸುವುದರಿಂದಾಗುವ ಅನುಕೂಲಗಳು ಹಲವಾರು ಮತ್ತು ಸುಧಾರಿತ ವೆಬ್ ಡೆವಲಪ್‌ಮೆಂಟ್ ಅಭ್ಯಾಸಗಳಿಗೆ ನೇರವಾಗಿ ಕೊಡುಗೆ ನೀಡುತ್ತವೆ:

• ಸುಧಾರಿತ ಕೋಡ್ ನಿರ್ವಹಣೆ: ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳ ಪ್ರಕಾರಗಳು ಮತ್ತು ನಡವಳಿಕೆಗಳನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸುವ ಮೂಲಕ, ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ನೀವು ಹೆಚ್ಚು ಸ್ವಯಂ-ದಾಖಲಿತ ಮತ್ತು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಸುಲಭವಾಗಿಸುತ್ತೀರಿ. ಇತರ ಡೆವಲಪರ್‌ಗಳು (ಅಥವಾ ನಿಮ್ಮ ಭವಿಷ್ಯದ ನೀವು) ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯನ್ನು ಹೇಗೆ ಬಳಸಬೇಕೆಂದು ಬೇಗನೆ ಗ್ರಹಿಸುತ್ತಾರೆ.
• ಸುಧಾರಿತ ವಿನ್ಯಾಸ ಸ್ಥಿರತೆ: ಮೌಲ್ಯಮಾಪನವು ಮಾನ್ಯ ಮೌಲ್ಯಗಳನ್ನು ಮಾತ್ರ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳಿಗೆ ನಿಯೋಜಿಸಲಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಇದು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಅಥವಾ ಅಪ್ಲಿಕೇಶನ್‌ನಾದ್ಯಂತ ಸ್ಥಿರವಾದ ದೃಶ್ಯ ನೋಟವನ್ನು ಕಾಪಾಡಿಕೊಳ್ಳಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
• ದೃಢತೆ ಮತ್ತು ದೋಷ ತಡೆಗಟ್ಟುವಿಕೆ: ಅಮಾನ್ಯ ಮೌಲ್ಯಗಳನ್ನು ತಿರಸ್ಕರಿಸಲಾಗುತ್ತದೆ, ಇದು ಅನಿರೀಕ್ಷಿತ ಸ್ಟೈಲಿಂಗ್ ಸಮಸ್ಯೆಗಳನ್ನು ತಡೆಯುತ್ತದೆ ಮತ್ತು ಡೀಬಗ್ ಮಾಡಲು ಕಳೆಯುವ ಸಮಯವನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ.
• ಡೈನಾಮಿಕ್ ಸ್ಟೈಲಿಂಗ್: @property ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನೊಂದಿಗೆ ಉತ್ತಮ ಏಕೀಕರಣವನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ, ನಿಮ್ಮ CSS ವೇರಿಯಬಲ್‌ಗಳನ್ನು ಪ್ರೋಗ್ರಾಮಿಕ್ ಆಗಿ ನಿಯಂತ್ರಿಸಲು ಮತ್ತು ನವೀಕರಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ, ಮೌಲ್ಯಗಳು ಮಾನ್ಯವಾಗಿವೆ ಎಂದು ತಿಳಿದು ಆತ್ಮವಿಶ್ವಾಸದಿಂದ ಕೆಲಸ ಮಾಡಬಹುದು.
• ಉತ್ತಮ ಆಟೋಕಂಪ್ಲೀಷನ್ ಮತ್ತು ಡೆವಲಪರ್ ಅನುಭವ: ಕೋಡ್ ಎಡಿಟರ್‌ಗಳು ಹೆಚ್ಚು ಬುದ್ಧಿವಂತ ಸ್ವಯಂ-ಪೂರ್ಣಗೊಳಿಸುವಿಕೆ ಮತ್ತು ಕೋಡ್ ಸುಳಿವುಗಳನ್ನು ಒದಗಿಸಬಹುದು, ಇದು ಡೆವಲಪರ್‌ಗಳಿಗೆ CSS ಅನ್ನು ವೇಗವಾಗಿ ಮತ್ತು ನಿಖರವಾಗಿ ಬರೆಯಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
• ಆಪ್ಟಿಮೈಸ್ಡ್ ಕಾರ್ಯಕ್ಷಮತೆ: ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ಪರಿಣಾಮ ಸಾಮಾನ್ಯವಾಗಿ ಚಿಕ್ಕದಾಗಿದ್ದರೂ, ಮೌಲ್ಯಮಾಪನವು ಕೆಲವೊಮ್ಮೆ ಬ್ರೌಸರ್‌ನಿಂದ ಸಣ್ಣ ಆಪ್ಟಿಮೈಸೇಶನ್‌ಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು.

@property ನಿಯಮದ ಪ್ರಮುಖ ಅಂಶಗಳು

@property ನಿಯಮವು ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿ ಹೇಗೆ ವರ್ತಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವ ಹಲವಾರು ಪ್ರಮುಖ ಅಂಶಗಳನ್ನು ಒಳಗೊಂಡಿದೆ.

--property-name

ಇದು ನೀವು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತಿರುವ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯ ಹೆಸರು. ಇದು CSS ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳಿಗೆ ಪ್ರಮಾಣಿತವಾಗಿರುವಂತೆ, ಎರಡು ಹೈಫನ್‌ಗಳೊಂದಿಗೆ (--) ಪ್ರಾರಂಭವಾಗಬೇಕು.

            @property --my-color { ... }
            

              
                Copy
              
            
          

syntax

syntax ಡಿಸ್ಕ್ರಿಪ್ಟರ್ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯ ಮೌಲ್ಯಗಳಿಗೆ ಅನುಮತಿಸಲಾದ ಪ್ರಕಾರ ಅಥವಾ ಮಾದರಿಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. ಇದು CSS ಸಿಂಟ್ಯಾಕ್ಸ್‌ನ ಉಪವಿಭಾಗವನ್ನು ಬಳಸುತ್ತದೆ ಮತ್ತು ವಿವಿಧ ಮೌಲ್ಯಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳಬಹುದು, ಅವುಗಳೆಂದರೆ:

• <color>: ಬಣ್ಣದ ಮೌಲ್ಯವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ (ಉದಾ., red, #FF0000, rgba(255, 0, 0, 1)).
• <length>: ಉದ್ದದ ಮೌಲ್ಯವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ (ಉದಾ., 10px, 5em, 20%).
• <number>: ಸಂಖ್ಯಾತ್ಮಕ ಮೌಲ್ಯವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ (ಉದಾ., 10, 3.14).
• <percentage>: ಶೇಕಡಾವಾರು ಮೌಲ್ಯವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ (ಉದಾ., 50%).
• <url>: URL ಅನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ (ಉದಾ., url('image.jpg')).
• <integer>: ಪೂರ್ಣಾಂಕ ಮೌಲ್ಯವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ (ಉದಾ., 10, -5).
• <angle>: ಕೋನದ ಮೌಲ್ಯವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ (ಉದಾ., 45deg, 0.5turn).
• <time>: ಸಮಯದ ಮೌಲ್ಯವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ (ಉದಾ., 2s, 200ms).
• <string>: ಸ್ಟ್ರಿಂಗ್ ಮೌಲ್ಯವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ.
• <image>: ಚಿತ್ರದ ಮೌಲ್ಯವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ (url ನಂತೆಯೇ).
• *: ಯಾವುದೇ ಮಾನ್ಯವಾದ CSS ಮೌಲ್ಯವನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ. ಇದು ಬಹಳ ಅನುಮತಿಸುವ ವಿಧಾನವಾಗಿದೆ ಮತ್ತು ಎಚ್ಚರಿಕೆಯಿಂದ ಬಳಸಬೇಕು.
• ಸಂಯೋಜಿತ ಪ್ರಕಾರಗಳು: ನೀವು ಸ್ಪೇಸ್-ಬೇರ್ಪಡಿಸಿದ ಪಟ್ಟಿಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಬಹು ಪ್ರಕಾರಗಳನ್ನು ಸಂಯೋಜಿಸಬಹುದು (ಉದಾ., ಮೂರು ಉದ್ದದ ಮೌಲ್ಯಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು <length> <length> <length>) ಅಥವಾ ಪಟ್ಟಿ ಮಾಡಲಾದ ಪ್ರಕಾರಗಳಲ್ಲಿ ಯಾವುದಾದರೂ ಒಂದನ್ನು ಅನುಮತಿಸಲು '|' ಚಿಹ್ನೆಯನ್ನು ಬಳಸಿ (ಉದಾ., ಉದ್ದ ಅಥವಾ ಶೇಕಡಾವಾರು ಎರಡನ್ನೂ ಬೆಂಬಲಿಸಲು <length> | <percentage>).
• ಕಸ್ಟಮ್ ಸಿಂಟ್ಯಾಕ್ಸ್‌ಗಳು: ಹೆಚ್ಚು ಸಂಕೀರ್ಣ ಸನ್ನಿವೇಶಗಳಿಗಾಗಿ ಕಸ್ಟಮ್ ಸಿಂಟ್ಯಾಕ್ಸ್‌ಗಳನ್ನು, ಸಾಮಾನ್ಯವಾಗಿ ಕಸ್ಟಮ್ ಇಂಪ್ಲಿಮೆಂಟೇಶನ್‌ಗಳಿಂದ ಬೆಂಬಲಿಸಲಾಗುತ್ತದೆ, ಆದರೂ ಇವುಗಳನ್ನು ಸಾಮಾನ್ಯವಾಗಿ [a-z]+ ನಂತಹ ರೆಜೆಕ್ಸ್-ಶೈಲಿಯ ಸಿಂಟ್ಯಾಕ್ಸ್ ಬಳಸಿ ವಿವರಿಸಲಾಗುತ್ತದೆ.

            
@property --base-color {
  syntax: <color>;
  inherits: false;
  initial-value: #333;
}

            

              
                Copy
              
            
          

inherits

inherits ಡಿಸ್ಕ್ರಿಪ್ಟರ್ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿ ಅದರ ಪೋಷಕ ಅಂಶದಿಂದ ಅದರ ಮೌಲ್ಯವನ್ನು ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯುತ್ತದೆಯೇ ಎಂಬುದನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ. ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ, ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳು ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯುವುದಿಲ್ಲ. ಈ ನಡವಳಿಕೆಯನ್ನು ಬೂಲಿಯನ್ ಮೌಲ್ಯದೊಂದಿಗೆ ನಿಯಂತ್ರಿಸಬಹುದು: true ಅಥವಾ false.

            
@property --font-size {
  syntax: <length>;
  inherits: true;
  initial-value: 16px;
}

            

              
                Copy
              
            
          

initial-value

initial-value ಡಿಸ್ಕ್ರಿಪ್ಟರ್, CSS ನಲ್ಲಿ ಸ್ಪಷ್ಟವಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸದಿದ್ದರೆ, ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯ ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿಸುತ್ತದೆ. ಇದು ಪ್ರಾಪರ್ಟಿಯನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸದಿದ್ದಾಗ ಫಾಲ್‌ಬ್ಯಾಕ್ ಮೌಲ್ಯವನ್ನು ಒದಗಿಸುತ್ತದೆ, ಇದು ಪ್ರಮಾಣಿತ CSS ಪ್ರಾಪರ್ಟಿಗಳ ನಡವಳಿಕೆಯನ್ನು ಹೋಲುತ್ತದೆ.

            
@property --border-width {
  syntax: <length>;
  inherits: false;
  initial-value: 1px;
}

            

              
                Copy
              
            
          

ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳು

@property ಅನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಹೇಗೆ ಬಳಸುವುದು ಎಂಬುದನ್ನು ವಿವರಿಸಲು ಕೆಲವು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳನ್ನು ನೋಡೋಣ.

ಉದಾಹರಣೆ 1: ಬಣ್ಣದ ಪ್ರಾಪರ್ಟಿಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವುದು

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಮ್ಮ ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಯಲ್ಲಿ ಪ್ರಾಥಮಿಕ ಬಣ್ಣವನ್ನು ಪ್ರತಿನಿಧಿಸಲು ನಾವು --primary-color ಎಂಬ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತೇವೆ. ಇದು ಕೇವಲ ಬಣ್ಣದ ಮೌಲ್ಯಗಳನ್ನು ಮಾತ್ರ ಸ್ವೀಕರಿಸುತ್ತದೆ ಎಂದು ನಾವು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತೇವೆ.

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

body {
  --primary-color: #007bff; /* Valid */
  color: var(--primary-color);
}

h1 {
  --primary-color: rgb(255, 0, 0); /* Valid */
  color: var(--primary-color);
}

            

              
                Copy
              
            
          

ಉದಾಹರಣೆ 2: ಉದ್ದದ ಪ್ರಾಪರ್ಟಿಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವುದು

ಇಲ್ಲಿ, ನಾವು ಅಂಶಗಳ ನಡುವಿನ ಅಂತರವನ್ನು ನಿರ್ವಹಿಸಲು --spacing ಎಂಬ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತೇವೆ, ಇದು ಉದ್ದದ ಮೌಲ್ಯಗಳನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ. ಈ ಉದಾಹರಣೆಯು ಇಡೀ ಸೈಟ್‌ಗೆ ಡೀಫಾಲ್ಟ್ ಆಗಿ `initial-value` ಅನ್ನು ಹೊಂದಿಸುವುದರ ಮೌಲ್ಯವನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ಪ್ರದರ್ಶಿಸುತ್ತದೆ. ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಯನ್ನು ಬಳಸುವಾಗ ಇದು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ, ಇದರಲ್ಲಿ ಅಂತರದ ಡೀಫಾಲ್ಟ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲಾಗಿದೆ.

            
@property --spacing {
  syntax: <length>;
  inherits: false;
  initial-value: 1rem;
}

p {
  margin-bottom: var(--spacing);
}

            

              
                Copy
              
            
          

ಉದಾಹರಣೆ 3: ಪೂರ್ಣಾಂಕದ ಪ್ರಾಪರ್ಟಿಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವುದು

ಈ ಉದಾಹರಣೆಯು ಗ್ರಿಡ್ ಲೇಔಟ್‌ನಲ್ಲಿ ಕಾಲಮ್‌ಗಳ ಸಂಖ್ಯೆಗಾಗಿ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ, ಮೌಲ್ಯವು ಪೂರ್ಣಾಂಕವಾಗಿದೆ ಎಂದು ಮೌಲ್ಯೀಕರಿಸುತ್ತದೆ.

            
@property --grid-columns {
  syntax: <integer>;
  inherits: false;
  initial-value: 3;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
}

            

              
                Copy
              
            
          

ಉದಾಹರಣೆ 4: ಪ್ರಾಪರ್ಟಿ ಆನುವಂಶಿಕತೆ

ಇಲ್ಲಿ ನಾವು ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯುವ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತೇವೆ. body ಮೇಲೆ `1rem` ಗೆ ಹೊಂದಿಸಲಾದ `font-size` ಪ್ರಾಪರ್ಟಿಯು ಅತಿಕ್ರಮಿಸದ ಹೊರತು ಅದರ ಎಲ್ಲಾ ಚೈಲ್ಡ್ ಅಂಶಗಳ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುತ್ತದೆ.

            
@property --font-size {
  syntax: <length>;
  inherits: true;
  initial-value: 1rem;
}

body {
  --font-size: 1rem;
  font-size: var(--font-size);
}

h2 {
  font-size: 1.25rem; /* Overrides inherited value */
}

            

              
                Copy
              
            
          

ಉದಾಹರಣೆ 5: ಪ್ರಕಾರಗಳನ್ನು ಸಂಯೋಜಿಸುವುದು

'|' ಆಪರೇಟರ್ ಬಳಸಿ, ನಾವು ಪ್ರಕಾರಗಳನ್ನು ಸಂಯೋಜಿಸಬಹುದು. ಇಲ್ಲಿ ನಾವು ನೆರಳಿನ ಆಫ್‌ಸೆಟ್‌ಗಾಗಿ `length` ಅಥವಾ `percentage` ಅನ್ನು ಸ್ವೀಕರಿಸುತ್ತೇವೆ.

            
@property --shadow-offset {
  syntax: <length> | <percentage>;
  inherits: false;
  initial-value: 0;
}

.box {
  box-shadow: 0 var(--shadow-offset) var(--shadow-offset) gray;
}

            

              
                Copy
              
            
          

@property ಬಳಸಲು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

@property ನ ಪ್ರಯೋಜನಗಳನ್ನು ಗರಿಷ್ಠಗೊಳಿಸಲು, ಈ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸಿ:

• ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಕೇಂದ್ರ ಸ್ಥಳದಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸಿ: ನಿಮ್ಮ @property ವ್ಯಾಖ್ಯಾನಗಳನ್ನು ಮೀಸಲಾದ CSS ಫೈಲ್ ಅಥವಾ ವಿಭಾಗದಲ್ಲಿ ಗುಂಪು ಮಾಡಿ, ಸಾಮಾನ್ಯವಾಗಿ ನಿಮ್ಮ ಮುಖ್ಯ ಸ್ಟೈಲ್‌ಶೀಟ್‌ನ ಮೇಲ್ಭಾಗದಲ್ಲಿ ಅಥವಾ ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಯ ಫೈಲ್‌ನಲ್ಲಿ. ಇದು ಸಂಘಟನೆಯನ್ನು ಉತ್ತೇಜಿಸುತ್ತದೆ ಮತ್ತು ನಿಮ್ಮ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಸುಲಭವಾಗಿಸುತ್ತದೆ.
• ವಿವರಣಾತ್ಮಕ ಪ್ರಾಪರ್ಟಿ ಹೆಸರುಗಳನ್ನು ಬಳಸಿ: ಪ್ರತಿ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯ ಉದ್ದೇಶವನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ಸೂಚಿಸುವ ಹೆಸರುಗಳನ್ನು ಆಯ್ಕೆಮಾಡಿ (ಉದಾ., --primary-button-color, --header-font-size). ಇದು ಓದುವಿಕೆಯನ್ನು ಮತ್ತು ತಿಳುವಳಿಕೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ.
• ಸಮಗ್ರ ದಸ್ತಾವೇಜನ್ನು ಒದಗಿಸಿ: ನಿಮ್ಮ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಅವುಗಳ ಸಿಂಟ್ಯಾಕ್ಸ್, ಬಳಕೆ ಮತ್ತು ಯಾವುದೇ ನಿರ್ಬಂಧಗಳನ್ನು ಒಳಗೊಂಡಂತೆ ದಾಖಲಿಸಿ. ಈ ದಸ್ತಾವೇಜನ್ನು ನಿಮ್ಮ CSS ಜೊತೆಗೆ ಕಾಮೆಂಟ್‌ಗಳ ರೂಪದಲ್ಲಿ ಅಥವಾ ಪ್ರತ್ಯೇಕ ಸ್ಟೈಲ್ ಗೈಡ್‌ನಲ್ಲಿ ಸೇರಿಸಬಹುದು.
• ಸರಿಯಾದ ಸಿಂಟ್ಯಾಕ್ಸ್ ಆಯ್ಕೆಮಾಡಿ: ಪ್ರತಿ ಪ್ರಾಪರ್ಟಿಗಾಗಿ ಸೂಕ್ತವಾದ syntax ಅನ್ನು ಎಚ್ಚರಿಕೆಯಿಂದ ಆಯ್ಕೆಮಾಡಿ. ಸರಿಯಾದ ಸಿಂಟ್ಯಾಕ್ಸ್ ಬಳಸುವುದರಿಂದ ದೋಷಗಳನ್ನು ತಡೆಯುತ್ತದೆ ಮತ್ತು ನಿಯೋಜಿಸಲಾದ ಮೌಲ್ಯಗಳು ಮಾನ್ಯವಾಗಿವೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.
• ಆನುವಂಶಿಕತೆಯನ್ನು ಎಚ್ಚರಿಕೆಯಿಂದ ಪರಿಗಣಿಸಿ: ಪ್ರಾಪರ್ಟಿಯು ಅದರ ಪೋಷಕ ಅಂಶದಿಂದ ಅದರ ಮೌಲ್ಯವನ್ನು ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯಬೇಕೆ ಎಂದು ನಿರ್ಧರಿಸಿ. ಇದು ಪ್ರಾಪರ್ಟಿಯ ಸ್ವರೂಪ ಮತ್ತು ಅದನ್ನು ನಿಮ್ಮ ವಿನ್ಯಾಸದಾದ್ಯಂತ ಹೇಗೆ ಅನ್ವಯಿಸಬೇಕು ಎಂಬುದರ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿರುತ್ತದೆ.
• initial-value ಅನ್ನು ಕಾರ್ಯತಂತ್ರವಾಗಿ ಬಳಸಿ: ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯದ ಅಗತ್ಯವಿರುವ ಎಲ್ಲಾ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳಿಗೆ initial-value ಅನ್ನು ಹೊಂದಿಸಿ. ಇದು ಫಾಲ್‌ಬ್ಯಾಕ್ ಅನ್ನು ಒದಗಿಸುತ್ತದೆ ಮತ್ತು ಪ್ರಾಪರ್ಟಿಯನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ಹೊಂದಿಸದಿದ್ದರೂ ಸಹ ಸ್ಟೈಲ್ ಅನ್ವಯವಾಗುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.
• ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಗಳನ್ನು ಬಳಸಿ: ಸ್ಥಿರತೆಯನ್ನು ಕಾಪಾಡಿಕೊಳ್ಳಲು ಮತ್ತು ನಿಮ್ಮ ತಂಡದ ಡೆವಲಪ್‌ಮೆಂಟ್ ಕಾರ್ಯಪ್ರವಾಹವನ್ನು ಸುಧಾರಿಸಲು ನಿಮ್ಮ ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಯೊಳಗೆ @property ಅನ್ನು ಸಂಯೋಜಿಸಿ. ಇತರ ಘಟಕಗಳೊಂದಿಗೆ ಇದನ್ನು ಬಳಸುವ ಮೂಲಕ, ನೀವು ಹೆಚ್ಚು ದೃಢವಾದ ಮತ್ತು ಮಾಡ್ಯುಲರ್ ವಿನ್ಯಾಸಗಳನ್ನು ನಿರ್ಮಿಸುತ್ತೀರಿ, ಇದು ಜಾಗತಿಕ ಬಳಕೆಗಾಗಿ ಘಟಕಗಳನ್ನು ರಚಿಸುವಾಗ ಸಾಮಾನ್ಯವಾಗಿ ಗುರಿಯಾಗಿರುತ್ತದೆ.
• ಸಂಪೂರ್ಣವಾಗಿ ಪರೀಕ್ಷಿಸಿ: ಹೊಂದಾಣಿಕೆ ಮತ್ತು ಸ್ಥಿರವಾದ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನಿಮ್ಮ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಮತ್ತು ಅವುಗಳ ನಡವಳಿಕೆಯನ್ನು ವಿವಿಧ ಬ್ರೌಸರ್‌ಗಳು ಮತ್ತು ಸಾಧನಗಳಲ್ಲಿ ಪರೀಕ್ಷಿಸಿ. `property` ನ ಬೆಂಬಲವು ಇನ್ನೂ ಸಾರ್ವತ್ರಿಕವಾಗಿ ಅಳವಡಿಕೆಯಾಗಿಲ್ಲದ ಕಾರಣ, ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ಪರೀಕ್ಷೆಯು ಒಂದು ನಿರ್ಣಾಯಕ ಹಂತವಾಗಿದೆ.

ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ

ಅಕ್ಟೋಬರ್ 26, 2023 ರಂತೆ, @property ನಿಯಮದ ಬೆಂಬಲವು ಬ್ರೌಸರ್‌ಗಳಾದ್ಯಂತ ಬದಲಾಗುತ್ತದೆ. Chrome, Edge, ಮತ್ತು Safari ಉತ್ತಮ ಬೆಂಬಲವನ್ನು ಹೊಂದಿವೆ, ಆದರೆ Firefox ಬೆಂಬಲವು ಸೀಮಿತ ಸ್ಥಿತಿಯಲ್ಲಿದೆ. ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆಯ ಬಗ್ಗೆ ನವೀಕೃತವಾಗಿರಲು ಯಾವಾಗಲೂ Can I Use ([https://caniuse.com/mdn-css_at-rules_property](https://caniuse.com/mdn-css_at-rules_property)) ನಂತಹ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಸಂಪರ್ಕಿಸಿ.

ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆಗಾಗಿ ಪ್ರಮುಖ ಪರಿಗಣನೆಗಳು:

• ವೈಶಿಷ್ಟ್ಯ ಪತ್ತೆ: @property ಅನ್ನು ಬೆಂಬಲಿಸದ ಬ್ರೌಸರ್‌ಗಳನ್ನು ಸರಿಯಾಗಿ ನಿಭಾಯಿಸಲು ವೈಶಿಷ್ಟ್ಯ ಪತ್ತೆ ತಂತ್ರಗಳನ್ನು ಬಳಸಿ. ಪರ್ಯಾಯ ಸ್ಟೈಲ್‌ಗಳು ಅಥವಾ ಪಾಲಿಫಿಲ್‌ಗಳನ್ನು ಅನ್ವಯಿಸಲು ನೀವು CSS ಪ್ರಾಪರ್ಟಿ ಪರಿಶೀಲನೆ ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ವೈಶಿಷ್ಟ್ಯ ಪತ್ತೆಯನ್ನು ಬಳಸಬಹುದು.
• ಪ್ರಗತಿಪರ ವರ್ಧನೆ: @property ಇಲ್ಲದೆ ಕೆಲಸ ಮಾಡುವ ಬೇಸ್‌ಲೈನ್ ಸ್ಟೈಲಿಂಗ್‌ನೊಂದಿಗೆ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಿ. ನಂತರ, ಹೊಂದಾಣಿಕೆಯಾಗುವ ಬ್ರೌಸರ್‌ಗಳಿಗೆ @property ಬೆಂಬಲವನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ವಿನ್ಯಾಸವನ್ನು ಪ್ರಗತಿಪರವಾಗಿ ಹೆಚ್ಚಿಸಿ.
• ಪಾಲಿಫಿಲ್‌ಗಳು ಮತ್ತು ಫಾಲ್‌ಬ್ಯಾಕ್‌ಗಳು: @property ಅನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಬೆಂಬಲಿಸದ ಬ್ರೌಸರ್‌ಗಳಿಗೆ ಪಾಲಿಫಿಲ್‌ಗಳನ್ನು ಬಳಸುವುದನ್ನು ಅಥವಾ ಫಾಲ್‌ಬ್ಯಾಕ್‌ಗಳನ್ನು ಒದಗಿಸುವುದನ್ನು ಪರಿಗಣಿಸಿ. ಇದು ಸರಳ CSS ವೇರಿಯಬಲ್‌ಗಳನ್ನು ಬಳಸುವುದು, ಅಥವಾ SASS, LESS ಅಥವಾ ಇತರ ವಿಧಾನಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಪೂರ್ವ-ಸಂಸ್ಕರಣೆ ಮಾಡುವುದನ್ನು ಒಳಗೊಂಡಿರಬಹುದು.

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನೊಂದಿಗೆ CSS @property ಬಳಸುವುದು

CSS ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳ ದೊಡ್ಡ ಪ್ರಯೋಜನಗಳಲ್ಲಿ ಒಂದು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನೊಂದಿಗೆ ಅವುಗಳನ್ನು ನಿರ್ವಹಿಸುವ ಸಾಮರ್ಥ್ಯ, ಇದು ಡೈನಾಮಿಕ್ ಸ್ಟೈಲಿಂಗ್ ಮತ್ತು ವರ್ಧಿತ ಬಳಕೆದಾರ ಅನುಭವಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ. @property ಈ ಸಾಮರ್ಥ್ಯವನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ, CSS ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ನಡುವಿನ ಏಕೀಕರಣವನ್ನು ಇನ್ನಷ್ಟು ಶಕ್ತಿಶಾಲಿ ಮತ್ತು ನಿರೀಕ್ಷಿತವಾಗಿಸುತ್ತದೆ.

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ @property ಬಳಸಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳೊಂದಿಗೆ ನೀವು ಹೇಗೆ ಸಂವಹನ ನಡೆಸಬಹುದು ಎಂಬುದು ಇಲ್ಲಿದೆ:

1. ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿ ಮೌಲ್ಯವನ್ನು ಪಡೆಯುವುದು: ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯ ಮೌಲ್ಯವನ್ನು ಹಿಂಪಡೆಯಲು getPropertyValue() ಬಳಸಿ.

               
   const element = document.querySelector('.my-element');
   const primaryColor = getComputedStyle(element).getPropertyValue('--primary-color');
   console.log(primaryColor); // e.g., "#007bff"
   
               
   
                 
                   Copy
                 
               
             

2. ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿಸುವುದು: ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿಸಲು setProperty() ಬಳಸಿ. `@property` ವ್ಯಾಖ್ಯಾನದ syntax ಪ್ಯಾರಾಮೀಟರ್‌ನಿಂದಾಗಿ, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್-ಆಧಾರಿತ ಸೆಟ್ಟಿಂಗ್ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಮೌಲ್ಯ ಮೌಲ್ಯಮಾಪನವನ್ನು ಪ್ರಚೋದಿಸಬಹುದು.

               
   element.style.setProperty('--primary-color', 'green');
   
               
   
                 
                   Copy
                 
               
             

ಉದಾಹರಣೆ: ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನೊಂದಿಗೆ ಡೈನಾಮಿಕ್ ಬಣ್ಣ ಬದಲಾವಣೆ

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮತ್ತು @property ಬಳಸಿ ಡೈನಾಮಿಕ್ ಬಣ್ಣ ಬದಲಾವಣೆಯನ್ನು ಹೇಗೆ ರಚಿಸುವುದು ಎಂದು ವಿವರಿಸೋಣ.

HTML:

            
<button class="my-button">Change Color</button>

            

              
                Copy
              
            
          

CSS:

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

.my-button {
  background-color: var(--button-color);
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

            

              
                Copy
              
            
          

JavaScript:

            
const button = document.querySelector('.my-button');

button.addEventListener('click', () => {
  const newColor = 'red'; // Could be based on some logic/input
  button.style.setProperty('--button-color', newColor);
});

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡುವುದರಿಂದ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ --button-color ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯನ್ನು ಮಾರ್ಪಡಿಸುವ ಮೂಲಕ ಬಟನ್‌ನ ಹಿನ್ನೆಲೆ ಬಣ್ಣವನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ.

ಅಂತರಾಷ್ಟ್ರೀಕರಣ (i18n) ಮತ್ತು CSS @property

ವಿವಿಧ ಭಾಷೆಗಳು ಮತ್ತು ಸ್ಥಳೀಯತೆಗಳನ್ನು ಬೆಂಬಲಿಸುವ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ರಚಿಸುವಲ್ಲಿ CSS @property ಒಂದು ಮೌಲ್ಯಯುತ ಸಾಧನವಾಗಬಹುದು. i18n ಗೆ ಇದನ್ನು ಹೇಗೆ ಅನ್ವಯಿಸಬಹುದು ಎಂಬುದು ಇಲ್ಲಿದೆ:

• ಮುದ್ರಣಕಲೆ: ಫಾಂಟ್ ಗಾತ್ರಗಳು, ಲೈನ್ ಎತ್ತರಗಳು ಮತ್ತು ಫಾಂಟ್ ಕುಟುಂಬಗಳಿಗಾಗಿ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿ, ಆಯ್ಕೆಮಾಡಿದ ಭಾಷೆಯ ಆಧಾರದ ಮೇಲೆ ಪಠ್ಯದ ನೋಟವನ್ನು ಹೊಂದಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.
• ಲೇಔಟ್: ಪಠ್ಯ ದಿಕ್ಕಿನಲ್ಲಿನ ವ್ಯತ್ಯಾಸಗಳಿಗೆ (ಉದಾ., ಎಡದಿಂದ ಬಲಕ್ಕೆ ಮತ್ತು ಬಲದಿಂದ ಎಡಕ್ಕೆ) ಮತ್ತು ವಿಭಿನ್ನ ಅಕ್ಷರ ಅಗಲಗಳಿಗೆ ಸರಿಹೊಂದಿಸಲು ಅಂತರ, ಅಂಚುಗಳು ಮತ್ತು ಪ್ಯಾಡಿಂಗ್‌ಗಾಗಿ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಬಳಸಿ.
• ಬಣ್ಣಗಳು: UI ಅಂಶದ ಬಣ್ಣಗಳಿಗಾಗಿ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಬಳಸಿ, ಉದಾಹರಣೆಗೆ ಬಟನ್ ಬಣ್ಣಗಳು, ಪಠ್ಯ ಬಣ್ಣಗಳು ಮತ್ತು ಹಿನ್ನೆಲೆ ಬಣ್ಣಗಳು. ಇವುಗಳನ್ನು ಸಾಂಸ್ಕೃತಿಕ ಆದ್ಯತೆಗಳು ಅಥವಾ ನಿರ್ದಿಷ್ಟ ಪ್ರದೇಶಗಳಿಗೆ ವಿನ್ಯಾಸ ಮಾರ್ಗಸೂಚಿಗಳೊಂದಿಗೆ ಹೊಂದಿಸಲು ಸರಿಹೊಂದಿಸಬಹುದು.
• ಪಠ್ಯ ದಿಕ್ಕು: ಪಠ್ಯ ದಿಕ್ಕನ್ನು (ಉದಾ., ltr, rtl) ನಿಯಂತ್ರಿಸಲು ಮತ್ತು ಅದಕ್ಕೆ ಅನುಗುಣವಾಗಿ ಲೇಔಟ್ ಅನ್ನು ಮಾರ್ಪಡಿಸಲು ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯನ್ನು ಬಳಸಿ.

ಉದಾಹರಣೆ: ಭಾಷೆಯ ಆಧಾರದ ಮೇಲೆ ಫಾಂಟ್ ಗಾತ್ರಗಳನ್ನು ಹೊಂದಿಸುವುದು

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಆಯ್ಕೆಮಾಡಿದ ಭಾಷೆಗೆ ಅನುಗುಣವಾಗಿ ಶೀರ್ಷಿಕೆಗಳ ಫಾಂಟ್ ಗಾತ್ರವನ್ನು ಹೇಗೆ ಹೊಂದಿಸುವುದು ಎಂದು ನಾವು ಪ್ರದರ್ಶಿಸುತ್ತೇವೆ. ಈ ವಿಧಾನವು ಸೂಕ್ತ ಭಾಷೆಯನ್ನು ನಿರ್ಧರಿಸಲು ಮತ್ತು ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಹೊಂದಿಸಲು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಲೈಬ್ರರಿಯನ್ನು ಬಳಸುತ್ತದೆ.

            
@property --heading-font-size {
  syntax: <length>;
  inherits: false;
  initial-value: 2rem;
}

h1 {
  font-size: var(--heading-font-size);
}

            

              
                Copy
              
            
          

ನಂತರ, ಪತ್ತೆಹಚ್ಚಿದ ಭಾಷೆಯ ಆಧಾರದ ಮೇಲೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ ಮೌಲ್ಯವನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಹೊಂದಿಸಿ:

            
// Assuming a global variable or function to get the user's language
const userLanguage = getUserLanguage();
const heading = document.querySelector('h1');

if (userLanguage === 'ja') {
  heading.style.setProperty('--heading-font-size', '1.8rem'); // Adjust for Japanese
} else {
  heading.style.setProperty('--heading-font-size', '2rem'); // Default
}

            

              
                Copy
              
            
          

ಪ್ರವೇಶಿಸುವಿಕೆ ಪರಿಗಣನೆಗಳು

@property ನೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವಾಗ, ಪ್ರವೇಶಿಸುವಿಕೆಯನ್ನು ಮನಸ್ಸಿನಲ್ಲಿಟ್ಟುಕೊಳ್ಳುವುದು ಅತ್ಯಗತ್ಯ:

• ಬಣ್ಣದ ಕಾಂಟ್ರಾಸ್ಟ್: ಪಠ್ಯ ಮತ್ತು ಹಿನ್ನೆಲೆಗಳ ನಡುವೆ ಸಾಕಷ್ಟು ಬಣ್ಣದ ಕಾಂಟ್ರಾಸ್ಟ್ ಅನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಕಾಂಟ್ರಾಸ್ಟ್ ಅವಶ್ಯಕತೆಗಳನ್ನು ಪೂರೈಸಲು ವಿನ್ಯಾಸವನ್ನು ಸುಲಭವಾಗಿ ನವೀಕರಿಸಲು ಬಣ್ಣಗಳಿಗಾಗಿ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಬಳಸಿ.
• ಪಠ್ಯದ ಗಾತ್ರ: ಬಳಕೆದಾರರಿಗೆ ಪಠ್ಯದ ಗಾತ್ರವನ್ನು ನಿಯಂತ್ರಿಸಲು ಅನುಮತಿಸಿ. ಫಾಂಟ್ ಸ್ಕೇಲಿಂಗ್ ಅನ್ನು ಸುಲಭಗೊಳಿಸಲು ಸಾಪೇಕ್ಷ ಘಟಕಗಳನ್ನು (rem, em) ಮತ್ತು ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಬಳಸಿ.
• ಫೋಕಸ್ ಸೂಚಕಗಳು: ಫೋಕಸ್ ಸೂಚಕಗಳನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ಕಾಣುವಂತೆ ಕಸ್ಟಮೈಸ್ ಮಾಡಿ. ಫೋಕಸ್ ಔಟ್‌ಲೈನ್‌ಗಳ ಬಣ್ಣ ಮತ್ತು ಶೈಲಿಯನ್ನು ನಿಯಂತ್ರಿಸಲು ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಬಳಸಿ.
• ARIA ಗುಣಲಕ್ಷಣಗಳು: ಸ್ಥಿತಿಗಳು ಅಥವಾ ನಡವಳಿಕೆಯನ್ನು ನಿಯಂತ್ರಿಸಲು ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಬಳಸುವಾಗ ಅಂಶಗಳು ಸೂಕ್ತವಾದ ARIA ಗುಣಲಕ್ಷಣಗಳನ್ನು ಹೊಂದಿವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
• ಕೀಬೋರ್ಡ್ ನ್ಯಾವಿಗೇಷನ್: ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಕೀಬೋರ್ಡ್ ಬಳಸಿ ಸುಲಭವಾಗಿ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಬಹುದೆಂದು ಪರಿಶೀಲಿಸಿ, ವಿಶೇಷವಾಗಿ ಸಂವಾದಾತ್ಮಕ ಅಂಶಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಬಳಸಿದ್ದರೆ.

ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ಪರಿಗಣನೆಗಳು ಮತ್ತು ಪರಿಹಾರಗಳು

@property ಒಂದು ಶಕ್ತಿಶಾಲಿ ಸಾಧನವಾಗಿದ್ದರೂ, ಬ್ರೌಸರ್ ಬೆಂಬಲವು ಇನ್ನೂ ಸಾರ್ವತ್ರಿಕವಾಗಿ ಅಳವಡಿಕೆಯಾಗಿಲ್ಲ ಎಂಬುದನ್ನು ನೆನಪಿಡಿ. ಬೆಂಬಲದ ಕೊರತೆಯ ಪರಿಣಾಮವನ್ನು ತಗ್ಗಿಸಲು ನೀವು ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ತಂತ್ರಗಳನ್ನು ಬಳಸಬೇಕು.

• ಪ್ರಗತಿಪರ ವರ್ಧನೆ: ನಿಮ್ಮ ಸ್ಟೈಲಿಂಗ್ ಅನ್ನು ಮೂಲಭೂತ CSS ವೇರಿಯಬಲ್‌ಗಳೊಂದಿಗೆ ವಿನ್ಯಾಸಗೊಳಿಸಿ, ಮತ್ತು ನಂತರ ಬೆಂಬಲಿತ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಹೆಚ್ಚುವರಿ ವೈಶಿಷ್ಟ್ಯಗಳಿಗಾಗಿ `@property` ಅನ್ನು ಬಳಸಿ.
• ವೈಶಿಷ್ಟ್ಯ ಪತ್ತೆ: ಬ್ರೌಸರ್ @property ಅನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆಯೇ ಎಂದು ನಿರ್ಧರಿಸಲು ವೈಶಿಷ್ಟ್ಯ ಪತ್ತೆ ವಿಧಾನಗಳನ್ನು ಬಳಸಿ. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ ಒಂದು ಸರಳ ಪರಿಶೀಲನೆಯನ್ನು ಮಾಡಬಹುದು.
• CSS ಫಾಲ್‌ಬ್ಯಾಕ್‌ಗಳು: ಬೆಂಬಲಿಸದ ಪ್ರಾಪರ್ಟಿಗಳಿಗೆ ಫಾಲ್‌ಬ್ಯಾಕ್ ಮೌಲ್ಯಗಳನ್ನು ಒದಗಿಸಿ. ಇದನ್ನು ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ನೇರವಾಗಿ ಹೊಂದಿಸುವ ಮೂಲಕ ಅಥವಾ ಬೆಂಬಲಿತ ಮತ್ತು ಬೆಂಬಲಿಸದ ಬ್ರೌಸರ್‌ಗಳಿಗಾಗಿ ವಿಭಿನ್ನ ವೇರಿಯಬಲ್‌ಗಳನ್ನು ಬಳಸುವ ಮೂಲಕ ಮಾಡಬಹುದು.
• ಪ್ರಿಪ್ರೊಸೆಸರ್‌ಗಳು: ಪೂರ್ಣ `@property` ಬೆಂಬಲವಿಲ್ಲದ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಬಳಸಬಹುದಾದ ಪ್ರಮಾಣಿತ CSS ಗೆ ಉನ್ನತ-ಮಟ್ಟದ ರಚನೆಗಳನ್ನು ಭಾಷಾಂತರಿಸಲು Sass ಅಥವಾ Less ನಂತಹ CSS ಪ್ರಿಪ್ರೊಸೆಸರ್‌ಗಳನ್ನು ಬಳಸಿ. ಇದು ಹೆಚ್ಚುವರಿ ಹಂತವನ್ನು ಪರಿಚಯಿಸಿದರೂ, ಪ್ರಯೋಜನಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಅನಾನುಕೂಲಗಳನ್ನು ಮೀರಿಸುತ್ತವೆ.

CSS ಫಾಲ್‌ಬ್ಯಾಕ್‌ನ ಉದಾಹರಣೆ:

            
.element {
  --base-color: #333; /* Default value for browsers without @property */
  color: var(--base-color);
}

@supports (color: --base-color) { /* Feature Detection for @property*/
  @property --base-color {
    syntax: <color>;
    inherits: false;
    initial-value: #333;
  }
  /* Add more complex styling here utilizing the @property */
}

            

              
                Copy
              
            
          

ಪರಿಕರಗಳು ಮತ್ತು ಗ್ರಂಥಾಲಯಗಳು

ವಿವಿಧ ಪರಿಕರಗಳು ಮತ್ತು ಗ್ರಂಥಾಲಯಗಳು @property ನೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಲು ಸಹಾಯ ಮಾಡಬಹುದು:

• PostCSS ಪ್ಲಗಿನ್‌ಗಳು: `postcss-custom-properties` ಮತ್ತು `postcss-custom-properties-experimental` ನಂತಹ ಪ್ಲಗಿನ್‌ಗಳು ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಪರಿವರ್ತಿಸಲು ಮತ್ತು `@property` ವ್ಯಾಖ್ಯಾನಗಳನ್ನು ಸಮಾನವಾದ CSS ನಿಯಮಗಳಾಗಿ ಪರಿವರ್ತಿಸುವ ಮೂಲಕ ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಿಗೆ ಬೆಂಬಲವನ್ನು ಒದಗಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
• Stylelint: ನಿಮ್ಮ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳ ಬಳಕೆ ಮತ್ತು ರಚನೆಯನ್ನು ಮೌಲ್ಯೀಕರಿಸಲು stylelint ಮತ್ತು ಕಸ್ಟಮ್ ನಿಯಮಗಳು ಅಥವಾ ಪ್ಲಗಿನ್‌ಗಳನ್ನು ಸಂಯೋಜಿಸಿ.
• ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಯ ಚೌಕಟ್ಟುಗಳು: ವಿನ್ಯಾಸ ಸ್ಥಿರತೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಮತ್ತು ಡೆವಲಪರ್‌ಗಳಿಗೆ ಸುಗಮ ಅನುಭವವನ್ನು ಒದಗಿಸಲು Ant Design, Material UI, ಮತ್ತು Bootstrap ನಂತಹ ಜನಪ್ರಿಯ ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಯ ಚೌಕಟ್ಟುಗಳಲ್ಲಿ @property ಅನ್ನು ಸಂಯೋಜಿಸಿ.

ತೀರ್ಮಾನ

CSS @property ವೆಬ್ ಡೆವಲಪ್‌ಮೆಂಟ್ ಟೂಲ್‌ಕಿಟ್‌ಗೆ ಒಂದು ಶಕ್ತಿಶಾಲಿ ಸೇರ್ಪಡೆಯಾಗಿದೆ, ಇದು ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳಿಗೆ ರಚನೆ, ಮೌಲ್ಯಮಾಪನ ಮತ್ತು ಡೈನಾಮಿಕ್ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ತರುತ್ತದೆ. ನಿಮ್ಮ CSS ವೇರಿಯಬಲ್‌ಗಳ ಪ್ರಕಾರ ಮತ್ತು ನಡವಳಿಕೆಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವ ಮೂಲಕ, ನೀವು ಕೋಡ್ ನಿರ್ವಹಣೆಯನ್ನು ಹೆಚ್ಚಿಸಬಹುದು, ವಿನ್ಯಾಸ ಸ್ಥಿರತೆಯನ್ನು ಸುಧಾರಿಸಬಹುದು ಮತ್ತು ಹೆಚ್ಚು ದೃಢವಾದ ಮತ್ತು ನಿರೀಕ್ಷಿತ ಸ್ಟೈಲಿಂಗ್ ಪರಿಹಾರಗಳನ್ನು ರಚಿಸಬಹುದು.

ಬ್ರೌಸರ್ ಬೆಂಬಲವು ಸುಧಾರಿಸಿದಂತೆ, ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳಲ್ಲಿ @property ಅನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವುದು ಹೆಚ್ಚು ಮುಖ್ಯವಾಗುತ್ತಿದೆ. ಈ ಮಾರ್ಗದರ್ಶಿಯಲ್ಲಿ ವಿವರಿಸಿರುವ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ಈ ಹೊಸ ವೈಶಿಷ್ಟ್ಯದ ಪ್ರಯೋಜನಗಳನ್ನು ಪಡೆದುಕೊಳ್ಳಬಹುದು ಮತ್ತು ಹೆಚ್ಚು ಪರಿಣಾಮಕಾರಿ, ನಿರ್ವಹಿಸಬಲ್ಲ ಮತ್ತು ಅಳೆಯಬಹುದಾದ CSS ಅನ್ನು ಬರೆಯಬಹುದು. @property ಅನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಿ, ಮತ್ತು ನಿಮ್ಮ ವೆಬ್ ಡೆವಲಪ್‌ಮೆಂಟ್ ಕಾರ್ಯಪ್ರವಾಹವನ್ನು ಪರಿವರ್ತಿಸಿ!

ಹೆಚ್ಚಿನ ಕಲಿಕೆ

• MDN ವೆಬ್ ಡಾಕ್ಸ್: @property
• CSS Custom Properties for Cascading Variables Module Level 1
• Can I Use: @property