Η ελαχιστοποίηση του μεγέθους αρχείων του φύλλου στυλ CSS θεωρήθηκε από πολλούς ως έναν καλό τρόπο να αυξήσετε την ταχύτητα φόρτωσης του ιστότοπού σας. Πράγματι, μειώνοντας το αρχείο CSS κατά αρκετά κιλοβάτ, ο διακομιστής θα πάρει έναν μικρότερο χρόνο για να φορτώσει και θα οδηγήσει σε μια γρηγορότερη ιστοσελίδα.
Σε περίπτωση που τα άρθρα σας χτυπηθούν στην αρχική σελίδα του Digg, αυτό θα μπορούσε επίσης να είναι ένας από τους λίγους αποφασιστικούς παράγοντες (υπάρχουν πολλά περισσότερα) αν ο διακομιστής σας θα διακοπεί ή όχι.
Μερικές από τις πιο κοινές μεθόδους που χρησιμοποιούνται για την ελαχιστοποίηση / βελτιστοποίηση ενός φύλλου στυλ CSS περιλαμβάνουν την εξάλειψη των αχρησιμοποίητων επιλογέων, των ανεπιθύμητων κενών διαστημάτων, των καρτελών, των σχολίων και την αλλαγή της δήλωσης μακράς διαρκείας σε συντομογραφίες.
Ξέρω ότι μερικοί από εσάς εδώ δεν είστε αρκετά κατανοητοί από την τεχνολογία για να επεξεργαστείτε τον δικό σας κώδικα CSS, γι 'αυτό θα σας δώσω μερικά από τα χρήσιμα εργαλεία που μπορείτε να χρησιμοποιήσετε για να βελτιστοποιήσετε τον κώδικα CSS, ακόμα κι αν δεν έχετε πλήρη γνώση CSS κωδικοποίηση.
Ελέγξτε τον κώδικα CSS
Validator W3C CSS
Το Validator W3C CSS είναι ένα εργαλείο που μπορείτε να χρησιμοποιήσετε για την επικύρωση του CSS. Μπορείτε είτε να κατεβάσετε τον επικυρωτή Java στον υπολογιστή σας και να τον χρησιμοποιήσετε εκτός σύνδεσης, είτε να χρησιμοποιήσετε την online φόρμα για να ελέγξετε τον κωδικό σας CSS.
CSS Validator Προσθήκη Firefox
Για να διευκολύνετε την επαλήθευση του κώδικα CSS, υπάρχει αυτή η επέκταση του Firefox - Validator CSS - που μπορείτε να εγκαταστήσετε στο πρόγραμμα περιήγησης. Μόλις εγκατασταθεί, μπορείτε εύκολα και γρήγορα να ελέγξετε τον κώδικα σας με δεξί κλικ του ποντικιού.
CSSCheck
Παρόλο που ο κωδικός σας CSS είναι επικυρωμένος, δεν σημαίνει ότι δεν είναι λάθος. Η επικύρωση σημαίνει μόνο ότι συμμορφώνεται με τα πρότυπα CSS που ορίζονται από το W3C. Αν θέλετε να επικυρώσετε καθώς και να εξετάσετε μερικά θέματα συμβατότητας με το φύλλο στυλ σας, τότε το CSSCheck είναι ένα καλό εργαλείο για εσάς.
Αναλυτής CSS
Ο Αναλυτής CSS είναι ένα χρήσιμο εργαλείο που σας επιτρέπει να επικυρώσετε το φύλλο στυλ σας σύμφωνα με το πρότυπο του W3C, να εκτελέσετε μια δοκιμή αντίθεσης χρωμάτων και μια δοκιμή για να βεβαιωθείτε ότι τα σχετικά μεγέθη καθορίζονται σε σχετικές μονάδες μέτρησης.
Σε περίπτωση που αναρωτιέστε, η δοκιμή αντίθεσης χρώματος είναι να ελέγξετε ότι οι συνδυασμοί χρωμάτων προσκηνίου και φόντου παρέχουν επαρκή αντίθεση όταν προβληθούν από κάποιον που έχει χρωματικά ελλείμματα ή όταν προβάλλεται σε ασπρόμαυρη οθόνη.
Καθαρίστε τον κώδικα CSS
Συσκευές επιλογής σκόνης
Ο Dust-Me Selectors είναι μια επέκταση του Firefox που βρίσκει αχρησιμοποίητους επιλογείς CSS στη σελίδα που βλέπετε. Καθώς δοκιμάζετε τις επόμενες σελίδες του ίδιου τομέα, το αποτέλεσμα διασταυρώνεται με τα προηγούμενα δεδομένα και οι τυχόν επιλογείς που συναντώνται διαχωρίζονται από τη λίστα. Μπορείτε να το χρησιμοποιήσετε για να δοκιμάσετε μεμονωμένες σελίδες ή να το πάρετε σε αράχνη ολόκληρου του ιστότοπου.
Τελικά, θα λάβετε μια αναφορά σχετικά με τους επιλογείς που δεν χρησιμοποιούνται οπουδήποτε στον ιστότοπο. Στη συνέχεια, μπορείτε να καταργήσετε αυτούς τους επιλογείς από το φύλλο στυλ (ο μικρότερος κωδικός σημαίνει μικρότερο μέγεθος αρχείου).
Έλεγχος πλεονασμού CSS
Παρόμοια με τους επιλογείς Dust-Me, αυτό το εργαλείο ελέγχει τον ιστότοπό σας για τους αχρησιμοποίητους και περιττούς επιλογείς CSS. Το μόνο που είναι διαφορετικό είναι ότι πρέπει να εισαγάγετε με μη αυτόματο τρόπο το URI για κάθε σελίδα που θέλετε να δοκιμάσετε.
Βελτιστοποιήστε και συμπιέστε τον κώδικα CSS
Αφού ολοκληρώσετε τον έλεγχο της εγκυρότητας του CSS σας και καθαρίσετε τον περιττό κώδικα, ήρθε η ώρα να βελτιστοποιήσετε το αρχείο CSS και να το μειώσετε στο μικρότερο δυνατό μέγεθος.
CSS Tidy
Το CSS Tidy είναι ένα λογισμικό ανοιχτού κώδικα που μπορείτε να χρησιμοποιήσετε για να βελτιστοποιήσετε και να συμπιέσετε το αρχείο CSS. Διατίθεται σε μορφή .exe (μόνο για Windows) και σε μορφή δέσμης κλειδιών php (όλες οι πλατφόρμες, για προγραμματιστές Ιστού). Αυτό που κάνει το CSS Tidy είναι να αφαιρέσει κυρίως το σχόλιο, το περιττό κενό και να αλλάξει μέρος του κώδικα σε συντομογραφία. Κατά τη διάρκεια της συμπίεσης, μπορείτε να επιλέξετε μεταξύ της αναγνωσιμότητας του κώδικα ή της μέγιστης συμπίεσης. Ανάλογα με το μήκος του κώδικα σας, μπορείτε εύκολα να επιτύχετε μια αναλογία συμπίεσης έως και 30% ή περισσότερο.
Δεδομένου ότι το CSS Tidy είναι ένα έργο ανοιχτού κώδικα, υπάρχουν αρκετές ιστοσελίδες που χρησιμοποιούν τον κώδικα και το μετατρέπουν σε ένα ηλεκτρονικό εργαλείο για χρήση από τους χρήστες. Εδώ είναι μερικά από αυτά:
- CLEAN CSS
- Κωδικός Βελτιωτικό
- CSS Formatter και Optimizer από την πύλη CSS
Άλλοι βελτιστοποιητές CSS
FlumpCakes CSS Optimizer
Μια απλή βελτιστοποίηση που έρχεται με πολλές επιλογές για να διαλέξετε.
Robson CSS Compressor
Παρόλο που μπορεί να φανεί το ίδιο με άλλους, βρήκα το ποσοστό συμπίεσης για το Robson CSS Compressor να είναι το υψηλότερο μεταξύ όλων. Παρόλο που έρχεται με αρκετές επιλογές για να τροποποιήσετε τη ρύθμιση, αφήνοντας όλες τις επιλογές ανέπαφες (όλες οι επιλογές που ελέγχονται) παράγει πάντα το καλύτερο αποτέλεσμα.
Συμπιεστής CSS Drive CSS
Ο συμπιεστής CSS που προσφέρεται από το CSS Drive έρχεται σε δύο λειτουργίες που μπορείτε να χρησιμοποιήσετε: Κανονική και προηγμένη. Στην κανονική λειτουργία, χρειάζεται μόνο να επιλέξετε το επίπεδο συμπίεσης που θέλετε (Light, Normal ή Super Compact) και ο συμπιεστής CSS θα κάνει τα υπόλοιπα. Στη λειτουργία "Προχωρημένους", δίνονται περισσότερες επιλογές και μεγαλύτερη λέξη για το πώς θέλετε να βελτιστοποιηθεί το φύλλο στυλ.
CSS Optimizer
Το CSS Optimizer από το mabblog.com είναι μια εφαρμογή γραμμής εντολών για Mac και Linux. Εννοείται για όσους είναι πιο άνετοι με το τερματικό παρά με ένα διαδικτυακό περιβάλλον. Υπάρχει επίσης μια απλή online έκδοση διαθέσιμη για όσους θέλουν να το πάρουν γρήγορα και να τελειώσουν.
Ας ελπίσουμε ότι τα εργαλεία που παρατίθενται εδώ είναι αρκετά για να τροποποιήσετε και να βελτιστοποιήσετε το φύλλο στυλ CSS. Εάν έχετε χρησιμοποιήσει άλλα εργαλεία που είναι πιο χρήσιμα από αυτά που αναφέρονται παραπάνω, μοιραστείτε τα μαζί μας στα σχόλια.