Πώς να το χρησιμοποιήσετε

Επικολλήστε CSS στο πεδίο εισαγωγής, ανοίξτε ένα αρχείο .css ή δοκιμάστε το παράδειγμα.
Επιλέξτε Beautify για ευανάγνωστο κώδικα ή Minify για το μικρότερο αποτέλεσμα.
Κατά το Beautify, επιλέξτε 2 κενά, 4 κενά ή στηλοθέτες.
Αντιγράψτε το αποτέλεσμα ή κατεβάστε το ως αρχείο .css. Αν τα άγκιστρα ή τα εισαγωγικά δεν είναι ισορροπημένα, το σφάλμα δείχνει τη γραμμή και τη στήλη.

Πώς λειτουργεί

Ο μορφοποιητής πρώτα χωρίζει το φύλλο στυλ σε tokens: συμβολοσειρές σε μονά ή διπλά εισαγωγικά, τιμές url(…), σχόλια, αγκύλες και ερωτηματικά. Επειδή οι συμβολοσειρές και τα url() αποτελούν ενιαία tokens, ένα ερωτηματικό μέσα σε ένα data URI ή μια αγκύλη μέσα στο content: "{ }" δεν μπερδεύουν ποτέ τη δομή και το περιεχόμενό τους αντιγράφεται ακριβώς.

Η μορφοποίηση (Beautify) βάζει κάθε selector μιας λίστας selector σε δική του γραμμή, προσθέτει κενά γύρω από τους τελεστές child, sibling και adjacent (>, ~, +) και γράφει κάθε δήλωση ως “property: value;” σε δική της γραμμή. Τα block μέσα σε @media, @supports, @layer, @container και το εγγενές nesting της CSS έχουν εσοχή ένα επίπεδο ανά βάθος. Αν λείπει το ερωτηματικό μετά την τελευταία δήλωση ενός block, προστίθεται. Τα σχόλια παραμένουν εκεί που είναι.

Η ελαχιστοποίηση (Minify) αφαιρεί τα σχόλια (εκτός από ειδοποιήσεις αδειών /*! … */), συμπτύσσει τα κενά, αφαιρεί τα κενά γύρω από αγκύλες, άνω και κάτω τελείες, ερωτηματικά, κόμματα και συνδυαστές selector, και αφαιρεί το ερωτηματικό πριν από κάθε αγκύλη κλεισίματος. Τα κενά που αλλάζουν το νόημα διατηρούνται: ο συνδυαστής απογόνου στο “.a .b”, το κενό στο “a :focus” και τα κενά μέσα σε τιμές όπως calc(100% - 2px). Το “! important” κανονικοποιείται σε “!important”.

Το εργαλείο δεν ξαναγράφει τιμές: χρώματα, μονάδες και μηδενικά παραμένουν όπως είναι γραμμένα και οι κανόνες δεν συγχωνεύονται ούτε αναδιατάσσονται. Αρχεία SCSS ή Less με απλό nesting συνήθως λειτουργούν, αλλά η δική τους σύνταξη, όπως σχόλια γραμμής // ή mixins, δεν αναγνωρίζεται.

Παραδείγματα

Ανάγνωση ενός ελαχιστοποιημένου αρχείου framework

Επικολλήστε ένα απόσπασμα bootstrap.min.css σε μία γραμμή και επιλέξτε Beautify με 2 κενά για να δείτε κάθε κανόνα, τα media queries και τους εμφωλευμένους κανόνες τους σε ξεχωριστές γραμμές με εσοχή.

Διανομή ενός χειρόγραφου φύλλου στυλ

Ελαχιστοποιήστε ένα φύλλο στυλ 12 KB με σχόλια και εσοχές πριν το προσθέσετε ενσωματωμένο σε ένα πρότυπο email ή στο head μιας σελίδας. Η σύνοψη δείχνει τον αριθμό χαρακτήρων πριν και μετά.

Εντοπισμός αγκύλης που λείπει

Ένα φύλλο στυλ σταματά να εφαρμόζεται στη μέση. Ο μορφοποιητής αναφέρει “This { is never closed with a matching }” με τη γραμμή του κανόνα από τον οποίο λείπει η αγκύλη κλεισίματος.

Συχνές ερωτήσεις

Είναι ασφαλές να χρησιμοποιήσω το ελαχιστοποιημένο CSS από αυτό το εργαλείο σε περιβάλλον παραγωγής;

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

Γιατί διατηρείται ένα κενό στο «a :focus»;

Σε έναν επιλογέα, το κενό είναι ο συνδυαστής απογόνου. Το «a :focus» σημαίνει ένα εστιασμένο στοιχείο μέσα σε έναν σύνδεσμο, ενώ το «a:focus» σημαίνει έναν εστιασμένο σύνδεσμο. Η αφαίρεση αυτού του κενού θα άλλαζε ποια στοιχεία αντιστοιχούν.

Μπορεί να μορφοποιήσει SCSS ή Less;

Οι απλοί ένθετοι κανόνες μορφοποιούνται σωστά. Η σύνταξη που υπάρχει μόνο σε προεπεξεργαστές, όπως σχόλια //, mixins με ορίσματα ή μπλοκ @if, δεν αναγνωρίζεται και μπορεί να μορφοποιηθεί περίεργα, οπότε ελέγξτε το αποτέλεσμα.

Αφαιρούνται τα σχόλια αδειών χρήσης κατά την ελαχιστοποίηση;

Τα σχόλια που ξεκινούν με /*! διατηρούνται, όπως συνηθίζεται για ειδοποιήσεις άδειας χρήσης και πνευματικών δικαιωμάτων. Όλα τα άλλα σχόλια αφαιρούνται.

Απόρρητο

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