@log ಅಟ್-ರೂಲ್ ಮೂಲಕ CSS ಡೀಬಗ್ಗಿಂಗ್‌ನಲ್ಲಿ ಪರಿಣತಿ ಪಡೆಯಿರಿ. ದಕ್ಷ ಡೆವಲಪ್ಮೆಂಟ್ ಮತ್ತು ಟ್ರಬಲ್‌ಶೂಟಿಂಗ್‌ಗಾಗಿ CSS ವೇರಿಯಬಲ್ ಮೌಲ್ಯಗಳನ್ನು ಬ್ರೌಸರ್ ಕನ್ಸೋಲ್‌ಗೆ ನೇರವಾಗಿ ಲಾಗ್ ಮಾಡಲು ಕಲಿಯಿರಿ.
CSS ಡೀಬಗ್ಗಿಂಗ್ ಅನ್‌ಲಾಕ್ ಮಾಡಿ: ಡೆವಲಪ್ಮೆಂಟ್ ಲಾಗಿಂಗ್‌ಗಾಗಿ @log ನ ಆಳವಾದ ಅಧ್ಯಯನ
ವೆಬ್‌ನ ಸ್ಟೈಲಿಂಗ್ ಭಾಷೆಯಾದ CSS, ಕೆಲವೊಮ್ಮೆ ಡೆವಲಪ್ಮೆಂಟ್ ಸಮಯದಲ್ಲಿ ನಿರಾಶೆಗೆ ಕಾರಣವಾಗಬಹುದು. ಸಂಕೀರ್ಣ ಲೇಔಟ್‌ಗಳನ್ನು ಡೀಬಗ್ ಮಾಡುವುದು, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಿಂದ ಚಾಲಿತ ಡೈನಾಮಿಕ್ ಸ್ಟೈಲ್ ಬದಲಾವಣೆಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು, ಅಥವಾ ಅನಿರೀಕ್ಷಿತ ದೃಶ್ಯ ನಡವಳಿಕೆಗಳ ಮೂಲವನ್ನು ಪತ್ತೆಹಚ್ಚುವುದು ಸಮಯ ತೆಗೆದುಕೊಳ್ಳುವ ಮತ್ತು ಸವಾಲಿನ ಕೆಲಸವಾಗಿರಬಹುದು. ಬ್ರೌಸರ್‌ನ ಡೆವಲಪರ್ ಪರಿಕರಗಳಲ್ಲಿ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಪರಿಶೀಲಿಸುವಂತಹ ಸಾಂಪ್ರದಾಯಿಕ ವಿಧಾನಗಳು ಮೌಲ್ಯಯುತವಾಗಿವೆ, ಆದರೆ ಅವುಗಳಿಗೆ ಸಾಮಾನ್ಯವಾಗಿ ಹಸ್ತಚಾಲಿತ ಪ್ರಯತ್ನ ಮತ್ತು ನಿರಂತರ ರಿಫ್ರೆಶ್ ಅಗತ್ಯವಿರುತ್ತದೆ. ಇಲ್ಲಿಯೇ @log ಅಟ್-ರೂಲ್ ಬರುತ್ತದೆ – ಇದು ಒಂದು ಶಕ್ತಿಶಾಲಿ CSS ಡೀಬಗ್ಗಿಂಗ್ ಸಾಧನವಾಗಿದ್ದು, CSS ವೇರಿಯಬಲ್ ಮೌಲ್ಯಗಳನ್ನು ನೇರವಾಗಿ ಬ್ರೌಸರ್ ಕನ್ಸೋಲ್‌ಗೆ ಲಾಗ್ ಮಾಡಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಇದು ನಿಮ್ಮ ಸ್ಟೈಲ್‌ಗಳ ಬಗ್ಗೆ ನೈಜ-ಸಮಯದ ಒಳನೋಟಗಳನ್ನು ನೀಡುತ್ತದೆ ಮತ್ತು ಡೀಬಗ್ಗಿಂಗ್ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಹೆಚ್ಚು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಮಾಡುತ್ತದೆ.
CSS @log ಅಟ್-ರೂಲ್ ಎಂದರೇನು?
@log ಅಟ್-ರೂಲ್ ಒಂದು ಪ್ರಮಾಣಿತವಲ್ಲದ CSS ವೈಶಿಷ್ಟ್ಯವಾಗಿದೆ (ಪ್ರಸ್ತುತ ಫೈರ್‌ಫಾಕ್ಸ್ ಮತ್ತು ಸಫಾರಿಯ ಡೆವಲಪರ್ ಪ್ರಿವ್ಯೂನಂತಹ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಅಳವಡಿಸಲಾಗಿದೆ) ಇದನ್ನು CSS ಡೀಬಗ್ಗಿಂಗ್ ಅನ್ನು ಸುಲಭಗೊಳಿಸಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ. ಇದು ಡೆವಲಪರ್‌ಗಳಿಗೆ CSS ವೇರಿಯಬಲ್‌ಗಳ (ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟೀಸ್) ಮೌಲ್ಯಗಳನ್ನು ನೇರವಾಗಿ ಬ್ರೌಸರ್‌ನ ಕನ್ಸೋಲ್‌ಗೆ ಲಾಗ್ ಮಾಡಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಸಂಕೀರ್ಣ ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳು, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಿಂದ ಚಾಲಿತ ಡೈನಾಮಿಕ್ ಸ್ಟೈಲಿಂಗ್, ಅಥವಾ ವೇರಿಯಬಲ್ ಮೌಲ್ಯಗಳು ಆಗಾಗ್ಗೆ ಬದಲಾಗುವ ಅನಿಮೇಷನ್‌ಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವಾಗ ಇದು ವಿಶೇಷವಾಗಿ ಸಹಾಯಕವಾಗಿದೆ. ಈ ಮೌಲ್ಯಗಳನ್ನು ಲಾಗ್ ಮಾಡುವುದರ ಮೂಲಕ, ನಿಮ್ಮ ಸ್ಟೈಲ್‌ಗಳು ಹೇಗೆ ವರ್ತಿಸುತ್ತಿವೆ ಎಂಬುದರ ಕುರಿತು ನೀವು ತಕ್ಷಣದ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಪಡೆಯಬಹುದು ಮತ್ತು ಸಂಭಾವ್ಯ ಸಮಸ್ಯೆಗಳನ್ನು ತ್ವರಿತವಾಗಿ ಗುರುತಿಸಬಹುದು.
ಪ್ರಮುಖ ಸೂಚನೆ: ಸದ್ಯಕ್ಕೆ, @log ಅಧಿಕೃತ CSS ಸ್ಪೆಸಿಫಿಕೇಶನ್‌ನ ಭಾಗವಾಗಿಲ್ಲ ಮತ್ತು ಅದರ ಬೆಂಬಲ ಸೀಮಿತವಾಗಿದೆ. ಈ ವೈಶಿಷ್ಟ್ಯವನ್ನು ಪ್ರಾಥಮಿಕವಾಗಿ ಡೆವಲಪ್ಮೆಂಟ್ ಮತ್ತು ಡೀಬಗ್ಗಿಂಗ್ ಉದ್ದೇಶಗಳಿಗಾಗಿ ಮಾತ್ರ ಉದ್ದೇಶಿಸಲಾಗಿದೆ ಮತ್ತು ಪ್ರೊಡಕ್ಷನ್ ಕೋಡ್‌ನಿಂದ ತೆಗೆದುಹಾಕಬೇಕು ಎಂಬುದನ್ನು ನೆನಪಿನಲ್ಲಿಟ್ಟುಕೊಳ್ಳುವುದು ಬಹಳ ಮುಖ್ಯ. ಪ್ರೊಡಕ್ಷನ್‌ನಲ್ಲಿ ಪ್ರಮಾಣಿತವಲ್ಲದ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಅವಲಂಬಿಸುವುದರಿಂದ ವಿವಿಧ ಬ್ರೌಸರ್‌ಗಳು ಮತ್ತು ಆವೃತ್ತಿಗಳಲ್ಲಿ ಅನಿರೀಕ್ಷಿತ ನಡವಳಿಕೆಗೆ ಕಾರಣವಾಗಬಹುದು.
CSS ಡೀಬಗ್ಗಿಂಗ್‌ಗಾಗಿ @log ಅನ್ನು ಏಕೆ ಬಳಸಬೇಕು?
ಸಾಂಪ್ರದಾಯಿಕ CSS ಡೀಬಗ್ಗಿಂಗ್ ಸಾಮಾನ್ಯವಾಗಿ ಈ ಕೆಳಗಿನ ಚಕ್ರವನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ:
- ಬ್ರೌಸರ್‌ನ ಡೆವಲಪರ್ ಪರಿಕರಗಳಲ್ಲಿ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಪರಿಶೀಲಿಸುವುದು.
- ಸಂಬಂಧಿತ CSS ನಿಯಮಗಳಿಗಾಗಿ ಹುಡುಕುವುದು.
- ಪ್ರಾಪರ್ಟೀಸ್‌ನ ಗಣනය ಮಾಡಿದ ಮೌಲ್ಯಗಳನ್ನು ವಿಶ್ಲೇಷಿಸುವುದು.
- CSS ಗೆ ಬದಲಾವಣೆಗಳನ್ನು ಮಾಡುವುದು.
- ಬ್ರೌಸರ್ ಅನ್ನು ರಿಫ್ರೆಶ್ ಮಾಡುವುದು.
ಈ ಪ್ರಕ್ರಿಯೆಯು ಸಮಯ ತೆಗೆದುಕೊಳ್ಳಬಹುದು, ವಿಶೇಷವಾಗಿ ಸಂಕೀರ್ಣ ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳು ಅಥವಾ ಡೈನಾಮಿಕ್ ಸ್ಟೈಲಿಂಗ್‌ನೊಂದಿಗೆ ವ್ಯವಹರಿಸುವಾಗ. @log ಅಟ್-ರೂಲ್ ಹಲವಾರು ಪ್ರಯೋಜನಗಳನ್ನು ನೀಡುತ್ತದೆ:
ನೈಜ-ಸಮಯದ ಒಳನೋಟಗಳು
@log CSS ವೇರಿಯಬಲ್‌ಗಳ ಮೌಲ್ಯಗಳು ಬದಲಾದಂತೆ ತಕ್ಷಣದ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ನೀಡುತ್ತದೆ. ಅನಿಮೇಷನ್‌ಗಳು, ಟ್ರಾನ್ಸಿಶನ್‌ಗಳು, ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಿಂದ ಚಾಲಿತ ಡೈನಾಮಿಕ್ ಸ್ಟೈಲ್‌ಗಳನ್ನು ಡೀಬಗ್ ಮಾಡಲು ಇದು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ. ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ಪರಿಶೀಲಿಸದೆ ಅಥವಾ ಬ್ರೌಸರ್ ಅನ್ನು ರಿಫ್ರೆಶ್ ಮಾಡದೆಯೇ ನೀವು ನೈಜ ಸಮಯದಲ್ಲಿ ಮೌಲ್ಯಗಳು ಬದಲಾಗುವುದನ್ನು ನೋಡಬಹುದು.
ಸರಳೀಕೃತ ಡೀಬಗ್ಗಿಂಗ್
CSS ವೇರಿಯಬಲ್ ಮೌಲ್ಯಗಳನ್ನು ಲಾಗ್ ಮಾಡುವುದರ ಮೂಲಕ, ಅನಿರೀಕ್ಷಿತ ದೃಶ್ಯ ನಡವಳಿಕೆಗಳ ಮೂಲವನ್ನು ನೀವು ತ್ವರಿತವಾಗಿ ಗುರುತಿಸಬಹುದು. ಉದಾಹರಣೆಗೆ, ಒಂದು ಎಲಿಮೆಂಟ್ ನಿರೀಕ್ಷೆಯಂತೆ ಕಾಣಿಸದಿದ್ದರೆ, ಸಂಬಂಧಿತ CSS ವೇರಿಯಬಲ್‌ಗಳನ್ನು ಲಾಗ್ ಮಾಡಿ ಅವು ಸರಿಯಾದ ಮೌಲ್ಯಗಳನ್ನು ಹೊಂದಿವೆಯೇ ಎಂದು ನೋಡಬಹುದು. ಇದು ಸಮಸ್ಯೆಯನ್ನು ಹೆಚ್ಚು ತ್ವರಿತವಾಗಿ ಮತ್ತು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಪತ್ತೆಹಚ್ಚಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ.
ಸಂಕೀರ್ಣ ಸ್ಟೈಲ್‌ಗಳ ಉತ್ತಮ ತಿಳುವಳಿಕೆ
ಸಂಕೀರ್ಣ ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಮತ್ತು ನಿರ್ವಹಿಸುವುದು ಕಷ್ಟಕರವಾಗಿರುತ್ತದೆ. @log ವಿವಿಧ CSS ವೇರಿಯಬಲ್‌ಗಳು ಹೇಗೆ ಪರಸ್ಪರ ಸಂವಹನ ನಡೆಸುತ್ತವೆ ಮತ್ತು ಅವು ನಿಮ್ಮ ಪುಟದ ಒಟ್ಟಾರೆ ಸ್ಟೈಲಿಂಗ್ ಮೇಲೆ ಹೇಗೆ ಪರಿಣಾಮ ಬೀರುತ್ತವೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಬಹು ಡೆವಲಪರ್‌ಗಳಿರುವ ದೊಡ್ಡ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳಲ್ಲಿ ಕೆಲಸ ಮಾಡುವಾಗ ಇದು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿರುತ್ತದೆ.
ಕಡಿಮೆಯಾದ ಡೀಬಗ್ಗಿಂಗ್ ಸಮಯ
ನೈಜ-ಸಮಯದ ಒಳನೋಟಗಳನ್ನು ಒದಗಿಸುವ ಮೂಲಕ ಮತ್ತು ಡೀಬಗ್ಗಿಂಗ್ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಸರಳಗೊಳಿಸುವ ಮೂಲಕ, @log ನೀವು CSS ಡೀಬಗ್ಗಿಂಗ್‌ಗೆ ವ್ಯಯಿಸುವ ಸಮಯವನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಕಡಿಮೆ ಮಾಡುತ್ತದೆ. ಇದು ಡೆವಲಪ್‌ಮೆಂಟ್‌ನ ಇತರ ಅಂಶಗಳ ಮೇಲೆ ಗಮನ ಹರಿಸಲು ನಿಮ್ಮ ಸಮಯವನ್ನು ಉಳಿಸುತ್ತದೆ.
@log ಅಟ್-ರೂಲ್ ಅನ್ನು ಹೇಗೆ ಬಳಸುವುದು
@log ಅಟ್-ರೂಲ್ ಅನ್ನು ಬಳಸುವುದು ಸರಳವಾಗಿದೆ. ಅದನ್ನು CSS ನಿಯಮದೊಳಗೆ ಇರಿಸಿ ಮತ್ತು ನೀವು ಲಾಗ್ ಮಾಡಲು ಬಯಸುವ CSS ವೇರಿಯಬಲ್‌ಗಳನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಿ. ಮೂಲ ಸಿಂಟ್ಯಾಕ್ಸ್ ಇಲ್ಲಿದೆ:
@log variable1, variable2, ...;
ಇಲ್ಲಿ ಒಂದು ಸರಳ ಉದಾಹರಣೆ ಇದೆ:
:root {
--primary-color: #007bff;
--font-size: 16px;
}
body {
font-size: var(--font-size);
color: var(--primary-color);
@log --primary-color, --font-size;
}
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, body ಎಲಿಮೆಂಟ್ ರೆಂಡರ್ ಆದಾಗಲೆಲ್ಲಾ --primary-color ಮತ್ತು --font-size ಮೌಲ್ಯಗಳು ಬ್ರೌಸರ್‌ನ ಕನ್ಸೋಲ್‌ಗೆ ಲಾಗ್ ಆಗುತ್ತವೆ. ಕನ್ಸೋಲ್‌ನಲ್ಲಿ ನೀವು ಈ ರೀತಿಯದನ್ನು ನೋಡುತ್ತೀರಿ:
[CSS] --primary-color: #007bff; --font-size: 16px;
@log ಬಳಸುವ ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳು
ವಿವಿಧ ಸನ್ನಿವೇಶಗಳಲ್ಲಿ CSS ಅನ್ನು ಡೀಬಗ್ ಮಾಡಲು ನೀವು @log ಅನ್ನು ಹೇಗೆ ಬಳಸಬಹುದು ಎಂಬುದರ ಕೆಲವು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳನ್ನು ನೋಡೋಣ:
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನೊಂದಿಗೆ ಡೈನಾಮಿಕ್ ಸ್ಟೈಲ್‌ಗಳನ್ನು ಡೀಬಗ್ ಮಾಡುವುದು
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಡೈನಾಮಿಕ್ ಆಗಿ CSS ವೇರಿಯಬಲ್‌ಗಳನ್ನು ಮಾರ್ಪಡಿಸಿದಾಗ, ಸ್ಟೈಲಿಂಗ್ ಸಮಸ್ಯೆಗಳ ಮೂಲವನ್ನು ಪತ್ತೆಹಚ್ಚುವುದು ಕಷ್ಟಕರವಾಗಿರುತ್ತದೆ. @log ಈ ಬದಲಾವಣೆಗಳನ್ನು ನೈಜ-ಸಮಯದಲ್ಲಿ ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ.
ಉದಾಹರಣೆ: ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ತನ್ನ ಹಿನ್ನೆಲೆ ಬಣ್ಣವನ್ನು ಬದಲಾಯಿಸುವ ಬಟನ್ ನಿಮ್ಮಲ್ಲಿದೆ ಎಂದು ಭಾವಿಸೋಣ. ಹಿನ್ನೆಲೆ ಬಣ್ಣವನ್ನು ನಿಯಂತ್ರಿಸುವ CSS ವೇರಿಯಬಲ್ ಅನ್ನು ಅದು ಸರಿಯಾಗಿ ಅಪ್‌ಡೇಟ್ ಆಗುತ್ತಿದೆಯೇ ಎಂದು ನೋಡಲು ನೀವು ಲಾಗ್ ಮಾಡಬಹುದು.
HTML:
<button id="myButton">Click Me</button>
CSS:
:root {
--button-bg-color: #007bff;
}
#myButton {
background-color: var(--button-bg-color);
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
@log --button-bg-color;
}
JavaScript:
const button = document.getElementById('myButton');
button.addEventListener('click', () => {
document.documentElement.style.setProperty('--button-bg-color', '#28a745');
});
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗಲೆಲ್ಲಾ, --button-bg-color ಮೌಲ್ಯವು ಕನ್ಸೋಲ್‌ಗೆ ಲಾಗ್ ಆಗುತ್ತದೆ, ಇದರಿಂದ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ CSS ವೇರಿಯಬಲ್ ಅನ್ನು ಸರಿಯಾಗಿ ಅಪ್‌ಡೇಟ್ ಮಾಡುತ್ತಿದೆಯೇ ಎಂದು ನೀವು ಪರಿಶೀಲಿಸಬಹುದು.
ಅನಿಮೇಷನ್‌ಗಳು ಮತ್ತು ಟ್ರಾನ್ಸಿಶನ್‌ಗಳನ್ನು ಡೀಬಗ್ ಮಾಡುವುದು
ಅನಿಮೇಷನ್‌ಗಳು ಮತ್ತು ಟ್ರಾನ್ಸಿಶನ್‌ಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಸಂಕೀರ್ಣ ಲೆಕ್ಕಾಚಾರಗಳು ಮತ್ತು CSS ವೇರಿಯಬಲ್‌ಗಳಿಗೆ ಬದಲಾವಣೆಗಳನ್ನು ಒಳಗೊಂಡಿರುತ್ತವೆ. @log ಈ ವೇರಿಯಬಲ್‌ಗಳು ಕಾಲಾನಂತರದಲ್ಲಿ ಹೇಗೆ ಬದಲಾಗುತ್ತಿವೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಮತ್ತು ಯಾವುದೇ ಅನಿರೀಕ್ಷಿತ ನಡವಳಿಕೆಯನ್ನು ಗುರುತಿಸಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ.
ಉದಾಹರಣೆ: ಒಂದು ಎಲಿಮೆಂಟ್‌ನ ಗಾತ್ರವನ್ನು ಕ್ರಮೇಣ ಹೆಚ್ಚಿಸುವ ಅನಿಮೇಷನ್ ನಿಮ್ಮಲ್ಲಿದೆ ಎಂದುಕೊಳ್ಳೋಣ. ಅನಿಮೇಷನ್ ಸಮಯದಲ್ಲಿ ಅದು ಹೇಗೆ ಬದಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ನೋಡಲು ಎಲಿಮೆಂಟ್‌ನ ಗಾತ್ರವನ್ನು ನಿಯಂತ್ರಿಸುವ CSS ವೇರಿಯಬಲ್ ಅನ್ನು ನೀವು ಲಾಗ್ ಮಾಡಬಹುದು.
HTML:
<div id="animatedElement">Animating Element</div>
CSS:
:root {
--element-size: 100px;
}
#animatedElement {
width: var(--element-size);
height: var(--element-size);
background-color: #007bff;
color: white;
animation: grow 2s linear infinite;
@log --element-size;
}
@keyframes grow {
0% {
--element-size: 100px;
}
50% {
--element-size: 200px;
}
100% {
--element-size: 100px;
}
}
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಅನಿಮೇಷನ್ ಸಮಯದಲ್ಲಿ --element-size ಮೌಲ್ಯವು ಕನ್ಸೋಲ್‌ಗೆ ಲಾಗ್ ಆಗುತ್ತದೆ, ಇದರಿಂದ ಕಾಲಾನಂತರದಲ್ಲಿ ಎಲಿಮೆಂಟ್‌ನ ಗಾತ್ರವು ಹೇಗೆ ಬದಲಾಗುತ್ತಿದೆ ಎಂಬುದನ್ನು ನೀವು ನೋಡಬಹುದು.
ಲೇಔಟ್ ಸಮಸ್ಯೆಗಳನ್ನು ನಿವಾರಿಸುವುದು
ಲೇಔಟ್ ಸಮಸ್ಯೆಗಳು ತಪ್ಪಾದ CSS ವೇರಿಯಬಲ್ ಮೌಲ್ಯಗಳು ಸೇರಿದಂತೆ ವಿವಿಧ ಕಾರಣಗಳಿಂದ ಉಂಟಾಗಬಹುದು. @log ಸಂಬಂಧಿತ CSS ವೇರಿಯಬಲ್‌ಗಳ ಮೌಲ್ಯಗಳನ್ನು ಪರಿಶೀಲಿಸಲು ನಿಮಗೆ ಅವಕಾಶ ನೀಡುವ ಮೂಲಕ ಈ ಸಮಸ್ಯೆಗಳನ್ನು ಗುರುತಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
ಉದಾಹರಣೆ: ಕಾಲಮ್‌ಗಳ ಅಗಲವನ್ನು CSS ವೇರಿಯಬಲ್‌ಗಳಿಂದ ನಿಯಂತ್ರಿಸುವ ಗ್ರಿಡ್ ಲೇಔಟ್ ನಿಮ್ಮಲ್ಲಿದೆ ಎಂದು ಭಾವಿಸೋಣ. ಕಾಲಮ್‌ಗಳು ನಿರೀಕ್ಷೆಯಂತೆ ಕಾಣಿಸದಿದ್ದರೆ, ಅವುಗಳ ಅಗಲವನ್ನು ನಿಯಂತ್ರಿಸುವ CSS ವೇರಿಯಬಲ್‌ಗಳನ್ನು ಲಾಗ್ ಮಾಡಿ ಅವು ಸರಿಯಾದ ಮೌಲ್ಯಗಳನ್ನು ಹೊಂದಿವೆಯೇ ಎಂದು ನೋಡಬಹುದು.
HTML:
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
</div>
CSS:
:root {
--column-width: 200px;
}
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--column-width), 1fr));
gap: 10px;
}
.grid-item {
background-color: #f0f0f0;
padding: 20px;
text-align: center;
@log --column-width;
}
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಪ್ರತಿ ಗ್ರಿಡ್ ಐಟಂಗಾಗಿ --column-width ಮೌಲ್ಯವು ಕನ್ಸೋಲ್‌ಗೆ ಲಾಗ್ ಆಗುತ್ತದೆ, ಇದರಿಂದ ಕಾಲಮ್‌ಗಳು ಸರಿಯಾದ ಅಗಲವನ್ನು ಹೊಂದಿವೆಯೇ ಎಂದು ನೀವು ಪರಿಶೀಲಿಸಬಹುದು.
@log ಬಳಸಲು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು
@log ಅನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಬಳಸಲು, ಈ ಕೆಳಗಿನ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ನೆನಪಿನಲ್ಲಿಡಿ:
- ಇದನ್ನು ಮಿತವಾಗಿ ಬಳಸಿ:
@logಒಂದು ಡೀಬಗ್ಗಿಂಗ್ ಸಾಧನ, ಪ್ರೊಡಕ್ಷನ್ ಕೋಡ್‌ಗಾಗಿ ವೈಶಿಷ್ಟ್ಯವಲ್ಲ. ನಿರ್ದಿಷ್ಟ ಸಮಸ್ಯೆಗಳನ್ನು ಡೀಬಗ್ ಮಾಡಬೇಕಾದಾಗ ಮಾತ್ರ ಇದನ್ನು ಬಳಸಿ ಮತ್ತು ನೀವು ಮುಗಿದ ನಂತರ ಅದನ್ನು ತೆಗೆದುಹಾಕಿ. - ಸಂಬಂಧಿತ ವೇರಿಯಬಲ್‌ಗಳನ್ನು ಮಾತ್ರ ಲಾಗ್ ಮಾಡಿ: ಹಲವಾರು ವೇರಿಯಬಲ್‌ಗಳನ್ನು ಲಾಗ್ ಮಾಡುವುದರಿಂದ ಕನ್ಸೋಲ್ ಗೊಂದಲಮಯವಾಗಬಹುದು ಮತ್ತು ನಿಮಗೆ ಬೇಕಾದ ಮಾಹಿತಿಯನ್ನು ಕಂಡುಹಿಡಿಯುವುದು ಕಷ್ಟವಾಗಬಹುದು. ನೀವು ಡೀಬಗ್ ಮಾಡುತ್ತಿರುವ ಸಮಸ್ಯೆಗೆ ಸಂಬಂಧಿಸಿದ ವೇರಿಯಬಲ್‌ಗಳನ್ನು ಮಾತ್ರ ಲಾಗ್ ಮಾಡಿ.
- ಪ್ರೊಡಕ್ಷನ್‌ಗೆ ನಿಯೋಜಿಸುವ ಮೊದಲು @log ಹೇಳಿಕೆಗಳನ್ನು ತೆಗೆದುಹಾಕಿ: ಮೊದಲೇ ಹೇಳಿದಂತೆ,
@logಒಂದು ಪ್ರಮಾಣಿತ CSS ವೈಶಿಷ್ಟ್ಯವಲ್ಲ ಮತ್ತು ಪ್ರೊಡಕ್ಷನ್ ಕೋಡ್‌ನಲ್ಲಿ ಬಳಸಬಾರದು. ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಲೈವ್ ಪರಿಸರಕ್ಕೆ ನಿಯೋಜಿಸುವ ಮೊದಲು ಎಲ್ಲಾ@logಹೇಳಿಕೆಗಳನ್ನು ತೆಗೆದುಹಾಕುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಇದನ್ನು ವೆಬ್‌ಪ್ಯಾಕ್ ಅಥವಾ ಪಾರ್ಸೆಲ್‌ನಂತಹ ಬಿಲ್ಡ್ ಪರಿಕರಗಳೊಂದಿಗೆ ಸ್ವಯಂಚಾಲಿತಗೊಳಿಸಬಹುದು. - ವಿವರಣಾತ್ಮಕ ವೇರಿಯಬಲ್ ಹೆಸರುಗಳನ್ನು ಬಳಸಿ: ವಿವರಣಾತ್ಮಕ ವೇರಿಯಬಲ್ ಹೆಸರುಗಳನ್ನು ಬಳಸುವುದರಿಂದ ಲಾಗ್ ಆಗುತ್ತಿರುವ ಮೌಲ್ಯಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಸುಲಭವಾಗುತ್ತದೆ. ಉದಾಹರಣೆಗೆ,
--colorಬಳಸುವ ಬದಲು,--primary-button-colorಬಳಸಿ. - CSS ಪ್ರಿಪ್ರೊಸೆಸರ್‌ಗಳನ್ನು ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ: Sass ಅಥವಾ Less ನಂತಹ CSS ಪ್ರಿಪ್ರೊಸೆಸರ್‌ಗಳು ಸೋರ್ಸ್ ಮ್ಯಾಪ್‌ಗಳು ಮತ್ತು ಮಿಕ್ಸಿನ್‌ಗಳಂತಹ ಹೆಚ್ಚು ಸುಧಾರಿತ ಡೀಬಗ್ಗಿಂಗ್ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ನೀಡುತ್ತವೆ. ನೀವು ದೊಡ್ಡ ಪ್ರಾಜೆಕ್ಟ್‌ನಲ್ಲಿ ಕೆಲಸ ಮಾಡುತ್ತಿದ್ದರೆ, ನಿಮ್ಮ ಡೀಬಗ್ಗಿಂಗ್ ವರ್ಕ್‌ಫ್ಲೋ ಅನ್ನು ಸುಧಾರಿಸಲು CSS ಪ್ರಿಪ್ರೊಸೆಸರ್ ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ.
@log ಅಟ್-ರೂಲ್‌ನ ಮಿತಿಗಳು
@log ಒಂದು ಶಕ್ತಿಶಾಲಿ ಡೀಬಗ್ಗಿಂಗ್ ಸಾಧನವಾಗಿದ್ದರೂ, ಅದಕ್ಕೆ ಕೆಲವು ಮಿತಿಗಳಿವೆ:
- ಸೀಮಿತ ಬ್ರೌಸರ್ ಬೆಂಬಲ: ಪ್ರಮಾಣಿತವಲ್ಲದ ವೈಶಿಷ್ಟ್ಯವಾಗಿ,
@logಎಲ್ಲಾ ಬ್ರೌಸರ್‌ಗಳಿಂದ ಬೆಂಬಲಿತವಾಗಿಲ್ಲ. ಇದು ಪ್ರಾಥಮಿಕವಾಗಿ ಫೈರ್‌ಫಾಕ್ಸ್ ಮತ್ತು ಸಫಾರಿಯ ಡೆವಲಪರ್ ಪ್ರಿವ್ಯೂನಲ್ಲಿ ಲಭ್ಯವಿದೆ. - CSS ಸ್ಪೆಸಿಫಿಕೇಶನ್‌ನ ಭಾಗವಲ್ಲ:
@logಅಧಿಕೃತ CSS ಸ್ಪೆಸಿಫಿಕೇಶನ್‌ನ ಭಾಗವಲ್ಲ, ಅಂದರೆ ಭವಿಷ್ಯದಲ್ಲಿ ಇದನ್ನು ತೆಗೆದುಹಾಕಬಹುದು ಅಥವಾ ಬದಲಾಯಿಸಬಹುದು. - ಪ್ರಾಥಮಿಕವಾಗಿ ಡೆವಲಪ್‌ಮೆಂಟ್‌ಗಾಗಿ:
@logಅನ್ನು ಡೆವಲಪ್ಮೆಂಟ್ ಮತ್ತು ಡೀಬಗ್ಗಿಂಗ್ ಉದ್ದೇಶಗಳಿಗಾಗಿ ಮಾತ್ರ ಉದ್ದೇಶಿಸಲಾಗಿದೆ ಮತ್ತು ಪ್ರೊಡಕ್ಷನ್ ಕೋಡ್‌ನಲ್ಲಿ ಬಳಸಬಾರದು.
@log ಗೆ ಪರ್ಯಾಯಗಳು
@log ಅನ್ನು ಬೆಂಬಲಿಸದ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ನೀವು CSS ಅನ್ನು ಡೀಬಗ್ ಮಾಡಬೇಕಾದರೆ, ಅಥವಾ ನೀವು ಹೆಚ್ಚು ಸುಧಾರಿತ ಡೀಬಗ್ಗಿಂಗ್ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಹುಡುಕುತ್ತಿದ್ದರೆ, ನೀವು ಬಳಸಬಹುದಾದ ಹಲವಾರು ಪರ್ಯಾಯಗಳಿವೆ:
- ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಪರಿಕರಗಳು: ಎಲ್ಲಾ ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳು ಅಂತರ್ನಿರ್ಮಿತ ಡೆವಲಪರ್ ಪರಿಕರಗಳನ್ನು ಹೊಂದಿವೆ, ಅದು ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಪರಿಶೀಲಿಸಲು, ಅವುಗಳ ಗಣනය ಮಾಡಿದ ಸ್ಟೈಲ್‌ಗಳನ್ನು ವೀಕ್ಷಿಸಲು ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಡೀಬಗ್ ಮಾಡಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
@logಬಳಸುವಾಗಲೂ ಈ ಪರಿಕರಗಳು CSS ಡೀಬಗ್ಗಿಂಗ್‌ಗೆ ಅತ್ಯಗತ್ಯ. - CSS ಪ್ರಿಪ್ರೊಸೆಸರ್‌ಗಳು: Sass ಮತ್ತು Less ನಂತಹ CSS ಪ್ರಿಪ್ರೊಸೆಸರ್‌ಗಳು ಸೋರ್ಸ್ ಮ್ಯಾಪ್‌ಗಳು ಮತ್ತು ಮಿಕ್ಸಿನ್‌ಗಳಂತಹ ಹೆಚ್ಚು ಸುಧಾರಿತ ಡೀಬಗ್ಗಿಂಗ್ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ನೀಡುತ್ತವೆ. ಸೋರ್ಸ್ ಮ್ಯಾಪ್‌ಗಳು ನಿಮ್ಮ ಸಂಕಲಿಸಿದ CSS ಅನ್ನು ಮೂಲ Sass ಅಥವಾ Less ಫೈಲ್‌ಗಳಿಗೆ ಮ್ಯಾಪ್ ಮಾಡಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ, ಇದರಿಂದ ಸ್ಟೈಲಿಂಗ್ ಸಮಸ್ಯೆಗಳ ಮೂಲವನ್ನು ಗುರುತಿಸುವುದು ಸುಲಭವಾಗುತ್ತದೆ.
- ಲಿಂಟರ್‌ಗಳು ಮತ್ತು ಸ್ಟೈಲ್ ಚೆಕರ್‌ಗಳು: ಲಿಂಟರ್‌ಗಳು ಮತ್ತು ಸ್ಟೈಲ್ ಚೆಕರ್‌ಗಳು ನಿಮ್ಮ CSS ಕೋಡ್‌ನಲ್ಲಿ ಅಮಾನ್ಯ ಸಿಂಟ್ಯಾಕ್ಸ್, ಬಳಕೆಯಾಗದ ನಿಯಮಗಳು, ಮತ್ತು ಅಸಂಗತ ಫಾರ್ಮ್ಯಾಟಿಂಗ್‌ನಂತಹ ಸಂಭಾವ್ಯ ಸಮಸ್ಯೆಗಳನ್ನು ಗುರುತಿಸಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಈ ಪರಿಕರಗಳು ದೋಷಗಳನ್ನು ಮೊದಲೇ ಹಿಡಿಯಲು ಮತ್ತು ನಂತರ ಸಮಸ್ಯೆಗಳನ್ನು ಉಂಟುಮಾಡುವುದನ್ನು ತಡೆಯಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಜನಪ್ರಿಯ ಆಯ್ಕೆಗಳಲ್ಲಿ ಸ್ಟೈಲ್‌ಲಿಂಟ್ ಸೇರಿದೆ.
- CSS ಡೀಬಗ್ಗಿಂಗ್ ಪರಿಕರಗಳು: CSS ಪೀಪರ್ ಮತ್ತು ಸಿಜ್ಜಿಯಂತಹ ಹಲವಾರು ಮೀಸಲಾದ CSS ಡೀಬಗ್ಗಿಂಗ್ ಪರಿಕರಗಳು ಲಭ್ಯವಿದೆ. ಈ ಪರಿಕರಗಳು ದೃಶ್ಯ ವ್ಯತ್ಯಾಸ ಮತ್ತು ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸ ಪರೀಕ್ಷೆಯಂತಹ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ನೀಡುತ್ತವೆ, ಇದು ನಿಮಗೆ CSS ಅನ್ನು ಹೆಚ್ಚು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಡೀಬಗ್ ಮಾಡಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
CSS ಡೀಬಗ್ಗಿಂಗ್‌ನ ಭವಿಷ್ಯ
@log ಅಟ್-ರೂಲ್ ಹೆಚ್ಚು ಪರಿಣಾಮಕಾರಿ CSS ಡೀಬಗ್ಗಿಂಗ್‌ನತ್ತ ಒಂದು ಆಸಕ್ತಿದಾಯಕ ಹೆಜ್ಜೆಯನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ. ಅದರ ಪ್ರಸ್ತುತ ಅನುಷ್ಠಾನವು ಸೀಮಿತವಾಗಿದ್ದರೂ, ಡೆವಲಪರ್‌ಗಳಿಗೆ CSS ಕೋಡ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಮತ್ತು ನಿವಾರಿಸಲು ಉತ್ತಮ ಪರಿಕರಗಳ ಅಗತ್ಯವನ್ನು ಇದು ಎತ್ತಿ ತೋರಿಸುತ್ತದೆ. CSS ವಿಕಸನಗೊಳ್ಳುತ್ತಾ ಹೋದಂತೆ, ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಮತ್ತು ಮೀಸಲಾದ ಡೀಬಗ್ಗಿಂಗ್ ಪರಿಕರಗಳಲ್ಲಿ ಹೆಚ್ಚು ಸುಧಾರಿತ ಡೀಬಗ್ಗಿಂಗ್ ವೈಶಿಷ್ಟ್ಯಗಳು ಹೊರಹೊಮ್ಮುವುದನ್ನು ನಾವು ನಿರೀಕ್ಷಿಸಬಹುದು. CSS-in-JS ಮತ್ತು ವೆಬ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಂತಹ ತಂತ್ರಜ್ಞಾನಗಳಿಂದ ಚಾಲಿತವಾದ ಹೆಚ್ಚು ಡೈನಾಮಿಕ್ ಮತ್ತು ಸಂಕೀರ್ಣ ಸ್ಟೈಲಿಂಗ್‌ನತ್ತದ ಪ್ರವೃತ್ತಿಯು ಉತ್ತಮ ಡೀಬಗ್ಗಿಂಗ್ ಪರಿಹಾರಗಳಿಗಾಗಿ ಬೇಡಿಕೆಯನ್ನು ಮತ್ತಷ್ಟು ಹೆಚ್ಚಿಸುತ್ತದೆ. ಅಂತಿಮವಾಗಿ, ದೃಷ್ಟಿಗೆ ಬೆರಗುಗೊಳಿಸುವ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯುಳ್ಳ ವೆಬ್ ಅನುಭವಗಳನ್ನು ಹೆಚ್ಚಿನ ಸುಲಭ ಮತ್ತು ದಕ್ಷತೆಯೊಂದಿಗೆ ರಚಿಸಲು ಡೆವಲಪರ್‌ಗಳಿಗೆ ಅಗತ್ಯವಿರುವ ಒಳನೋಟಗಳು ಮತ್ತು ಪರಿಕರಗಳನ್ನು ಒದಗಿಸುವುದು ಗುರಿಯಾಗಿದೆ.
ತೀರ್ಮಾನ
CSS @log ಅಟ್-ರೂಲ್ CSS ಅನ್ನು ಡೀಬಗ್ ಮಾಡಲು ಒಂದು ಮೌಲ್ಯಯುತ ಸಾಧನವನ್ನು ನೀಡುತ್ತದೆ, CSS ವೇರಿಯಬಲ್ ಮೌಲ್ಯಗಳನ್ನು ನೇರವಾಗಿ ಬ್ರೌಸರ್ ಕನ್ಸೋಲ್‌ಗೆ ಲಾಗ್ ಮಾಡಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಇದು ಒಂದು ಪ್ರಮಾಣಿತವಲ್ಲದ ವೈಶಿಷ್ಟ್ಯವಾಗಿದೆ ಮತ್ತು ಪ್ರೊಡಕ್ಷನ್ ಕೋಡ್‌ನಿಂದ ತೆಗೆದುಹಾಕಬೇಕು ಎಂಬುದನ್ನು ನೆನಪಿಟ್ಟುಕೊಳ್ಳುವುದು ಮುಖ್ಯವಾದರೂ, ಡೆವಲಪ್ಮೆಂಟ್ ಸಮಯದಲ್ಲಿ ಇದು ನಿಮ್ಮ ಡೀಬಗ್ಗಿಂಗ್ ವರ್ಕ್‌ಫ್ಲೋ ಅನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಸುಧಾರಿಸಬಹುದು. @log ಅನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಹೇಗೆ ಬಳಸುವುದು ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸುವುದರ ಮೂಲಕ, ನೀವು ಸಮಯವನ್ನು ಉಳಿಸಬಹುದು, ನಿಮ್ಮ ಡೀಬಗ್ಗಿಂಗ್ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಸರಳಗೊಳಿಸಬಹುದು ಮತ್ತು ನಿಮ್ಮ CSS ಕೋಡ್‌ನ ಉತ್ತಮ ತಿಳುವಳಿಕೆಯನ್ನು ಪಡೆಯಬಹುದು.
@log ನ ಮಿತಿಗಳನ್ನು ಪರಿಗಣಿಸಲು ಮತ್ತು ಅಗತ್ಯವಿದ್ದಾಗ ಪರ್ಯಾಯ ಡೀಬಗ್ಗಿಂಗ್ ವಿಧಾನಗಳನ್ನು ಅನ್ವೇಷಿಸಲು ಮರೆಯದಿರಿ. ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಪರಿಕರಗಳು, CSS ಪ್ರಿಪ್ರೊಸೆಸರ್‌ಗಳು, ಲಿಂಟರ್‌ಗಳು, ಮತ್ತು ಮೀಸಲಾದ ಡೀಬಗ್ಗಿಂಗ್ ಪರಿಕರಗಳ ಸಂಯೋಜನೆಯೊಂದಿಗೆ, ನೀವು ಅತ್ಯಂತ ಸವಾಲಿನ CSS ಡೀಬಗ್ಗಿಂಗ್ ಸನ್ನಿವೇಶಗಳನ್ನು ಸಹ ಪರಿಣಾಮಕಾರಿಯಾಗಿ ನಿಭಾಯಿಸಬಹುದು. ಈ ಪರಿಕರಗಳು ಮತ್ತು ತಂತ್ರಗಳನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ಹೆಚ್ಚು ದಕ್ಷ ಮತ್ತು ಪರಿಣಾಮಕಾರಿ CSS ಡೆವಲಪರ್ ಆಗಬಹುದು.