Δωρεάν μετατροπέας

CSS Minifier

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

Σύρετε και αποθέστε ένα αρχείο CSS εδώ

Υποστηρίζει αρχεία .css. Ή επικολλήστε το CSS σας παραπάνω.

Ή

Σχετικά με αυτό το εργαλείο

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

Σε σύγχρονους ιστότοπους με δεκάδες κανόνες στυλ, η τυπική μείωση είναι 20–40% έναντι της μη ελαχιστοποιημένης πηγής. Σε συνδυασμό με τη συμπίεση gzip στον διακομιστή, η οριακή εξοικονόμηση συρρικνώνεται — το gzip ήδη συμπιέζει αποτελεσματικά το επαναλαμβανόμενο κείμενο — αλλά ο συνδυασμός εξακολουθεί να ξεπερνά τη συμπίεση μόνο, ιδιαίτερα όταν τα φύλλα στυλ αποθηκεύονται στην κρυφή μνήμη και εμφανίζονται πολλές φορές σε πολλούς επισκέπτες.

Αυτός ο minifier επεξεργάζεται το CSS με ένα μόνο πέρασμα, αφαιρώντας σχόλια εκτός των τιμών url(), συμπτύσσοντας το κενό διάστημα, αφαιρώντας πλεονάζοντα ερωτηματικά πριν κλείσει αγκύλες, εφαρμόζοντας συντομογραφία μηδενικής μονάδας και μετατρέποντας εξαψήφια εξαψήφια εξαψήφια χρώματα σε τριψήφια μορφή όπου είναι δυνατόν (#ffffff → #fff). Η έξοδος παραμένει έγκυρη CSS που αναλύει σωστά οποιοδήποτε πρόγραμμα περιήγησης.

Γιατί να ελαχιστοποιήσετε το CSS

Τα μικρότερα αρχεία CSS φορτώνονται πιο γρήγορα και ο χρόνος αποκλεισμού απόδοσης μειώνεται, γεγονός που βελτιώνει τις βαθμολογίες First Contentful Paint και Largest Contentful Paint. Για ιστότοπους όπου το Core Web Vitals επηρεάζει την κατάταξη αναζήτησης, κάθε κιλομπάιτ CSS που αποκλείει την απόδοση που έχει ξυριστεί αξίζει τον κόπο.

Το κόστος εύρους ζώνης έχει επίσης σημασία σε κλίμακα. Οι ιστότοποι που εξυπηρετούν εκατομμύρια προβολές σελίδας εξοικονομούν μετρήσιμα ποσά εξόδου όταν τα φύλλα στυλ τους είναι 30% μικρότερα. Οι λογαριασμοί CDN, η χρήση δεδομένων κινητής τηλεφωνίας και η κατανάλωση ενέργειας ωφελούνται ελαφρώς. Η ελαχιστοποίηση είναι ουσιαστικά δωρεάν — ένα βήμα κατασκευής εφάπαξ χωρίς κόστος συντήρησης.

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

Επικολλήστε το CSS, αποκτήστε την ελαχιστοποιημένη έκδοση.

  1. Επικολλήστε το CSS σας: Ρίξτε ένα αρχείο .css ή επικολλήστε την πηγή CSS στην περιοχή εισαγωγής. Ο minifier δέχεται οποιοδήποτε έγκυρο CSS — σύγχρονη σύνταξη συμπεριλαμβανομένων μεταβλητών CSS, calc(), grid και flexbox.
  2. Επιλέξτε επιλογές: Οι προεπιλογές καταργούν σχόλια, συμπτύσσουν κενό διάστημα και εφαρμόζουν κοινές συντομεύσεις. Μπορείτε να απενεργοποιήσετε συγκεκριμένους μετασχηματισμούς εάν χρειάζεται να διατηρήσετε σχόλια ή συγκεκριμένη μορφοποίηση.
  3. Ελαχιστοποίηση: Ο minifier περπατά στο CSS, εφαρμόζοντας κάθε ενεργοποιημένο μετασχηματισμό. Η έξοδος είναι λειτουργικά πανομοιότυπη CSS με μειωμένο μέγεθος.
  4. Χρησιμοποιήστε την έξοδο: Αντιγραφή ή λήψη. Αντικαταστήστε το CSS προέλευσης στην έξοδο της έκδοσης με την ελαχιστοποιημένη έκδοση ή εκτελέστε την ελαχιστοποίηση ως βήμα κατασκευής στα εργαλεία σας.

Κοινές περιπτώσεις χρήσης

Τεχνικές λεπτομέρειες

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

Κοινές συντομεύσεις: 0px, 0em και παρόμοιες τιμές μηδενικής μονάδας γίνονται 0. εξαψήφια εξαψήφια χρώματα με ζεύγη ψηφίων (#ffffff, #336699) γίνονται τριψήφια (#fff, #369). το τελευταίο ερωτηματικό πριν από το } αφαιρείται. Τα ονόματα των χρωμάτων δεν μετατρέπονται σε δεκαεξαδικό αυτόματα επειδή το hex είναι μερικές φορές μεγαλύτερο (το κόκκινο είναι μικρότερο από #f00 σε μήκος, το #ff0000 είναι μεγαλύτερο από το κόκκινο).

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

Βέλτιστες Πρακτικές

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

Τι καταργεί η ελαχιστοποίηση CSS;
Κενό διάστημα (κενά, καρτέλες, νέες γραμμές), σχόλια (/* ... */), περιττά ερωτηματικά, περιττά μηδενικά (0,5 → ,5), βελτιστοποιήσεις στενογραφίας (#ffffff → #fff) και περιττές μονάδες (0px → 0).
Είναι το minified CSS ασφαλές για χρήση στην παραγωγή;
Ναι. Η ελαχιστοποίηση διατηρεί όλους τους κανόνες CSS, τους επιλογείς και τις τιμές ιδιοτήτων. Η έξοδος είναι λειτουργικά πανομοιότυπη — τα προγράμματα περιήγησης την ερμηνεύουν ακριβώς με τον ίδιο τρόπο. Είναι μια τυπική πρακτική για όλους τους ιστότοπους παραγωγής.
Πόσο μείωση μεγέθους πρέπει να περιμένω;
Συνήθως 20-50% για καλογραμμένο CSS. Ο κώδικας που σχολιάστηκε έντονα με αναλυτική μορφοποίηση παρουσιάζει μεγαλύτερες μειώσεις. Το ήδη συμπαγές CSS μπορεί να συρρικνωθεί μόνο κατά 10-15%.
Πρέπει να ελαχιστοποιήσω το CSS εάν χρησιμοποιώ το gzip;
Ναι και τα δύο. Το Gzip συμπιέζει επαναλαμβανόμενα μοτίβα, ενώ η ελαχιστοποίηση αφαιρεί τους περιττούς χαρακτήρες. Μαζί παρέχουν καλύτερη συμπίεση από το καθένα μόνο του. Το Minified + gzipped CSS είναι συνήθως 85-95% μικρότερο από το αρχικό.
Πρέπει να ελαχιστοποιώ πάντα;
Για παραγωγή ναι. Για αρχεία προέλευσης ανάπτυξης, όχι — το αναγνώσιμο CSS είναι απαραίτητο για τη συντήρηση. Εκτελέστε την ελαχιστοποίηση κατά το χρόνο κατασκευής, όχι κατά τη στιγμή της επεξεργασίας.
Το CSS μου έχει μεταφορτωθεί σε διακομιστή;
Όχι. Το minifier εκτελείται στο πρόγραμμα περιήγησής σας.
Πώς συγκρίνεται αυτό με το cssnano ή το csso;
Τα cssnano και csso είναι πρόσθετα PostCSS για εκδόσεις παραγωγής. προσφέρουν πιο επιθετικούς μετασχηματισμούς, όπως η συγχώνευση περιττών κανόνων. Αυτό το εργαλείο καλύπτει τη βασική ελαχιστοποίηση για ad-hoc χρήση χωρίς ρύθμιση build.
Η ελαχιστοποίηση διακόπτει τους χάρτες πηγής;
Η ελαχιστοποίηση δεν δημιουργεί χάρτες πηγής. αυτό το εργαλείο παράγει μόνο ελαχιστοποιημένη έξοδο. Για τον εντοπισμό σφαλμάτων ελαχιστοποιημένο CSS στην παραγωγή, δημιουργήστε χάρτες πηγής ως μέρος της κατασκευής σας.