ಲೈಟ್ ಮತ್ತು ಡಾರ್ಕ್ ಮೋಡ್ನೊಂದಿಗೆ CSS Sprites ಅನ್ನು ಹೇಗೆ ಬಳಸುವುದು
ಸಿಎಸ್ಎಸ್ sprites ಸಂಖ್ಯೆಯನ್ನು ಕಡಿಮೆ ಮಾಡಲು ವೆಬ್ ಅಭಿವೃದ್ಧಿಯಲ್ಲಿ ಬಳಸುವ ತಂತ್ರವಾಗಿದೆ HTTP ವೆಬ್ ಪುಟದಿಂದ ಮಾಡಿದ ವಿನಂತಿಗಳು. ಅವು ಬಹು ಚಿಕ್ಕ ಚಿತ್ರಗಳನ್ನು ಒಂದೇ ದೊಡ್ಡ ಇಮೇಜ್ ಫೈಲ್ ಆಗಿ ಸಂಯೋಜಿಸುವುದನ್ನು ಒಳಗೊಂಡಿರುತ್ತವೆ ಮತ್ತು ಆ ಚಿತ್ರದ ನಿರ್ದಿಷ್ಟ ವಿಭಾಗಗಳನ್ನು ವೆಬ್ ಪುಟದಲ್ಲಿ ಪ್ರತ್ಯೇಕ ಅಂಶಗಳಾಗಿ ಪ್ರದರ್ಶಿಸಲು CSS ಅನ್ನು ಬಳಸುತ್ತವೆ.
CSS ಸ್ಪ್ರಿಟ್ಗಳನ್ನು ಬಳಸುವ ಪ್ರಾಥಮಿಕ ಪ್ರಯೋಜನವೆಂದರೆ ಅವರು ವೆಬ್ಸೈಟ್ಗಾಗಿ ಪುಟ ಲೋಡ್ ಸಮಯವನ್ನು ಸುಧಾರಿಸಲು ಸಹಾಯ ಮಾಡಬಹುದು. ಪ್ರತಿ ಬಾರಿ ವೆಬ್ ಪುಟದಲ್ಲಿ ಚಿತ್ರವನ್ನು ಲೋಡ್ ಮಾಡಿದಾಗ, ಅದಕ್ಕೆ ಪ್ರತ್ಯೇಕ HTTP ವಿನಂತಿಯ ಅಗತ್ಯವಿರುತ್ತದೆ, ಇದು ಲೋಡಿಂಗ್ ಪ್ರಕ್ರಿಯೆಯನ್ನು ನಿಧಾನಗೊಳಿಸುತ್ತದೆ. ಬಹು ಚಿತ್ರಗಳನ್ನು ಒಂದೇ ಸ್ಪ್ರೈಟ್ ಚಿತ್ರಕ್ಕೆ ಸಂಯೋಜಿಸುವ ಮೂಲಕ, ಪುಟವನ್ನು ಲೋಡ್ ಮಾಡಲು ಅಗತ್ಯವಿರುವ HTTP ವಿನಂತಿಗಳ ಸಂಖ್ಯೆಯನ್ನು ನಾವು ಕಡಿಮೆ ಮಾಡಬಹುದು. ಇದು ವೇಗವಾದ ಮತ್ತು ಹೆಚ್ಚು ಸ್ಪಂದಿಸುವ ವೆಬ್ಸೈಟ್ಗೆ ಕಾರಣವಾಗಬಹುದು, ವಿಶೇಷವಾಗಿ ಐಕಾನ್ಗಳು ಮತ್ತು ಬಟನ್ಗಳಂತಹ ಅನೇಕ ಸಣ್ಣ ಚಿತ್ರಗಳನ್ನು ಹೊಂದಿರುವ ಸೈಟ್ಗಳಿಗೆ.
CSS ಸ್ಪ್ರಿಟ್ಗಳನ್ನು ಬಳಸುವುದರಿಂದ ಬ್ರೌಸರ್ ಕ್ಯಾಶಿಂಗ್ನ ಲಾಭವನ್ನು ಪಡೆಯಲು ನಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಬಳಕೆದಾರರು ವೆಬ್ಸೈಟ್ಗೆ ಭೇಟಿ ನೀಡಿದಾಗ, ಅವರ ಬ್ರೌಸರ್ ಮೊದಲ ವಿನಂತಿಯ ನಂತರ ಸ್ಪ್ರೈಟ್ ಚಿತ್ರವನ್ನು ಸಂಗ್ರಹಿಸುತ್ತದೆ. ಇದರರ್ಥ ಸ್ಪ್ರೈಟ್ ಇಮೇಜ್ ಅನ್ನು ಬಳಸುತ್ತಿರುವ ವೆಬ್ ಪುಟದಲ್ಲಿನ ಪ್ರತ್ಯೇಕ ಅಂಶಗಳಿಗಾಗಿ ನಂತರದ ವಿನಂತಿಗಳು ಹೆಚ್ಚು ವೇಗವಾಗಿರುತ್ತದೆ ಏಕೆಂದರೆ ಬ್ರೌಸರ್ ಈಗಾಗಲೇ ಅದರ ಸಂಗ್ರಹದಲ್ಲಿ ಚಿತ್ರವನ್ನು ಹೊಂದಿರುತ್ತದೆ.
ಸಿಎಸ್ಎಸ್ ಸ್ಪ್ರೈಟ್ಗಳು ಒಮ್ಮೆ ಇದ್ದಷ್ಟು ಜನಪ್ರಿಯವಾಗಿಲ್ಲ
ಸೈಟ್ ವೇಗವನ್ನು ಸುಧಾರಿಸಲು ಸಿಎಸ್ಎಸ್ ಸ್ಪ್ರಿಟ್ಗಳನ್ನು ಇನ್ನೂ ಸಾಮಾನ್ಯವಾಗಿ ಬಳಸಲಾಗುತ್ತದೆ, ಆದಾಗ್ಯೂ ಅವುಗಳು ಮೊದಲಿನಷ್ಟು ಜನಪ್ರಿಯವಾಗಿಲ್ಲ. ಹೆಚ್ಚಿನ ಬ್ಯಾಂಡ್ವಿಡ್ತ್ ಕಾರಣ, ವೆಬ್ಪಿ ಸ್ವರೂಪಗಳು, ಇಮೇಜ್ ಕಂಪ್ರೆಷನ್, ವಿಷಯ ವಿತರಣಾ ಜಾಲಗಳು (ಸಿಡಿಎನ್), ಸೋಮಾರಿಯಾದ ಲೋಡಿಂಗ್, ಮತ್ತು ಬಲವಾದ ಹಿಡಿದಿಟ್ಟುಕೊಳ್ಳುವಿಕೆ ತಂತ್ರಜ್ಞಾನಗಳು, ನಾವು ವೆಬ್ನಲ್ಲಿ ಬಳಸಿದಷ್ಟು CSS ಸ್ಪ್ರೈಟ್ಗಳನ್ನು ನಾವು ನೋಡುವುದಿಲ್ಲ… ಆದರೂ ಇದು ಇನ್ನೂ ಉತ್ತಮ ತಂತ್ರವಾಗಿದೆ. ನೀವು ಬಹುಸಂಖ್ಯೆಯ ಸಣ್ಣ ಚಿತ್ರಗಳನ್ನು ಉಲ್ಲೇಖಿಸುವ ಪುಟವನ್ನು ಹೊಂದಿದ್ದರೆ ಇದು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ.
CSS ಸ್ಪ್ರೈಟ್ ಉದಾಹರಣೆ
CSS ಸ್ಪ್ರೈಟ್ಗಳನ್ನು ಬಳಸಲು, ನಾವು CSS ಅನ್ನು ಬಳಸಿಕೊಂಡು ಸ್ಪ್ರೈಟ್ ಇಮೇಜ್ ಫೈಲ್ನಲ್ಲಿ ಪ್ರತಿಯೊಂದು ಚಿತ್ರದ ಸ್ಥಾನವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಬೇಕಾಗಿದೆ. ಇದನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಹೊಂದಿಸುವ ಮೂಲಕ ಮಾಡಲಾಗುತ್ತದೆ background-image
ಮತ್ತು background-position
ಸ್ಪ್ರೈಟ್ ಚಿತ್ರವನ್ನು ಬಳಸುವ ವೆಬ್ ಪುಟದಲ್ಲಿನ ಪ್ರತಿಯೊಂದು ಅಂಶದ ಗುಣಲಕ್ಷಣಗಳು. ಸ್ಪ್ರೈಟ್ನಲ್ಲಿ ಚಿತ್ರದ x ಮತ್ತು y ನಿರ್ದೇಶಾಂಕಗಳನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುವ ಮೂಲಕ, ನಾವು ಪ್ರತ್ಯೇಕ ಚಿತ್ರಗಳನ್ನು ಪುಟದಲ್ಲಿ ಪ್ರತ್ಯೇಕ ಅಂಶಗಳಾಗಿ ಪ್ರದರ್ಶಿಸಬಹುದು. ಒಂದು ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ... ನಾವು ಒಂದೇ ಇಮೇಜ್ ಫೈಲ್ನಲ್ಲಿ ಎರಡು ಬಟನ್ಗಳನ್ನು ಹೊಂದಿದ್ದೇವೆ:
ಎಡಭಾಗದಲ್ಲಿರುವ ಚಿತ್ರವನ್ನು ಪ್ರದರ್ಶಿಸಲು ನಾವು ಬಯಸಿದರೆ, ನಾವು ಡಿವ್ ಅನ್ನು ಒದಗಿಸಬಹುದು arrow-left
ವರ್ಗವಾಗಿ ಆದ್ದರಿಂದ ನಿರ್ದೇಶಾಂಕಗಳು ಆ ಭಾಗವನ್ನು ಮಾತ್ರ ಪ್ರದರ್ಶಿಸುತ್ತವೆ:
.arrow-left {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat 0 0;
}
ಮತ್ತು ನಾವು ಸರಿಯಾದ ಬಾಣವನ್ನು ಪ್ರದರ್ಶಿಸಲು ಬಯಸಿದರೆ, ನಾವು ನಮ್ಮ div ಗೆ ವರ್ಗವನ್ನು ಹೊಂದಿಸುತ್ತೇವೆ arrow-right
.
.arrow-right {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat -200px 0;
}
ಲೈಟ್ ಮತ್ತು ಡಾರ್ಕ್ ಮೋಡ್ಗಾಗಿ CSS Sprites
ಇದರ ಒಂದು ಆಸಕ್ತಿದಾಯಕ ಬಳಕೆ ಬೆಳಕು ಮತ್ತು ಗಾಢ ವಿಧಾನಗಳೊಂದಿಗೆ. ಬಹುಶಃ ನೀವು ಲೋಗೋ ಅಥವಾ ಚಿತ್ರವನ್ನು ಹೊಂದಿರುವಿರಿ, ಅದು ಡಾರ್ಕ್ ಹಿನ್ನೆಲೆಯಲ್ಲಿ ಗೋಚರಿಸುವುದಿಲ್ಲ. ಲೈಟ್ ಮೋಡ್ಗಾಗಿ ಬಿಳಿ ಕೇಂದ್ರ ಮತ್ತು ಡಾರ್ಕ್ ಮೋಡ್ಗಾಗಿ ಡಾರ್ಕ್ ಸೆಂಟರ್ ಹೊಂದಿರುವ ಬಟನ್ನ ಈ ಉದಾಹರಣೆಯನ್ನು ನಾನು ಮಾಡಿದ್ದೇನೆ.
CSS ಬಳಸಿಕೊಂಡು, ಬಳಕೆದಾರರು ಲೈಟ್ ಮೋಡ್ ಅಥವಾ ಡಾರ್ಕ್ ಮೋಡ್ ಅನ್ನು ಬಳಸುತ್ತಿದ್ದಾರೆಯೇ ಎಂಬುದನ್ನು ಆಧರಿಸಿ ನಾನು ಸೂಕ್ತವಾದ ಚಿತ್ರದ ಹಿನ್ನೆಲೆಯನ್ನು ಪ್ರದರ್ಶಿಸಬಹುದು:
:root {
--sprite-image: url('sprite.png');
--sprite-width: 200px;
--sprite-height: 400px;
--sprite-x-light: 0;
--sprite-y-light: 0;
--sprite-x-dark: -200px;
--sprite-y-dark: 0;
}
@media (prefers-color-scheme: dark) {
:root {
--sprite-x-light: 200px;
--sprite-x-dark: 0;
}
}
.icon {
width: 32px;
height: 32px;
background: var(--sprite-image) no-repeat var(--sprite-x-light) var(--sprite-y-light);
}
.icon:hover {
background-position: var(--sprite-x-dark) var(--sprite-y-dark);
}
ವಿನಾಯಿತಿ: ಇಮೇಲ್ ಗ್ರಾಹಕರು ಇದನ್ನು ಬೆಂಬಲಿಸದಿರಬಹುದು
Gmail ನಂತಹ ಕೆಲವು ಇಮೇಲ್ ಕ್ಲೈಂಟ್ಗಳು CSS ವೇರಿಯೇಬಲ್ಗಳನ್ನು ಬೆಂಬಲಿಸುವುದಿಲ್ಲ, ಇವುಗಳನ್ನು ನಾನು ಲೈಟ್ ಮತ್ತು ಡಾರ್ಕ್ ಮೋಡ್ಗಳ ನಡುವೆ ಬದಲಾಯಿಸಲು ಒದಗಿಸಿದ ಉದಾಹರಣೆಯಲ್ಲಿ ಬಳಸಲಾಗಿದೆ. ಇದರರ್ಥ ನೀವು ವಿವಿಧ ಬಣ್ಣದ ಯೋಜನೆಗಳಿಗಾಗಿ ಸ್ಪ್ರೈಟ್ ಚಿತ್ರದ ವಿವಿಧ ಆವೃತ್ತಿಗಳ ನಡುವೆ ಬದಲಾಯಿಸಲು ಪರ್ಯಾಯ ತಂತ್ರಗಳನ್ನು ಬಳಸಬೇಕಾಗಬಹುದು.
ಮತ್ತೊಂದು ಮಿತಿಯೆಂದರೆ ಕೆಲವು ಇಮೇಲ್ ಕ್ಲೈಂಟ್ಗಳು CSS ಸ್ಪ್ರೈಟ್ಗಳಲ್ಲಿ ಸಾಮಾನ್ಯವಾಗಿ ಬಳಸುವ ಕೆಲವು CSS ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬೆಂಬಲಿಸುವುದಿಲ್ಲ, ಉದಾಹರಣೆಗೆ background-position
. ಸ್ಪ್ರೈಟ್ ಇಮೇಜ್ ಫೈಲ್ನಲ್ಲಿ ಪ್ರತ್ಯೇಕ ಚಿತ್ರಗಳನ್ನು ಇರಿಸಲು ಇದು ಕಷ್ಟಕರವಾಗಿಸುತ್ತದೆ.