Μορφοποίηση και ελαχιστοποίηση CSS

Πώς να μορφοποιήσετε ή να ελαχιστοποιήσετε CSS

1. Επικολλήστε το φύλλο στυλ σας ή πατήστε Άνοιγμα αρχείου για να φορτώσετε ένα αρχείο .css (έως 10 MB).
2. Επιλέξτε την Εσοχή (2 κενά, 4 κενά ή Tab) και αν θέλετε Κενή γραμμή ανάμεσα στους κανόνες.
3. Πατήστε Μορφοποίηση (beautify) για να πάρετε ευανάγνωστο κώδικα ή Ελαχιστοποίηση για να πάρετε τη μικρότερη δυνατή έκδοση.
4. Για την ελαχιστοποίηση, αφήστε επιλεγμένο το Συγχώνευση κανόνων κατά την ελαχιστοποίηση για το καλύτερο αποτέλεσμα και το Διατήρηση σχολίων /*! … */ για να διατηρηθούν οι κεφαλίδες αδειών χρήσης.
5. Αντιγράψτε ή κατεβάστε το αποτέλεσμα. Η γραμμή κατάστασης δείχνει το μέγεθος πριν και μετά, σε byte, και το ποσοστό που εξοικονομήθηκε.

Αν λείπει μια αγκύλη, το εργαλείο σταματά και σας λέει σε ποια γραμμή βρίσκεται η ανοιχτή { που δεν κλείνει ή η περιττή }, αντί να παράγει χαλασμένο αποτέλεσμα.

Μορφοποίηση: ευανάγνωστο και συνεπές CSS

Η Μορφοποίηση (beautify) χρησιμοποιεί το js-beautify, τον μορφοποιητή που υπάρχει σε πολλούς επεξεργαστές κώδικα. Βάζει κάθε δήλωση σε δική της γραμμή, δημιουργεί εσοχή στο περιεχόμενο κάθε κανόνα και των at-rules όπως τα @media και @supports, γράφει κάθε επιλογέα μιας ομάδας σε δική του γραμμή και προσθέτει κενό μετά την άνω και κάτω τελεία κάθε δήλωσης. Οι υπάρχουσες κενές γραμμές διατηρούνται (το πολύ μία στη σειρά), ώστε να μένουν ορατά τα λογικά τμήματα του αρχείου σας. Ο μορφοποιητής δεν αλλάζει ποτέ τιμές, τη σειρά των κανόνων ή το νόημα των επιλογέων: αλλάζει μόνο τα κενά.

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

Ελαχιστοποίηση: μικρότερο CSS με το csso

Η Ελαχιστοποίηση χρησιμοποιεί το csso (CSS Optimizer), έναν δομικό ελαχιστοποιητή. Πέρα από την αφαίρεση κενών και σχολίων, ξαναγράφει το φύλλο στυλ σε ισοδύναμη, πιο σύντομη μορφή:

• τα χρώματα συντομεύονται (το #ff0000 γίνεται red, το #ffffff γίνεται #fff)·
• οι μονάδες και τα μηδενικά απλοποιούνται (το 0px γίνεται 0, το 0.5em γίνεται .5em)·
• οι διπλές δηλώσεις αφαιρούνται και οι συντομογραφικές ιδιότητες συγχωνεύονται όταν είναι ασφαλές·
• με το Συγχώνευση κανόνων κατά την ελαχιστοποίηση, οι κανόνες με ίδιες δηλώσεις ομαδοποιούνται (το a{color:red} b{color:red} γίνεται a,b{color:red}) και οι δηλώσεις που παρακάμπτονται αφαιρούνται.

Η αναδόμηση είναι ασφαλής για κανονικά φύλλα στυλ, αλλά μετακινεί δηλώσεις. Αν το CSS σας βασίζεται σε πολύ συγκεκριμένη σειρά καταρράκτη, για παράδειγμα σε hacks για προγράμματα περιήγησης, αποεπιλέξτε την επιλογή: το csso θα συμπιέσει τότε κάθε κανόνα επιτόπου.

Τα σχόλια αφαιρούνται, εκτός από τα «σημαντικά» σχόλια που ξεκινούν με /*!, τα οποία χρησιμοποιούνται συνήθως για άδειες χρήσης. Αποεπιλέξτε το Διατήρηση σχολίων /*! … */ για να αφαιρεθούν κι αυτά.

Μέγεθος πριν και μετά

Η γραμμή κατάστασης συγκρίνει το μέγεθος της εισόδου και του αποτελέσματος σε byte UTF-8. Ο μορφοποιημένος κώδικας είναι συνήθως μεγαλύτερος από το πρωτότυπο· ο ελαχιστοποιημένος εξοικονομεί τυπικά 20 έως 50% σε CSS γραμμένο με το χέρι. Να θυμάστε ότι οι διακομιστές συμπιέζουν επίσης τα αρχεία με gzip ή Brotli, οπότε η εξοικονόμηση στη μεταφορά είναι μικρότερη από τον ακατέργαστο αριθμό, αλλά η ελαχιστοποίηση μειώνει παρ’ όλα αυτά τον χρόνο ανάλυσης και το μέγεθος των αρχείων στην προσωρινή μνήμη.