Πώς να χρησιμοποιήσετε CSS Sprites με Light and Dark Mode
CSS Τα sprites είναι μια τεχνική που χρησιμοποιείται στην ανάπτυξη Ιστού για τη μείωση του αριθμού των HTTP αιτήματα που γίνονται από μια ιστοσελίδα. Περιλαμβάνουν το συνδυασμό πολλών μικρών εικόνων σε ένα ενιαίο μεγαλύτερο αρχείο εικόνας και στη συνέχεια τη χρήση CSS για την εμφάνιση συγκεκριμένων τμημάτων αυτής της εικόνας ως μεμονωμένα στοιχεία στην ιστοσελίδα.
Το κύριο πλεονέκτημα της χρήσης CSS sprites είναι ότι μπορούν να βοηθήσουν στη βελτίωση του χρόνου φόρτωσης της σελίδας για έναν ιστότοπο. Κάθε φορά που μια εικόνα φορτώνεται σε μια ιστοσελίδα, απαιτεί ξεχωριστό αίτημα HTTP, το οποίο μπορεί να επιβραδύνει τη διαδικασία φόρτωσης. Συνδυάζοντας πολλές εικόνες σε μια μοναδική εικόνα sprite, μπορούμε να μειώσουμε τον αριθμό των αιτημάτων HTTP που απαιτούνται για τη φόρτωση της σελίδας. Αυτό μπορεί να οδηγήσει σε έναν πιο γρήγορο και πιο αποκριτικό ιστότοπο, ειδικά για ιστότοπους με πολλές μικρές εικόνες, όπως εικονίδια και κουμπιά.
Η χρήση CSS sprites μας επιτρέπει επίσης να εκμεταλλευόμαστε την προσωρινή αποθήκευση του προγράμματος περιήγησης. Όταν ένας χρήστης επισκέπτεται έναν ιστότοπο, το πρόγραμμα περιήγησής του θα αποθηκεύσει προσωρινά την εικόνα sprite μετά το πρώτο αίτημα. Αυτό σημαίνει ότι τα επόμενα αιτήματα για μεμονωμένα στοιχεία στην ιστοσελίδα που χρησιμοποιούν την εικόνα sprite θα είναι πολύ πιο γρήγορα αφού το πρόγραμμα περιήγησης θα έχει ήδη την εικόνα στην κρυφή μνήμη του.
Τα CSS Sprites δεν είναι τόσο δημοφιλή όσο ήταν κάποτε
Τα ξωτικά CSS εξακολουθούν να χρησιμοποιούνται συνήθως για τη βελτίωση της ταχύτητας του ιστότοπου, αν και μπορεί να μην είναι τόσο δημοφιλή όσο κάποτε. Λόγω του υψηλού εύρους ζώνης, webp μορφές, συμπίεση εικόνας, δίκτυα παράδοσης περιεχομένου (CDN), τεμπέλης φόρτωσης, να ισχυρή προσωρινή αποθήκευση τεχνολογίες, δεν βλέπουμε τόσα sprites CSS όπως παλιά στον Ιστό… αν και εξακολουθεί να είναι μια εξαιρετική στρατηγική. Είναι ιδιαίτερα χρήσιμο εάν έχετε μια σελίδα που αναφέρεται σε πολλές μικρές εικόνες.
Παράδειγμα CSS Sprite
Για να χρησιμοποιήσουμε ξωτικά CSS, πρέπει να ορίσουμε τη θέση κάθε μεμονωμένης εικόνας μέσα στο αρχείο εικόνας sprite χρησιμοποιώντας CSS. Αυτό γίνεται συνήθως με τη ρύθμιση του background-image
και background-position
ιδιότητες για κάθε στοιχείο στην ιστοσελίδα που χρησιμοποιεί την εικόνα sprite. Καθορίζοντας τις συντεταγμένες x και y της εικόνας μέσα στο sprite, μπορούμε να εμφανίσουμε μεμονωμένες εικόνες ως ξεχωριστά στοιχεία στη σελίδα. Ακολουθεί ένα παράδειγμα… έχουμε δύο κουμπιά σε ένα μόνο αρχείο εικόνας:
Αν θέλουμε να εμφανίζεται η εικόνα στα αριστερά, μπορούμε να παρέχουμε το div 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 για Light and Dark Mode
Μια ενδιαφέρουσα χρήση αυτού είναι με τις φωτεινές και σκοτεινές λειτουργίες. Ίσως έχετε ένα λογότυπο ή μια εικόνα με σκούρο κείμενο που δεν είναι ορατό σε σκούρο φόντο. Έκανα αυτό το παράδειγμα ενός κουμπιού που έχει ένα λευκό κέντρο για τη λειτουργία φωτός και ένα σκοτεινό κέντρο για τη σκοτεινή λειτουργία.
Χρησιμοποιώντας 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, οι οποίες χρησιμοποιούνται στο παράδειγμα που παρείχα για εναλλαγή μεταξύ φωτεινής και σκοτεινής λειτουργίας. Αυτό σημαίνει ότι μπορεί να χρειαστεί να χρησιμοποιήσετε εναλλακτικές τεχνικές για εναλλαγή μεταξύ διαφορετικών εκδόσεων της sprite εικόνας για διαφορετικούς συνδυασμούς χρωμάτων.
Ένας άλλος περιορισμός είναι ότι ορισμένα προγράμματα-πελάτες ηλεκτρονικού ταχυδρομείου δεν υποστηρίζουν ορισμένες ιδιότητες CSS που χρησιμοποιούνται συνήθως σε sprites CSS, όπως π.χ. background-position
. Αυτό μπορεί να δυσκολέψει την τοποθέτηση μεμονωμένων εικόνων μέσα στο αρχείο εικόνας sprite.