Το CSS σημαίνει κασέτα φύλλα στυλ, το οποίο είναι μια σημαντική πτυχή του σύγχρονου web designing. Αν είστε σχεδιαστής ιστοσελίδων και γνωρίζετε πώς να σχεδιάσετε θέματα WordPress ή πρότυπα blogger, δεν μπορείτε πλέον να αγνοήσετε το CSS. Ωστόσο, αν έχετε ένα blog και θέλετε να βελτιστοποιήσετε τα αρχεία CSS για καλύτερη απόδοση και ταχύτερη φόρτωση, εδώ είναι όλα τα εργαλεία που χρειάζεστε.

Πώς να βρείτε το αρχείο CSS του προτύπου του ιστολογίου σας

Αν το ιστολόγιό σας βρίσκεται στο WordPress τότε το αρχείο CSS τοποθετείται ιδανικά στο φάκελο των θεμάτων κάτω από το wp-content / themes / yourtheme . Για να μάθετε την ακριβή τοποθεσία, ανοίξτε το ιστολόγιό σας και ελέγξτε την πηγή σελίδας. Θα βρείτε έναν σύνδεσμο προς το CSS του θέματος σας όπως φαίνεται παρακάτω

Εάν το ιστολόγιό σας βρίσκεται στο Blogger, ανοίξτε τον πίνακα ελέγχου του Blogger και μεταβείτε στην καρτέλα "Διάταξη". Επιλέξτε "Επεξεργασία HTML" και το πλαίσιο ελέγχου "επεκτείνετε τα πρότυπα widget". Στη συνέχεια, αντιγράψτε τον κώδικα CSS σε ένα αρχείο σημειωματάριου που ορίζεται αμέσως μετά την ετικέτα του ανοιγόμενου σώματος.

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

Βελτιστοποιήστε τον κώδικα CSS

Διαμορφώστε τον κώδικα CSS

Το πρώτο βήμα προς τη βελτιστοποίηση οποιουδήποτε κώδικα CSS είναι η σωστή μορφοποίηση. Θα πρέπει να μορφοποιήσετε προσεκτικά τα στοιχεία στυλ και τα χαρακτηριστικά, ώστε να είναι εύκολα κατανοητά. Επιπλέον, ο κώδικας πρέπει να είναι γραμμένος έτσι ώστε να μην αλληλεπικαλύπτεται με άλλες κλάσεις ή ταυτότητες. Η μορφοποίηση του κώδικα με μη αυτόματο τρόπο είναι μια σκληρή δουλειά και μπορείτε να χρησιμοποιήσετε το εργαλείο Format CSS για να ξεκινήσετε.

Αντιγράψτε το φύλλο στυλ που θέλετε να μορφοποιήσετε και επικολλήστε το στο πλαίσιο κειμένου. Στη συνέχεια, επιλέξτε τους προτιμώμενους κανόνες μορφοποίησης από το δεξί πλαίσιο.

Για παράδειγμα: Μπορεί να θέλετε να εισαγάγετε μια νέα γραμμή μετά την ιδιότητα CSS κάθε ετικέτας div. Μπορεί επίσης να θέλετε να αφαιρέσετε όλους τους λευκούς χώρους που τοποθετούνται μετά από ένα ερωτηματικό. Ορίστε όλους τους κανόνες που θέλετε να εκτελέσει το πρόγραμμα και στη συνέχεια πατήστε το κουμπί "Format CSS". Θα εφαρμοστούν όλοι οι καθορισμένοι κανόνες και ο κώδικας θα μορφοποιηθεί όπως φαίνεται παρακάτω:

Βελτιστοποιήστε το CSS για να καταργήσετε τις απολύσεις

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

