Οι μικρογραφίες είναι ένα από τα πιο καθαρά κομμάτια της χρηστικότητας που έχει δημιουργήσει η ψηφιακή εποχή. Στην ουσία μια μικρογραφία είναι μια προεπισκόπηση, μια υπόσχεση του τι θα δείτε αν κάνετε κλικ στο σύνδεσμο. Μια μικρή ματιά με λιγότερα δεδομένα, ταχύτερη φόρτωση και λιγότερο άπληστοι για την ακίνητη περιουσία από το πλήρες μέγεθος του περιουσιακού στοιχείου. Είναι ιδανικά για εικόνες, αλλά τι γίνεται με το βίντεο;
Λοιπόν, επεκτείνοντας μια τεχνική που χρησιμοποιούμε ήδη για τις καταστάσεις κουμπιών, μπορούμε να δημιουργήσουμε εκπληκτικές κινούμενες μικρογραφίες με βασικό CSS και λίγο jQuery.
Σήμερα, οι ταχύτητες λήψης δεν είναι ένα τέτοιο πρόβλημα για τους προγραμματιστές ιστού. Φυσικά, τα μικρά μεγέθη αρχείων είναι ακόμα επιθυμητά, αλλά η πραγματική απόδοση που επετεύχθη στα περισσότερα sites είναι ο αριθμός αιτήσεων HTTP. Κάθε φορά που ο ιστότοπός σας φορτώνει ένα στοιχείο, το πρόγραμμα περιήγησης κάνει μια αίτηση HTTP που αποστέλλεται, επεξεργάζεται και στη συνέχεια επιστρέφεται. Ελέγξτε την κονσόλα σας, θα δείτε ότι μεγάλο μέρος της καθυστέρησης στον ιστότοπό σας δεν έχει καμία σχέση με το μέγεθος της εικόνας, ξοδεύεται περιμένοντας την απάντηση του διακομιστή.
Η λύση είναι η τεχνική CSS sprite. συρραφή πολλαπλών εικόνων σε ένα αρχείο εικόνας και στη συνέχεια επιλεκτική εμφάνιση διαφορετικών τμημάτων της εικόνας χρησιμοποιώντας CSS.
Παραδοσιακά, για οποιοδήποτε κουμπί που δεν μπορούμε να δημιουργήσουμε με βασικά στυλ CSS, δημιουργήσαμε τρεις καταστάσεις. ένα εκτός , ένα πάνω και ένα κάτω :
.button{background:url('off-state.png');}.button:hover{background:url('over-state.png');}.button:active{background:url('down-state.png');}Αυτό θα οδηγούσε στη λήψη τριών εικόνων από το διακομιστή και την παραγωγή τριών αιτημάτων HTTP.
Χτίζοντας αυτό ως CSS sprite, αποθηκεύουμε και τις τρεις εικόνες το ένα δίπλα στο άλλο σε ένα αρχείο (έτσι ώστε αντί να έχουμε τρεις εικόνες πλάτους 200px έχουμε μια εικόνα πλάτους 600px) και να αλλάξουμε τη θέση της εικόνας χρησιμοποιώντας την ιδιότητα θέσης φόντου CSS :
.button{display:block;width:200px;height:83px;background:url('button-states.jpg');}.button:hover{background-position:-200px;}.button:active{background-position:-400px;}Σκεφτείτε το στοιχείο ως παράθυρο, μέσω του οποίου βλέπετε την εικόνα. Μπορείτε να μετακινήσετε την εικόνα γύρω, αλλά το παράθυρο παραμένει στην ίδια θέση. Υπό την προϋπόθεση ότι διασφαλίζετε ότι το στοιχείο έχει το ίδιο μέγεθος με το τμήμα της εικόνας που θέλετε να εμφανίσετε το εφέ είναι απρόσκοπτο: