Marketing Περιεχόμενο

Πώς να χρησιμοποιήσετε 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, μπορούμε να εμφανίσουμε μεμονωμένες εικόνες ως ξεχωριστά στοιχεία στη σελίδα. Ακολουθεί ένα παράδειγμα… έχουμε δύο κουμπιά σε ένα μόνο αρχείο εικόνας:

Παράδειγμα CSS 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 sprite ανοιχτό σκούρο

Χρησιμοποιώντας 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.

Douglas Karr

Douglas Karr είναι ΚΟΑ του OpenINSIGHTS και ο ιδρυτής του Martech Zone. Ο Ντάγκλας έχει βοηθήσει δεκάδες επιτυχημένες νεοφυείς επιχειρήσεις της MarTech, έχει βοηθήσει στη δέουσα επιμέλεια άνω των 5 δισεκατομμυρίων δολαρίων σε εξαγορές και επενδύσεις της Martech και συνεχίζει να βοηθά τις εταιρείες στην εφαρμογή και την αυτοματοποίηση των στρατηγικών πωλήσεων και μάρκετινγκ. Ο Ντάγκλας είναι ένας διεθνώς αναγνωρισμένος ειδικός και ομιλητής στον ψηφιακό μετασχηματισμό και στη MarTech. Ο Ντάγκλας είναι επίσης δημοσιευμένος συγγραφέας ενός οδηγού Dummie και ενός βιβλίου επιχειρηματικής ηγεσίας.

Σχετικά άρθρα

Επιστροφή στην κορυφή κουμπί
Κλεισιμο

Εντοπίστηκε μπλοκ διαφημίσεων

Martech Zone είναι σε θέση να σας παρέχει αυτό το περιεχόμενο χωρίς κόστος, επειδή δημιουργούμε έσοδα από τον ιστότοπό μας μέσω εσόδων από διαφημίσεις, συνδέσμων συνεργατών και χορηγιών. Θα εκτιμούσαμε εάν καταργούσατε το πρόγραμμα αποκλεισμού διαφημίσεων καθώς προβάλλετε τον ιστότοπό μας.