Αυτό το εργαλείο μπορεί να χρησιμοποιηθεί για τους ακόλουθους σκοπούς:

  • μετατρέψτε όλες τις τιμές χρώματος RGB σε δεκαεξαδικά, μειώνοντας έτσι τα γενικά έξοδα και αυξάνοντας την απόδοση.
  • αφαιρέστε όλα τα σχόλια και τους λευκούς χώρους.
  • βελτιστοποιήστε τις οριακές τιμές στις σύγχρονες μετρήσεις. Για παράδειγμα: το όριο χαρακτηριστικών: 2px 5px 2px 5px αλλάζει στα σύνορα: 2px 5px ;.
  • μετατρέψτε τις απόλυτες τιμές σε σχετικές. Για παράδειγμα: η ιδιότητα γραμματοσειράς-μεγέθους: 18px; μπορεί να αλλάξει σε μέγεθος γραμματοσειράς: 2em;
  • μετατρέπει πολλαπλά υπόβαθρο, γραμματοσειρά, περιθώριο, παρεμβολή, ιδιότητες λίστας σε ένα μοναδικό χαρακτηριστικό.

Καθαρίστε το αρχείο CSS και μειώστε το μέγεθος

Τώρα είναι καιρός να καθαρίσετε τον κώδικα CSS για σφάλματα και να μειώσετε το μέγεθος του αρχείου. Η μείωση του μεγέθους του CSS είναι σημαντική καθώς επηρεάζει τον χρόνο φόρτωσης των σελίδων του ιστολογίου σας. Πηγαίνετε στο Clean CSS και επικολλήστε τον κώδικα CSS που βελτιστοποιήσατε στο προηγούμενο βήμα. Επιλέξτε τη λειτουργία συμπίεσης ως την υψηλότερη και επιλέξτε τις επιλογές που εμφανίζονται παρακάτω

Το Clean CSS βασίζεται στο CSS Tidy και μπορεί να χρησιμοποιηθεί για τη συγχώνευση ιδιοτήτων στενογραφίας, τη συμπίεση των χρωμάτων και τα βάρη των γραμματοσειρών. Ένα παρόμοιο εργαλείο για τη συμπίεση του κώδικα CSS για ταχύτερη φόρτωση είναι το Drive CSS.

Μερικές συμβουλές

Ακολουθούν ορισμένες συμβουλές και κόλπα που πρέπει να έχετε κατά νου όταν γράφετε τον κώδικα CSS για το πρότυπο του ιστολογίου σας:

1. Χρησιμοποιείτε πάντα εξωτερικά φύλλα στυλ αντί να επικολλήσετε ολόκληρο τον κώδικα πριν την ετικέτα.

2. Χρησιμοποιήστε καθολικές τάξεις για να αποφύγετε επαναλήψεις. Για παράδειγμα: μπορείτε να χρησιμοποιήσετε μια απλή κλάση div.floatleft {float: left;} για να επιπλέξετε οποιοδήποτε στοιχείο προς τα αριστερά παρά να χρησιμοποιήσετε το ίδιο χαρακτηριστικό σε πολλές κλάσεις.

3. Χρησιμοποιήστε ειδικά αρχεία CSS του προγράμματος περιήγησης για την επιδιόρθωση σφαλμάτων. Αυτό σημαίνει ότι εάν εντοπίσετε ένα σφάλμα που εμφανίζεται μόνο σε ένα συγκεκριμένο πρόγραμμα περιήγησης (γενικά το Internet Explorer 6 ή παλαιότερες εκδόσεις), χρησιμοποιήστε ένα ξεχωριστό φύλλο στυλ για να διορθώσετε αυτό το σφάλμα. Αυτό κρατά το κεντρικό σας φύλλο στυλ καθαρό και καθαρό.

Για τους bloggers του WordPress : Εκτός από τη βελτιστοποίηση του κώδικα CSS, πρέπει να ελέγξετε πώς να μειώσετε το χρόνο φόρτωσης της σελίδας του blog και πώς θα πρέπει να καθαρίσετε τη βάση δεδομένων του WordPress.

Έχετε βελτιστοποιήσει ακόμα το CSS του προτύπου ιστολογίου σας; Ποια είναι τα αγαπημένα σας εργαλεία για τη βελτιστοποίηση του κώδικα CSS; Μοιραστείτε τις ιδέες σας στην ενότητα σχολίων.