CSS ಕಂಟೈನ್‌ಮೆಂಟ್‌ನೊಂದಿಗೆ ವೆಬ್ ಕಾರ್ಯಕ್ಷಮತೆ ಸುಧಾರಿಸಿ! ವೇಗದ ರೆಂಡರಿಂಗ್ ಮತ್ತು ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕಾಗಿ ಲೇಔಟ್ ಹಾಗೂ ಶೈಲಿ ಪ್ರತ್ಯೇಕತೆ ತಂತ್ರಗಳು. ಕಂಟೈನ್: ಲೇಔಟ್, ಸ್ಟೈಲ್, ಪೇಂಟ್, ಕಂಟೆಂಟ್ ಕುರಿತು ಮಾರ್ಗದರ್ಶಿ.
CSS ಕಂಟೈನ್‌ಮೆಂಟ್: ಕಾರ್ಯಕ್ಷಮತೆಗಾಗಿ ವಿನ್ಯಾಸ ಮತ್ತು ಶೈಲಿ ಪ್ರತ್ಯೇಕತೆ
ವೆಬ್ ಅಭಿವೃದ್ಧಿಯ ನಿರಂತರವಾಗಿ ವಿಕಸಿಸುತ್ತಿರುವ ಭೂದೃಶ್ಯದಲ್ಲಿ, ತಡೆರಹಿತ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ನೀಡುವಲ್ಲಿ ಕಾರ್ಯಕ್ಷಮತೆಯು ನಿರ್ಣಾಯಕ ಅಂಶವಾಗಿದೆ. ನಿಧಾನವಾಗಿ ಲೋಡ್ ಆಗುವ ವೆಬ್‌ಸೈಟ್‌ಗಳು ಮತ್ತು ಜ್ಯಾಂಕಿ ಇಂಟರಾಕ್ಷನ್‌ಗಳು ನಿರಾಶೆಗೊಂಡ ಬಳಕೆದಾರರಿಗೆ ಮತ್ತು ಅಂತಿಮವಾಗಿ, ತೊಡಗಿಸಿಕೊಳ್ಳುವಿಕೆಯ ನಷ್ಟಕ್ಕೆ ಕಾರಣವಾಗಬಹುದು. ವೆಬ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಉತ್ತಮಗೊಳಿಸಲು ಹಲವು ತಂತ್ರಗಳು ಅಸ್ತಿತ್ವದಲ್ಲಿದ್ದರೂ, CSS ಕಂಟೈನ್‌ಮೆಂಟ್ ಸಾಮಾನ್ಯವಾಗಿ ಕಡೆಗಣಿಸಲ್ಪಡುವ ಒಂದು ಶಕ್ತಿಶಾಲಿ ಸಾಧನವಾಗಿದೆ.
ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ CSS ಕಂಟೈನ್‌ಮೆಂಟ್ ಅನ್ನು ವಿವರವಾಗಿ ಅನ್ವೇಷಿಸುತ್ತದೆ, ಇದರ ಪ್ರಯೋಜನಗಳು, ಬಳಕೆಯ ಪ್ರಕರಣಗಳು ಮತ್ತು ಪ್ರಾಯೋಗಿಕ ಅನುಷ್ಠಾನವನ್ನು ವಿವರಿಸುತ್ತದೆ. ನಾವು ವಿವಿಧ ಕಂಟೈನ್‌ಮೆಂಟ್ ಮೌಲ್ಯಗಳನ್ನು ಆಳವಾಗಿ ಅಧ್ಯಯನ ಮಾಡುತ್ತೇವೆ, ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಭಾಗಗಳನ್ನು ಪ್ರತ್ಯೇಕಿಸಲು ಅವುಗಳನ್ನು ಹೇಗೆ ಬಳಸಬಹುದು ಎಂಬುದನ್ನು ವಿವರಿಸುತ್ತೇವೆ, ಇದು ವೇಗದ ರೆಂಡರಿಂಗ್ ಮತ್ತು ಸುಧಾರಿತ ಕಾರ್ಯಕ್ಷಮತೆಗೆ ಕಾರಣವಾಗುತ್ತದೆ.
CSS ಕಂಟೈನ್‌ಮೆಂಟ್ ಎಂದರೇನು?
CSS ಕಂಟೈನ್‌ಮೆಂಟ್ ಒಂದು CSS ಪ್ರಾಪರ್ಟಿಯಾಗಿದ್ದು, ಇದು DOM ಟ್ರೀಯ ನಿರ್ದಿಷ್ಟ ಭಾಗವನ್ನು ಪುಟದ ಉಳಿದ ಭಾಗದಿಂದ ಪ್ರತ್ಯೇಕಿಸಲು ಡೆವಲಪರ್‌ಗಳಿಗೆ ಅವಕಾಶ ನೀಡುತ್ತದೆ. ಈ ಪ್ರತ್ಯೇಕತೆಯು ಬ್ರೌಸರ್‌ಗೆ, ಕಂಟೈನ್ ಮಾಡಲಾದ ಎಲಿಮೆಂಟ್‌ನಲ್ಲಿನ ಬದಲಾವಣೆಗಳು ಅದರ ಹೊರಗಿನ ಎಲಿಮೆಂಟ್‌ಗಳ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರಬಾರದು ಮತ್ತು ಪ್ರತಿಯಾಗಿ, ಎಂದು ತಿಳಿಸುತ್ತದೆ. ಸ್ಟೈಲ್ ಮರು ಲೆಕ್ಕಾಚಾರಗಳು ಮತ್ತು ಲೇಔಟ್ ರಿಫ್ಲೋಗಳ ವ್ಯಾಪ್ತಿಯನ್ನು ಸೀಮಿತಗೊಳಿಸುವ ಮೂಲಕ, ಕಂಟೈನ್‌ಮೆಂಟ್ ರೆಂಡರಿಂಗ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಸುಧಾರಿಸುತ್ತದೆ, ವಿಶೇಷವಾಗಿ ಡೈನಾಮಿಕ್ ವಿಷಯವನ್ನು ಹೊಂದಿರುವ ಸಂಕೀರ್ಣ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ.
ಮೂಲಭೂತವಾಗಿ, ಕಂಟೈನ್‌ಮೆಂಟ್ ಬ್ರೌಸರ್‌ಗೆ ಹೀಗೆ ಹೇಳುತ್ತದೆ: "ಹೇ, ಈ ಎಲಿಮೆಂಟ್‌ನ ಒಳಗೆ ಏನಾದರೂ ಸಂಭವಿಸಿದರೆ ಅದು ಈ ಎಲಿಮೆಂಟ್‌ನ ಒಳಗೆಯೇ ಇರುತ್ತದೆ, ಮತ್ತು ಹೊರಗಿನ ಏನೂ ಅದರ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರಲು ಸಾಧ್ಯವಿಲ್ಲ." ಈ ತೋರಿಕೆಯಲ್ಲಿ ಸರಳವಾದ ಘೋಷಣೆಯು ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ಆಳವಾದ ಪರಿಣಾಮಗಳನ್ನು ಹೊಂದಿದೆ.
CSS ಕಂಟೈನ್‌ಮೆಂಟ್ ಏಕೆ ಮುಖ್ಯ?
ಕಂಟೈನ್‌ಮೆಂಟ್ ಇಲ್ಲದೆ, ಬದಲಾವಣೆಯು ಸಣ್ಣ ವಿಭಾಗಕ್ಕೆ ಸೀಮಿತವಾಗಿದ್ದರೂ ಸಹ, ಬದಲಾವಣೆಯಾದಾಗಲೆಲ್ಲಾ ಬ್ರೌಸರ್‌ಗಳು ಶೈಲಿಗಳನ್ನು ಮರು ಲೆಕ್ಕಾಚಾರ ಮಾಡಲು ಮತ್ತು ಸಂಪೂರ್ಣ ಪುಟವನ್ನು ರಿಫ್ಲೋ ಮಾಡಲು ಬಲವಂತಪಡಿಸುತ್ತವೆ. ಇದು ನಂಬಲಾಗದಷ್ಟು ಸಂಪನ್ಮೂಲ-ತೀವ್ರವಾಗಿರುತ್ತದೆ, ವಿಶೇಷವಾಗಿ ಅನೇಕ ನೆಸ್ಟೆಡ್ ಎಲಿಮೆಂಟ್‌ಗಳೊಂದಿಗೆ ಸಂಕೀರ್ಣ ಲೇಔಟ್‌ಗಳಿಗೆ. CSS ಕಂಟೈನ್‌ಮೆಂಟ್ ಈ ಸಮಸ್ಯೆಯನ್ನು ಈ ಕೆಳಗಿನವುಗಳ ಮೂಲಕ ಪರಿಹರಿಸುತ್ತದೆ:
- ಮರು ಲೆಕ್ಕಾಚಾರದ ವ್ಯಾಪ್ತಿಯನ್ನು ಕಡಿಮೆ ಮಾಡುವುದು: ಕಂಟೈನ್‌ಮೆಂಟ್ ಶೈಲಿ ಮರು ಲೆಕ್ಕಾಚಾರಗಳ ವ್ಯಾಪ್ತಿಯನ್ನು ಕಂಟೈನ್ ಮಾಡಲಾದ ಎಲಿಮೆಂಟ್ ಮತ್ತು ಅದರ ವಂಶಸ್ಥರಿಗೆ ಸೀಮಿತಗೊಳಿಸುತ್ತದೆ. ಕಂಟೈನ್ ಮಾಡಲಾದ ಎಲಿಮೆಂಟ್‌ನಲ್ಲಿನ ಬದಲಾವಣೆಗಳು ಸಂಪೂರ್ಣ ಪುಟಕ್ಕಾಗಿ ಮರು ಲೆಕ್ಕಾಚಾರಗಳನ್ನು ಪ್ರಚೋದಿಸುವುದಿಲ್ಲ.
- ರಿಫ್ಲೋಗಳನ್ನು ತಡೆಯುವುದು: ಅಂತೆಯೇ, ಕಂಟೈನ್‌ಮೆಂಟ್ ಲೇಔಟ್ ರಿಫ್ಲೋಗಳನ್ನು ಕಂಟೈನ್ ಮಾಡಲಾದ ಎಲಿಮೆಂಟ್ ಮೀರಿ ಹರಿಯುವುದನ್ನು ತಡೆಯುತ್ತದೆ. ಇದರರ್ಥ ಕಂಟೈನ್ ಮಾಡಲಾದ ಎಲಿಮೆಂಟ್‌ನ ಲೇಔಟ್‌ಗೆ ಮಾಡಿದ ಬದಲಾವಣೆಗಳು ಪುಟದ ಇತರ ಭಾಗಗಳ ಲೇಔಟ್ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುವುದಿಲ್ಲ.
- ರೆಂಡರಿಂಗ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸುವುದು: ಮರು ಲೆಕ್ಕಾಚಾರಗಳು ಮತ್ತು ರಿಫ್ಲೋಗಳನ್ನು ಕಡಿಮೆ ಮಾಡುವ ಮೂಲಕ, ಕಂಟೈನ್‌ಮೆಂಟ್ ರೆಂಡರಿಂಗ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಸುಧಾರಿಸುತ್ತದೆ, ಇದು ವೇಗದ ಲೋಡ್ ಸಮಯ ಮತ್ತು ಸುಗಮ ಇಂಟರಾಕ್ಷನ್‌ಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತದೆ.
- ಕೋಡ್ ನಿರ್ವಹಣೆಯನ್ನು ಹೆಚ್ಚಿಸುವುದು: ಕಂಟೈನ್‌ಮೆಂಟ್ ಮಾಡ್ಯುಲಾರಿಟಿ ಮತ್ತು ಎನ್‌ಕ್ಯಾಪ್ಸುಲೇಶನ್ ಅನ್ನು ಉತ್ತೇಜಿಸುತ್ತದೆ, ನಿಮ್ಮ CSS ಕೋಡ್ ಬಗ್ಗೆ ತಾರ್ಕಿಕವಾಗಿ ಯೋಚಿಸಲು ಮತ್ತು ನಿರ್ವಹಿಸಲು ಸುಲಭವಾಗುತ್ತದೆ. ಕಂಟೈನ್ ಮಾಡಲಾದ ಎಲಿಮೆಂಟ್‌ನಲ್ಲಿನ ಬದಲಾವಣೆಗಳು ಪುಟದ ಇತರ ಭಾಗಗಳ ಮೇಲೆ ಅನಪೇಕ್ಷಿತ ಅಡ್ಡಪರಿಣಾಮಗಳನ್ನು ಹೊಂದುವ ಸಾಧ್ಯತೆ ಕಡಿಮೆ.
ಕಂಟೈನ್‌ಮೆಂಟ್ ಮೌಲ್ಯಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು
‘contain’ ಪ್ರಾಪರ್ಟಿಯು ಹಲವಾರು ಮೌಲ್ಯಗಳನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ, ಪ್ರತಿಯೊಂದೂ ವಿಭಿನ್ನ ಮಟ್ಟದ ಪ್ರತ್ಯೇಕತೆಯನ್ನು ನೀಡುತ್ತದೆ:
- 'none': ಇದು ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯವಾಗಿದೆ. ಯಾವುದೇ ಕಂಟೈನ್‌ಮೆಂಟ್ ಅನ್ನು ಅನ್ವಯಿಸಲಾಗಿಲ್ಲ. ಎಲಿಮೆಂಟ್ ಮತ್ತು ಅದರ ವಿಷಯಗಳನ್ನು ಡಾಕ್ಯುಮೆಂಟ್ ಫ್ಲೋದಲ್ಲಿ ಸಾಮಾನ್ಯವೆಂದು ಪರಿಗಣಿಸಲಾಗುತ್ತದೆ.
- 'layout': ಈ ಮೌಲ್ಯವು ಎಲಿಮೆಂಟ್‌ನ ಲೇಔಟ್ ಅನ್ನು ಪ್ರತ್ಯೇಕಿಸುತ್ತದೆ. ಎಲಿಮೆಂಟ್‌ನ ಮಕ್ಕಳು ಗಾತ್ರ ಅಥವಾ ಸ್ಥಾನವನ್ನು ಬದಲಾಯಿಸಿದರೆ, ಅದು ಕಂಟೈನ್ ಮಾಡಲಾದ ಎಲಿಮೆಂಟ್‌ನ ಹೊರಗಿನ ಎಲಿಮೆಂಟ್‌ಗಳ ಲೇಔಟ್‌ಗೆ ಪರಿಣಾಮ ಬೀರುವುದಿಲ್ಲ. ಪುಟದ ಒಂದು ಭಾಗದಲ್ಲಿನ ಬದಲಾವಣೆಗಳು ಇತರ ಭಾಗಗಳ ಲೇಔಟ್‌ಗೆ ಪರಿಣಾಮ ಬೀರುವುದನ್ನು ತಡೆಯಲು ನೀವು ಬಯಸಿದಾಗ ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ.
- 'paint': ಈ ಮೌಲ್ಯವು ಎಲಿಮೆಂಟ್‌ನ ಪೇಂಟಿಂಗ್ ಅನ್ನು ಪ್ರತ್ಯೇಕಿಸುತ್ತದೆ. ಎಲಿಮೆಂಟ್‌ನ ವಿಷಯಗಳನ್ನು ಎಲಿಮೆಂಟ್‌ನ ಗಡಿಗಳಿಗೆ ಕ್ಲಿಪ್ ಮಾಡಲಾಗುತ್ತದೆ. ಇದು ಹೊರಗಿರುವ ಎಲಿಮೆಂಟ್‌ಗಳ ರೆಂಡರಿಂಗ್‌ಗೆ ಹರಿದುಹೋಗುವ ವಿಷಯವು ಪರಿಣಾಮ ಬೀರುವುದನ್ನು ತಡೆಯುತ್ತದೆ. ಇದು ಕಂಟೈನ್ ಮಾಡಲಾದ ಎಲಿಮೆಂಟ್‌ನ ಹೊರಗಿನ ಪ್ರದೇಶಗಳನ್ನು ಮರುಪೇಂಟ್ ಮಾಡಬೇಕಾದ ಅಗತ್ಯವನ್ನು ಬ್ರೌಸರ್‌ನಿಂದ ತಡೆಯುವ ಮೂಲಕ ರೆಂಡರಿಂಗ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ.
- 'style': ಈ ಮೌಲ್ಯವು ಎಲಿಮೆಂಟ್‌ನ ಶೈಲಿಗಳನ್ನು ಪ್ರತ್ಯೇಕಿಸುತ್ತದೆ. ಕಂಟೈನ್ ಮಾಡಲಾದ ಎಲಿಮೆಂಟ್‌ನ ಹೊರಗಿನ ಎಲಿಮೆಂಟ್‌ಗಳ ಶೈಲಿಗಳಿಗೆ ಮಾಡಿದ ಬದಲಾವಣೆಗಳು ಕಂಟೈನ್ ಮಾಡಲಾದ ಎಲಿಮೆಂಟ್ ಮತ್ತು ಅದರ ವಂಶಸ್ಥರ ಶೈಲಿಗಳ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುವುದಿಲ್ಲ. ತಮ್ಮದೇ ಆದ ಶೈಲಿಯನ್ನು ಹೊಂದಿರುವ ಪ್ರತ್ಯೇಕ ಘಟಕಗಳನ್ನು ರಚಿಸಲು ನೀವು ಬಯಸಿದಾಗ ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ.
- 'content': ಈ ಮೌಲ್ಯವು 'layout paint' ಗಾಗಿ ಸಂಕ್ಷಿಪ್ತ ರೂಪವಾಗಿದೆ. ಇದು ಲೇಔಟ್ ಮತ್ತು ಪೇಂಟ್ ಕಂಟೈನ್‌ಮೆಂಟ್ ಎರಡನ್ನೂ ಅನ್ವಯಿಸುತ್ತದೆ, ಲೇಔಟ್ ಪ್ರತ್ಯೇಕತೆ ಮತ್ತು ಕ್ಲಿಪ್ಪಿಂಗ್ ಸಂಯೋಜನೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ.
- 'strict': ಈ ಮೌಲ್ಯವು 'layout paint style size' ಗಾಗಿ ಸಂಕ್ಷಿಪ್ತ ರೂಪವಾಗಿದೆ. ಇದು ಲೇಔಟ್, ಪೇಂಟ್ ಮತ್ತು ಸ್ಟೈಲ್ ಕಂಟೈನ್‌ಮೆಂಟ್ ಅನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ, ಮತ್ತು ಎಲಿಮೆಂಟ್ 'size: auto' ಹೊಂದಿದೆ ಎಂಬಂತೆ ಅದನ್ನು ಪರಿಗಣಿಸುತ್ತದೆ. 'size' ಕೀವರ್ಡ್ ಪ್ರಾಯೋಗಿಕವಾಗಿದೆ ಮತ್ತು ಅದರ ನಡವಳಿಕೆಯು ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಭಿನ್ನವಾಗಿರಬಹುದು.
ಈ ಪ್ರತಿಯೊಂದು ಮೌಲ್ಯಗಳನ್ನು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳೊಂದಿಗೆ ಹೆಚ್ಚು ವಿವರವಾಗಿ ಅನ್ವೇಷಿಸೋಣ.
'contain: layout'
ಈ ಮೌಲ್ಯವು ಎಲಿಮೆಂಟ್‌ನ ಲೇಔಟ್ ಅನ್ನು ಪ್ರತ್ಯೇಕಿಸುತ್ತದೆ. ಎಲಿಮೆಂಟ್‌ನ ಮಕ್ಕಳು ಗಾತ್ರ ಅಥವಾ ಸ್ಥಾನವನ್ನು ಬದಲಾಯಿಸಿದರೆ, ಅದು ಕಂಟೈನ್ ಮಾಡಲಾದ ಎಲಿಮೆಂಟ್‌ನ ಹೊರಗೆ ರಿಫ್ಲೋ ಅನ್ನು ಪ್ರಚೋದಿಸುವುದಿಲ್ಲ.
ಉದಾಹರಣೆ: ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಮೇಲ್ಭಾಗದಲ್ಲಿ ನ್ಯಾವಿಗೇಷನ್ ಬಾರ್ ಅನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ಬಳಕೆದಾರರು ನ್ಯಾವಿಗೇಷನ್ ಬಾರ್‌ನಲ್ಲಿರುವ ಒಂದು ವಿಭಾಗವನ್ನು ವಿಸ್ತರಿಸುವ ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದರೆ, ಆ ವಿಸ್ತರಣೆಯು ಕೆಳಗಿನ ಮುಖ್ಯ ವಿಷಯದ ಲೇಔಟ್‌ಗೆ ಪರಿಣಾಮ ಬೀರಲು ನೀವು ಬಯಸುವುದಿಲ್ಲ. ನ್ಯಾವಿಗೇಷನ್ ಬಾರ್‌ಗೆ 'contain: layout' ಅನ್ನು ಅನ್ವಯಿಸುವುದು ಇದನ್ನು ತಡೆಯುತ್ತದೆ.
.navbar {
contain: layout;
/* Other styles */
}
'contain: layout' ಇಲ್ಲದೆ, ನ್ಯಾವಿಗೇಷನ್ ಬಾರ್ ಅನ್ನು ವಿಸ್ತರಿಸುವುದರಿಂದ ಮುಖ್ಯ ವಿಷಯವು ಕೆಳಕ್ಕೆ ಸರಿಯಬಹುದು, ಇದು ಕಿರಿಕಿರಿಯುಂಟುಮಾಡುವ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ. ಕಂಟೈನ್‌ಮೆಂಟ್‌ನೊಂದಿಗೆ, ಮುಖ್ಯ ವಿಷಯವು ಅಡಚಣೆಯಾಗದೆ ಇರುತ್ತದೆ.
'contain: paint'
ಈ ಮೌಲ್ಯವು ಎಲಿಮೆಂಟ್‌ನ ಪೇಂಟಿಂಗ್ ಅನ್ನು ಪ್ರತ್ಯೇಕಿಸುತ್ತದೆ. ಎಲಿಮೆಂಟ್‌ನ ವಿಷಯವು ಅದರ ಗಡಿಗಳಿಗೆ ಕ್ಲಿಪ್ ಆಗುತ್ತದೆ, ಮತ್ತು ಎಲಿಮೆಂಟ್‌ನ ವಿಷಯ ಬದಲಾದಾಗ ಅದರ ಹೊರಗಿನ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಮರುಪೇಂಟ್ ಮಾಡಲಾಗುವುದಿಲ್ಲ.
ಉದಾಹರಣೆ: ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಮುಖ್ಯ ವಿಷಯದ ಮೇಲೆ ಅತಿಕ್ರಮಿಸುವ ಮೋಡಲ್ ವಿಂಡೋವನ್ನು ಪರಿಗಣಿಸಿ. ಮೋಡಲ್ ವಿಂಡೋ ತೆರೆದಾಗ, ಮೋಡಲ್‌ನಲ್ಲಿನ ಬದಲಾವಣೆಗಳು (ಉದಾಹರಣೆಗೆ, ಅನಿಮೇಷನ್‌ಗಳು ಅಥವಾ ವಿಷಯ ನವೀಕರಣಗಳು) ಹಿನ್ನೆಲೆ ವಿಷಯದ ಮರುಪೇಂಟ್‌ಗಳನ್ನು ಪ್ರಚೋದಿಸಲು ನೀವು ಬಯಸುವುದಿಲ್ಲ. ಮೋಡಲ್ ವಿಂಡೋಗೆ 'contain: paint' ಅನ್ನು ಅನ್ವಯಿಸುವುದು ಇದನ್ನು ಸಾಧಿಸುತ್ತದೆ.
.modal {
contain: paint;
/* Other styles */
}
ಅನಿಮೇಷನ್‌ಗಳು ಅಥವಾ ಆಗಾಗ್ಗೆ ನವೀಕರಿಸುವ ಡೈನಾಮಿಕ್ ವಿಷಯವನ್ನು ಹೊಂದಿರುವ ಎಲಿಮೆಂಟ್‌ಗಳಿಗೆ ಇದು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ. ಅನಗತ್ಯ ಮರುಪೇಂಟ್‌ಗಳನ್ನು ತಡೆಯುವ ಮೂಲಕ, 'contain: paint' ರೆಂಡರಿಂಗ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಸುಧಾರಿಸುತ್ತದೆ.
'contain: style'
ಈ ಮೌಲ್ಯವು ಎಲಿಮೆಂಟ್‌ನ ಶೈಲಿಗಳನ್ನು ಪ್ರತ್ಯೇಕಿಸುತ್ತದೆ. ಕಂಟೈನ್ ಮಾಡಲಾದ ಎಲಿಮೆಂಟ್‌ನ ಹೊರಗೆ ಅನ್ವಯಿಸಲಾದ ಶೈಲಿಗಳು ಕಂಟೈನ್ ಮಾಡಲಾದ ಎಲಿಮೆಂಟ್ ಅಥವಾ ಅದರ ವಂಶಸ್ಥರ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುವುದಿಲ್ಲ.
ಉದಾಹರಣೆ: ನಿಮ್ಮದೇ ಆದ ಸ್ವಯಂ-ನಿರ್ಭರ ಶೈಲಿಯನ್ನು ಹೊಂದಿರುವ ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ UI ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ರಚಿಸಲು ನೀವು 'contain: style' ಅನ್ನು ಬಳಸಬಹುದು. ಇದು ಜಾಗತಿಕ ಶೈಲಿಗಳು ಕಾಂಪೊನೆಂಟ್‌ನ ಶೈಲಿಗಳನ್ನು ಆಕಸ್ಮಿಕವಾಗಿ ಅತಿಕ್ರಮಿಸುವುದನ್ನು ತಡೆಯುತ್ತದೆ, ಪುಟದಲ್ಲಿ ಎಲ್ಲಿ ಬಳಸಿದರೂ ಕಾಂಪೊನೆಂಟ್ ಸ್ಥಿರವಾಗಿ ಕಾಣುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.
.component {
contain: style;
/* Component-specific styles */
}
ಕೋಡ್‌ಬೇಸ್‌ನ ವಿವಿಧ ಭಾಗಗಳಲ್ಲಿ ಕೆಲಸ ಮಾಡುವ ಅನೇಕ ಡೆವಲಪರ್‌ಗಳನ್ನು ಹೊಂದಿರುವ ದೊಡ್ಡ ಯೋಜನೆಗಳಲ್ಲಿ ಇದು ವಿಶೇಷವಾಗಿ ಮೌಲ್ಯಯುತವಾಗಿದೆ. ಇದು ಶೈಲಿ ಎನ್‌ಕ್ಯಾಪ್ಸುಲೇಶನ್ ಅನ್ನು ಜಾರಿಗೊಳಿಸಲು ಮತ್ತು ಅನಪೇಕ್ಷಿತ ಶೈಲಿ ಸಂಘರ್ಷಗಳನ್ನು ತಡೆಯಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
'contain: content'
ಈ ಮೌಲ್ಯವು 'contain: layout paint' ಗಾಗಿ ಸಂಕ್ಷಿಪ್ತ ರೂಪವಾಗಿದೆ. ಇದು ಲೇಔಟ್ ಮತ್ತು ಪೇಂಟ್ ಕಂಟೈನ್‌ಮೆಂಟ್ ಎರಡನ್ನೂ ಅನ್ವಯಿಸುತ್ತದೆ, ಲೇಔಟ್ ಪ್ರತ್ಯೇಕತೆ ಮತ್ತು ಕ್ಲಿಪ್ಪಿಂಗ್ ಸಂಯೋಜನೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ.
ಉದಾಹರಣೆ: ವೆಬ್‌ಪುಟದ ವಿಭಾಗಗಳನ್ನು ಪ್ರತ್ಯೇಕಿಸಲು ಇದು ಸಾಮಾನ್ಯವಾಗಿ ಬಳಸುವ ಮೌಲ್ಯವಾಗಿದೆ. ಸಾಮಾಜಿಕ ಮಾಧ್ಯಮ ಸೈಟ್‌ನಲ್ಲಿನ ಸುದ್ದಿ ಫೀಡ್ ಅನ್ನು ಪರಿಗಣಿಸಿ. ಫೀಡ್‌ನಲ್ಲಿನ ಪ್ರತಿ ಪೋಸ್ಟ್‌ಗೆ 'contain: content' ಅನ್ನು ಅನ್ವಯಿಸಬಹುದು. ಇದು ಒಂದು ಪೋಸ್ಟ್ ಅನ್ನು ಸೇರಿಸುವುದು ಅಥವಾ ಮಾರ್ಪಡಿಸುವುದು ಸಂಪೂರ್ಣ ಫೀಡ್ ಅನ್ನು ರಿಫ್ಲೋ ಮಾಡಲು ಅಥವಾ ಮರುಪೇಂಟ್ ಮಾಡಲು ಕಾರಣವಾಗುವುದಿಲ್ಲ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ, ಇದು ಸ್ಕ್ರೋಲಿಂಗ್ ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ಪ್ರತಿಕ್ರಿಯಾಶೀಲತೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ.
.news-post {
contain: content;
/* Other styles */
}
'contain: strict'
ಈ ಮೌಲ್ಯವು 'contain: layout paint style size' ಗಾಗಿ ಸಂಕ್ಷಿಪ್ತ ರೂಪವಾಗಿದೆ. ಇದು ಲೇಔಟ್, ಪೇಂಟ್ ಮತ್ತು ಸ್ಟೈಲ್ ಕಂಟೈನ್‌ಮೆಂಟ್ ಅನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ, ಮತ್ತು ಎಲಿಮೆಂಟ್ 'size: auto' ಹೊಂದಿದೆ ಎಂಬಂತೆ ಅದನ್ನು ಪರಿಗಣಿಸುತ್ತದೆ. ಈ ಮೌಲ್ಯವು ಹೆಚ್ಚು ನಿರ್ಬಂಧಿತವಾಗಿದೆ ಮತ್ತು ಪ್ರಬಲವಾದ ಪ್ರತ್ಯೇಕತೆಯ ಮಟ್ಟವನ್ನು ಒದಗಿಸುತ್ತದೆ. 'size' ಕೀವರ್ಡ್ ಪ್ರಾಯೋಗಿಕವಾಗಿದೆ ಮತ್ತು ಅದರ ನಡವಳಿಕೆಯು ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಭಿನ್ನವಾಗಿರಬಹುದು.
ಉದಾಹರಣೆ: ದೊಡ್ಡ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ಸಂಪೂರ್ಣವಾಗಿ ಪ್ರತ್ಯೇಕವಾದ ವಿಜೆಟ್ ಅನ್ನು ರಚಿಸುವುದನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. 'strict' ಮೌಲ್ಯವು ವಿಜೆಟ್ ಸಂಪೂರ್ಣವಾಗಿ ಸ್ವಯಂ-ನಿರ್ಭರವಾಗಿದೆ ಮತ್ತು ಯಾವುದೇ ಬಾಹ್ಯ ಶೈಲಿಗಳು ಅಥವಾ ಲೇಔಟ್ ಬದಲಾವಣೆಗಳಿಂದ ಪ್ರಭಾವಿತವಾಗುವುದಿಲ್ಲ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಹೋಸ್ಟ್ ಪುಟದ ಶೈಲಿಯೊಂದಿಗೆ ಹಸ್ತಕ್ಷೇಪ ಮಾಡದೆ ವಿವಿಧ ವೆಬ್‌ಸೈಟ್‌ಗಳಲ್ಲಿ ಅಳವಡಿಸಬೇಕಾದ ಮೂರನೇ-ಪಕ್ಷದ ವಿಜೆಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಇದು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ.
.widget {
contain: strict;
/* Widget-specific styles */
}
ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳು ಮತ್ತು ಬಳಕೆಯ ಪ್ರಕರಣಗಳು
ನೈಜ-ಪ್ರಪಂಚದ ಸನ್ನಿವೇಶಗಳಲ್ಲಿ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸಲು ನೀವು CSS ಕಂಟೈನ್‌ಮೆಂಟ್ ಅನ್ನು ಹೇಗೆ ಬಳಸಬಹುದು ಎಂಬುದಕ್ಕೆ ಕೆಲವು ಹೆಚ್ಚು ಸ್ಪಷ್ಟ ಉದಾಹರಣೆಗಳು ಇಲ್ಲಿವೆ:
- ಅನಂತ ಸ್ಕ್ರೋಲಿಂಗ್ ಪಟ್ಟಿಗಳು: ಹೊಸ ಐಟಂಗಳು ಲೋಡ್ ಆದಾಗ ರಿಫ್ಲೋಗಳು ಮತ್ತು ಮರುಪೇಂಟ್‌ಗಳನ್ನು ತಡೆಯಲು ಪಟ್ಟಿಯಲ್ಲಿನ ಪ್ರತಿ ಐಟಂಗೆ 'contain: content' ಅನ್ನು ಅನ್ವಯಿಸಿ. ಇದು ಸ್ಕ್ರೋಲಿಂಗ್ ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ಪ್ರತಿಕ್ರಿಯಾಶೀಲತೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ, ವಿಶೇಷವಾಗಿ ಮೊಬೈಲ್ ಸಾಧನಗಳಲ್ಲಿ.
- ಸಂಕೀರ್ಣ ಫಾರ್ಮ್‌ಗಳು: ಒಂದು ಫೀಲ್ಡ್‌ನಲ್ಲಿನ ಬದಲಾವಣೆಗಳು ಇತರ ಫೀಲ್ಡ್‌ಗಳ ಲೇಔಟ್‌ಗೆ ಪರಿಣಾಮ ಬೀರುವುದನ್ನು ತಡೆಯಲು ವೈಯಕ್ತಿಕ ಫಾರ್ಮ್ ಫೀಲ್ಡ್‌ಗಳು ಅಥವಾ ಫಾರ್ಮ್‌ನ ವಿಭಾಗಗಳಲ್ಲಿ 'contain: layout' ಅನ್ನು ಬಳಸಿ. ಇದು ಅನೇಕ ಇನ್‌ಪುಟ್ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಹೊಂದಿರುವ ಫಾರ್ಮ್‌ಗಳ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಸುಧಾರಿಸುತ್ತದೆ.
- ಮೂರನೇ-ಪಕ್ಷದ ವಿಜೆಟ್‌ಗಳು: ಮೂರನೇ-ಪಕ್ಷದ ವಿಜೆಟ್‌ಗಳಿಗೆ 'contain: strict' ಅನ್ನು ಅನ್ವಯಿಸಿ, ಅವು ಹೋಸ್ಟ್ ಪುಟದ ಶೈಲಿ ಮತ್ತು ಲೇಔಟ್‌ನಿಂದ ಸಂಪೂರ್ಣವಾಗಿ ಪ್ರತ್ಯೇಕವಾಗಿವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಇದು ಸಂಘರ್ಷಗಳನ್ನು ತಡೆಯುತ್ತದೆ ಮತ್ತು ವಿಜೆಟ್ ವಿವಿಧ ವೆಬ್‌ಸೈಟ್‌ಗಳಲ್ಲಿ ಸ್ಥಿರವಾಗಿ ಕಾಣುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.
- ವೆಬ್ ಘಟಕಗಳು: CSS ಕಂಟೈನ್‌ಮೆಂಟ್ ವೆಬ್ ಘಟಕಗಳೊಂದಿಗೆ ಅಸಾಧಾರಣವಾಗಿ ಉತ್ತಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. 'contain: style' ಅನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಶ್ಯಾಡೋ DOM ಒಳಗೆ ಶೈಲಿಗಳು ಒಳಗೆ ಅಥವಾ ಹೊರಗೆ ಹರಿಯುವುದನ್ನು ತಡೆಯಲು ಬಳಸಲಾಗುತ್ತದೆ, ಇದು ನಿಜವಾಗಿಯೂ ಎನ್‌ಕ್ಯಾಪ್ಸುಲೇಟೆಡ್ ಘಟಕಗಳನ್ನು ರಚಿಸುತ್ತದೆ.
- ಡೈನಾಮಿಕ್ ಚಾರ್ಟ್‌ಗಳು ಮತ್ತು ಗ್ರಾಫ್‌ಗಳು: ಚಾರ್ಟ್ ಕಂಟೇನರ್‌ನಲ್ಲಿ 'contain: paint' ಅನ್ನು ಬಳಸಿ. ಡೇಟಾ ನವೀಕರಿಸಿದಾಗ ಮತ್ತು ಚಾರ್ಟ್ ಮರು-ರಚಿಸಬೇಕಾದಾಗ, ಸಂಪೂರ್ಣ ಸುತ್ತಮುತ್ತಲಿನ ಪುಟವಲ್ಲದೆ, ಚಾರ್ಟ್ ಪ್ರದೇಶ ಮಾತ್ರ ಮರುಪೇಂಟ್ ಆಗುತ್ತದೆ.
ಬ್ರೌಸರ್ ಬೆಂಬಲ
CSS ಕಂಟೈನ್‌ಮೆಂಟ್ ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳಾದ Chrome, Firefox, Safari ಮತ್ತು Edge ಗಳಲ್ಲಿ ಉತ್ತಮ ಬ್ರೌಸರ್ ಬೆಂಬಲವನ್ನು ಹೊಂದಿದೆ. ಆದಾಗ್ಯೂ, ನೀವು ಗುರಿಪಡಿಸುತ್ತಿರುವ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ನೀವು ಬಳಸುತ್ತಿರುವ ವೈಶಿಷ್ಟ್ಯಗಳು ಬೆಂಬಲಿತವಾಗಿದೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು Can I Use ನಂತಹ ವೆಬ್‌ಸೈಟ್‌ಗಳಲ್ಲಿನ ಇತ್ತೀಚಿನ ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ ಕೋಷ್ಟಕಗಳನ್ನು ಪರಿಶೀಲಿಸುವುದು ಯಾವಾಗಲೂ ಉತ್ತಮವಾಗಿದೆ.
ಎಚ್ಚರಿಕೆಗಳು ಮತ್ತು ಪರಿಗಣನೆಗಳು
CSS ಕಂಟೈನ್‌ಮೆಂಟ್ ಒಂದು ಶಕ್ತಿಶಾಲಿ ಸಾಧನವಾಗಿದ್ದರೂ, ಅದನ್ನು ವಿವೇಚನೆಯಿಂದ ಬಳಸಿಕೊಳ್ಳುವುದು ಮುಖ್ಯ. ಕಂಟೈನ್‌ಮೆಂಟ್ ಅನ್ನು ಆಲೋಚನೆಪೂರ್ವಕವಾಗಿ ಅನ್ವಯಿಸದಿದ್ದರೆ, ಅದನ್ನು ಅತಿಯಾಗಿ ಬಳಸುವುದರಿಂದ ಕಾರ್ಯಕ್ಷಮತೆಗೆ ಹಾನಿಯಾಗಬಹುದು.
- ಅತಿಯಾದ ಕಂಟೈನ್‌ಮೆಂಟ್ ಅನ್ನು ತಪ್ಪಿಸಿ: ಪುಟದಲ್ಲಿನ ಪ್ರತಿ ಎಲಿಮೆಂಟ್‌ಗೆ ಕಂಟೈನ್‌ಮೆಂಟ್ ಅನ್ನು ಅನ್ವಯಿಸುವುದು ಸಾಮಾನ್ಯವಾಗಿ ಉತ್ತಮ ಕಲ್ಪನೆಯಲ್ಲ. ಪುಟದ ನಿರ್ದಿಷ್ಟ ಪ್ರದೇಶಗಳನ್ನು ಪ್ರತ್ಯೇಕಿಸಲು ಮತ್ತು ಅನಗತ್ಯ ಮರು ಲೆಕ್ಕಾಚಾರಗಳು ಮತ್ತು ರಿಫ್ಲೋಗಳನ್ನು ತಡೆಯಲು ನಿಜವಾಗಿಯೂ ಅಗತ್ಯವಿರುವಲ್ಲಿ ಮಾತ್ರ ಕಂಟೈನ್‌ಮೆಂಟ್ ಅನ್ನು ಬಳಸಿ.
- ಸಮಗ್ರವಾಗಿ ಪರೀಕ್ಷಿಸಿ: ಕಂಟೈನ್‌ಮೆಂಟ್ ಅನ್ನು ಅನ್ವಯಿಸಿದ ನಂತರ ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಯಾವಾಗಲೂ ಸಮಗ್ರವಾಗಿ ಪರೀಕ್ಷಿಸಿ, ಅದು ನಿಜವಾಗಿಯೂ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸುತ್ತಿದೆಯೇ ಹೊರತು ಯಾವುದೇ ಅನಿರೀಕ್ಷಿತ ಅಡ್ಡಪರಿಣಾಮಗಳನ್ನು ಪರಿಚಯಿಸುತ್ತಿಲ್ಲ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ರೆಂಡರಿಂಗ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಅಳೆಯಲು ಮತ್ತು ಸಂಭಾವ್ಯ ಅಡಚಣೆಗಳನ್ನು ಗುರುತಿಸಲು ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಪರಿಕರಗಳನ್ನು ಬಳಸಿ.
- ಪರಿಣಾಮವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ: ಪ್ರತಿ ಕಂಟೈನ್‌ಮೆಂಟ್ ಮೌಲ್ಯವನ್ನು ಅನ್ವಯಿಸುವ ಮೊದಲು ಅದರ ಪರಿಣಾಮಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಮುಖ್ಯ. ಉದಾಹರಣೆಗೆ, 'contain: paint' ಅನ್ನು ಬಳಸುವುದರಿಂದ ಎಲಿಮೆಂಟ್‌ನ ವಿಷಯವನ್ನು ಕ್ಲಿಪ್ ಮಾಡುತ್ತದೆ, ಆದ್ದರಿಂದ ಎಲಿಮೆಂಟ್ ಅದರ ವಿಷಯವನ್ನು ಹೊಂದಿಸಲು ಸಾಕಷ್ಟು ದೊಡ್ಡದಾಗಿದೆ ಎಂದು ನೀವು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಬೇಕು.
ಕಾರ್ಯಕ್ಷಮತೆ ಸುಧಾರಣೆಗಳನ್ನು ಅಳೆಯುವುದು
CSS ಕಂಟೈನ್‌ಮೆಂಟ್ ಅನ್ನು ಅನ್ವಯಿಸುವ ಮೊದಲು ಮತ್ತು ನಂತರ, ಕಾರ್ಯಕ್ಷಮತೆಯ ಪರಿಣಾಮವನ್ನು ಅಳೆಯುವುದು ನಿರ್ಣಾಯಕವಾಗಿದೆ. ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಪರಿಕರಗಳು ರೆಂಡರಿಂಗ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ವಿಶ್ಲೇಷಿಸಲು ವಿವಿಧ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ನೀಡುತ್ತವೆ, ಅವುಗಳೆಂದರೆ:
- ಕಾರ್ಯಕ್ಷಮತೆ ಟ್ಯಾಬ್: Chrome DevTools, Firefox Developer Tools ಮತ್ತು ಇತರ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿನ ಕಾರ್ಯಕ್ಷಮತೆ ಟ್ಯಾಬ್, ರೆಂಡರಿಂಗ್, ಸ್ಕ್ರಿಪ್ಟಿಂಗ್ ಮತ್ತು ನೆಟ್‌ವರ್ಕ್ ವಿನಂತಿಗಳನ್ನು ಒಳಗೊಂಡಂತೆ ಬ್ರೌಸರ್ ಚಟುವಟಿಕೆಯ ಟೈಮ್‌ಲೈನ್ ಅನ್ನು ರೆಕಾರ್ಡ್ ಮಾಡಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಇದು ಕಾರ್ಯಕ್ಷಮತೆಯ ಅಡಚಣೆಗಳು ಮತ್ತು ಆಪ್ಟಿಮೈಸೇಶನ್ ಕ್ಷೇತ್ರಗಳ ಬಗ್ಗೆ ಮೌಲ್ಯಯುತ ಒಳನೋಟಗಳನ್ನು ನೀಡುತ್ತದೆ.
- ರೆಂಡರಿಂಗ್ ಅಂಕಿಅಂಶಗಳು: Chrome DevTools ಪ್ರತಿ ಸೆಕೆಂಡಿಗೆ ಫ್ರೇಮ್‌ಗಳ ಸಂಖ್ಯೆ (FPS), ರೆಂಡರಿಂಗ್‌ನಲ್ಲಿ ಕಳೆದ ಸಮಯ ಮತ್ತು ಪೇಂಟ್ ಈವೆಂಟ್‌ಗಳ ಸಂಖ್ಯೆಯನ್ನು ತೋರಿಸುವ ರೆಂಡರಿಂಗ್ ಅಂಕಿಅಂಶಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ. ಕಂಟೈನ್‌ಮೆಂಟ್ ಹೆಚ್ಚಿನ ಪರಿಣಾಮವನ್ನು ಬೀರುತ್ತಿರುವ ಪ್ರದೇಶಗಳನ್ನು ಗುರುತಿಸಲು ಇದು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ.
- ಲೈಟ್‌ಹೌಸ್: ಲೈಟ್‌ಹೌಸ್ ವೆಬ್ ಪುಟಗಳ ಕಾರ್ಯಕ್ಷಮತೆ, ಪ್ರವೇಶಸಾಧ್ಯತೆ ಮತ್ತು SEO ಅನ್ನು ಆಡಿಟ್ ಮಾಡುವ ಒಂದು ಸ್ವಯಂಚಾಲಿತ ಸಾಧನವಾಗಿದೆ. ಇದು CSS ಕಂಟೈನ್‌ಮೆಂಟ್ ಬಳಕೆಯನ್ನು ಒಳಗೊಂಡಂತೆ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸಲು ಸಲಹೆಗಳನ್ನು ನೀಡುತ್ತದೆ.
ಈ ಪರಿಕರಗಳನ್ನು ಬಳಸುವ ಮೂಲಕ, CSS ಕಂಟೈನ್‌ಮೆಂಟ್ ಅನ್ನು ಅನ್ವಯಿಸುವುದರಿಂದ ಸಾಧಿಸಿದ ಕಾರ್ಯಕ್ಷಮತೆ ಸುಧಾರಣೆಗಳನ್ನು ನೀವು ವಸ್ತುನಿಷ್ಠವಾಗಿ ಅಳೆಯಬಹುದು ಮತ್ತು ಅತ್ಯುತ್ತಮ ಫಲಿತಾಂಶಗಳಿಗಾಗಿ ನಿಮ್ಮ ಅನುಷ್ಠಾನವನ್ನು ಉತ್ತಮಗೊಳಿಸಬಹುದು.
CSS ಕಂಟೈನ್‌ಮೆಂಟ್ ಮತ್ತು ಪ್ರವೇಶಸಾಧ್ಯತೆ
CSS ಕಂಟೈನ್‌ಮೆಂಟ್ ಅನ್ನು ಬಳಸುವಾಗ, ಪ್ರವೇಶಸಾಧ್ಯತೆಯನ್ನು ಪರಿಗಣಿಸುವುದು ಅತ್ಯಗತ್ಯ. 'contain: paint' ಅನ್ನು ಅನ್ವಯಿಸುವುದರಿಂದ ವಿಷಯವನ್ನು ಕ್ಲಿಪ್ ಮಾಡಬಹುದು, ಇದು ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳು ಅಥವಾ ಇತರ ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳನ್ನು ಅವಲಂಬಿಸಿರುವ ಬಳಕೆದಾರರಿಗೆ ಪ್ರವೇಶಿಸಲಾಗದಂತೆ ಮಾಡಬಹುದು. ಕಂಟೈನ್‌ಮೆಂಟ್ ಅನ್ನು ಅನ್ವಯಿಸಿದಾಗಲೂ ಪ್ರಮುಖ ವಿಷಯವು ಸಂಪೂರ್ಣವಾಗಿ ಪ್ರವೇಶಸಾಧ್ಯವಾಗಿರುವುದನ್ನು ಯಾವಾಗಲೂ ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಕಂಟೈನ್‌ಮೆಂಟ್ ಅನ್ನು ಅಳವಡಿಸಿದ ನಂತರ ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳೊಂದಿಗೆ ನಿಮ್ಮ ಸೈಟ್ ಅನ್ನು ಎಚ್ಚರಿಕೆಯಿಂದ ಪರೀಕ್ಷಿಸಿ.
ನೈಜ-ಪ್ರಪಂಚದ ಅಂತರರಾಷ್ಟ್ರೀಯ ಉದಾಹರಣೆಗಳು
CSS ಕಂಟೈನ್‌ಮೆಂಟ್‌ನ ಪ್ರಯೋಜನಗಳು ಸಾರ್ವತ್ರಿಕವಾಗಿವೆ, ಆದರೆ ಇದು ವಿವಿಧ ರೀತಿಯ ಅಂತರರಾಷ್ಟ್ರೀಯ ವೆಬ್‌ಸೈಟ್‌ಗಳಿಗೆ ಹೇಗೆ ಅನ್ವಯಿಸಬಹುದು ಎಂಬುದನ್ನು ಪರಿಗಣಿಸೋಣ:
- ಇ-ಕಾಮರ್ಸ್ ಸೈಟ್ (ಜಾಗತಿಕ): ವಿಶ್ವಾದ್ಯಂತ ಉತ್ಪನ್ನಗಳನ್ನು ಮಾರಾಟ ಮಾಡುವ ದೊಡ್ಡ ಇ-ಕಾಮರ್ಸ್ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್, ನೂರಾರು ಐಟಂಗಳೊಂದಿಗೆ ವರ್ಗ ಪುಟಗಳ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸಲು ವೈಯಕ್ತಿಕ ಉತ್ಪನ್ನ ಪಟ್ಟಿಗಳಲ್ಲಿ 'contain: content' ಅನ್ನು ಬಳಸಬಹುದು. ಕಂಟೈನ್‌ಮೆಂಟ್‌ನೊಂದಿಗೆ ಸಂಯೋಜಿತವಾಗಿರುವ ಲೇಜಿ-ಲೋಡಿಂಗ್ ಚಿತ್ರಗಳು ಹೆಚ್ಚಿನ ರೆಸಲ್ಯೂಶನ್ ಉತ್ಪನ್ನ ಫೋಟೋಗಳೊಂದಿಗೆ ಸಹ ಸುಗಮ ಬ್ರೌಸಿಂಗ್ ಅನುಭವವನ್ನು ಸೃಷ್ಟಿಸುತ್ತವೆ.
- ಸುದ್ದಿ ವೆಬ್‌ಸೈಟ್ (ಬಹುಭಾಷಾ): ಬಹು ಭಾಷೆಗಳಲ್ಲಿ ಲೇಖನಗಳನ್ನು ಹೊಂದಿರುವ ಸುದ್ದಿ ವೆಬ್‌ಸೈಟ್, ಒಂದು ಭಾಷೆಯ ಲೇಔಟ್‌ನಲ್ಲಿನ ಬದಲಾವಣೆಗಳು ಇತರ ವಿಭಾಗಗಳ ಲೇಔಟ್‌ಗೆ ಪರಿಣಾಮ ಬೀರುವುದನ್ನು ತಡೆಯಲು ಪುಟದ ವಿವಿಧ ವಿಭಾಗಗಳಲ್ಲಿ (ಉದಾಹರಣೆಗೆ, ಹೆಡರ್, ಸೈಡ್‌ಬಾರ್, ಮುಖ್ಯ ವಿಷಯ) 'contain: layout' ಅನ್ನು ಬಳಸಬಹುದು. ವಿಭಿನ್ನ ಭಾಷೆಗಳು ಸಾಮಾನ್ಯವಾಗಿ ವಿಭಿನ್ನ ಅಕ್ಷರ ಉದ್ದಗಳನ್ನು ಹೊಂದಿರುತ್ತವೆ, ಇದು ಲೇಔಟ್ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುತ್ತದೆ.
- ಸಾಮಾಜಿಕ ಮಾಧ್ಯಮ ವೇದಿಕೆ (ಅಂತರರಾಷ್ಟ್ರೀಯ ಬಳಕೆದಾರರು): ಸಾಮಾಜಿಕ ಮಾಧ್ಯಮ ವೇದಿಕೆಯು ವೈಯಕ್ತಿಕ ಪೋಸ್ಟ್‌ಗಳಲ್ಲಿ 'contain: paint' ಅನ್ನು ಬಳಸಬಹುದು, ಪೋಸ್ಟ್‌ನಲ್ಲಿನ ಅನಿಮೇಷನ್‌ಗಳು ಅಥವಾ ಡೈನಾಮಿಕ್ ವಿಷಯವು ಸಂಪೂರ್ಣ ಫೀಡ್‌ನ ಮರುಪೇಂಟ್‌ಗಳನ್ನು ಪ್ರಚೋದಿಸುವುದನ್ನು ತಡೆಯಲು. ಇದು ವಿಶ್ವಾದ್ಯಂತ ಬಳಕೆದಾರರಿಗೆ, ವಿಶೇಷವಾಗಿ ನಿಧಾನಗತಿಯ ಇಂಟರ್ನೆಟ್ ಸಂಪರ್ಕಗಳನ್ನು ಹೊಂದಿರುವವರಿಗೆ ಸ್ಕ್ರೋಲಿಂಗ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ.
- ಸರ್ಕಾರಿ ವೆಬ್‌ಸೈಟ್ (ಪ್ರವೇಶಸಾಧ್ಯ): ವೈವಿಧ್ಯಮಯ ಹಿನ್ನೆಲೆಯ ನಾಗರಿಕರಿಗೆ ಮಾಹಿತಿಯನ್ನು ಒದಗಿಸುವ ಸರ್ಕಾರಿ ವೆಬ್‌ಸೈಟ್ ಅತ್ಯಂತ ಪ್ರವೇಶಸಾಧ್ಯವಾಗಿರಬೇಕು. ಕಂಟೈನ್ ಅನ್ನು ಅನ್ವಯಿಸಿದಾಗಲೂ ಪ್ರವೇಶಸಾಧ್ಯತೆಯನ್ನು ಕಾಪಾಡಿಕೊಳ್ಳಲು ಸರಿಯಾದ ARIA ಗುಣಲಕ್ಷಣಗಳು ಅಸ್ತಿತ್ವದಲ್ಲಿವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
ತೀರ್ಮಾನ
ವೆಬ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಉತ್ತಮಗೊಳಿಸಲು ಮತ್ತು ಸುಗಮ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ರಚಿಸಲು CSS ಕಂಟೈನ್‌ಮೆಂಟ್ ಒಂದು ಮೌಲ್ಯಯುತ ಸಾಧನವಾಗಿದೆ. ವಿವಿಧ ಕಂಟೈನ್‌ಮೆಂಟ್ ಮೌಲ್ಯಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ ಮತ್ತು ಅವುಗಳನ್ನು ವಿವೇಚನೆಯಿಂದ ಅನ್ವಯಿಸುವ ಮೂಲಕ, ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಭಾಗಗಳನ್ನು ನೀವು ಪ್ರತ್ಯೇಕಿಸಬಹುದು, ಮರು ಲೆಕ್ಕಾಚಾರಗಳು ಮತ್ತು ರಿಫ್ಲೋಗಳನ್ನು ಕಡಿಮೆ ಮಾಡಬಹುದು ಮತ್ತು ರೆಂಡರಿಂಗ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸಬಹುದು. ಸಂಪೂರ್ಣವಾಗಿ ಪರೀಕ್ಷಿಸಲು, ಪ್ರವೇಶಸಾಧ್ಯತೆಯನ್ನು ಪರಿಗಣಿಸಲು ಮತ್ತು ಬಯಸಿದ ಫಲಿತಾಂಶಗಳನ್ನು ನೀವು ಸಾಧಿಸುತ್ತಿದ್ದೀರಿ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಕಂಟೈನ್‌ಮೆಂಟ್‌ನ ಪರಿಣಾಮವನ್ನು ಅಳೆಯಲು ಮರೆಯದಿರಿ.
ವಿಶ್ವಾದ್ಯಂತ ಬಳಕೆದಾರರಿಗಾಗಿ ವೇಗವಾಗಿ, ಹೆಚ್ಚು ಪ್ರತಿಕ್ರಿಯಾಶೀಲ, ಮತ್ತು ಹೆಚ್ಚು ನಿರ್ವಹಿಸಬಹುದಾದ ವೆಬ್‌ಸೈಟ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು CSS ಕಂಟೈನ್‌ಮೆಂಟ್ ಅನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಿ.