CSS Minifier

Επικολλήστε ένα stylesheet για να αφαιρέσετε κενά και σχόλια, να συντομεύσετε τιμές όπως #ff0000 → red και να συγχωνεύσετε διπλούς κανόνες με τις δομικές βελτιστοποιήσεις του CSSO.

Τρέχει στον browser σαςΧωρίς εγγραφήΤίποτα δεν ανεβαίνει

Ελαχιστοποιημένη έξοδος

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

  1. Επικολλήστε CSS ή ανοίξτε ένα αρχείο .css.
  2. Αφήστε ενεργή την Αναδιάρθρωση για συγχώνευση κανόνων και δηλώσεων ή απενεργοποιήστε την για ασφαλές πέρασμα που αφαιρεί μόνο κενά.
  3. Αφήστε ενεργή τη Διατήρηση σχολίων άδειας για να κρατήσετε τις σημειώσεις /*! … */.
  4. Συγκρίνετε το αρχικό, το ελαχιστοποιημένο και το συμπιεσμένο με gzip μέγεθος.
  5. Αντιγράψτε το αποτέλεσμα ή κατεβάστε το output.min.css.

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

Το εργαλείο χρησιμοποιεί το CSSO (CSS Optimizer), που αναλύει το stylesheet σας σε συντακτικό δέντρο και το ξανατυπώνει στη συντομότερη ισοδύναμη μορφή. Πέρα από την αφαίρεση κενών και σχολίων, εφαρμόζει ασφαλείς αναδιατυπώσεις τιμών:

  • #ffffff → #fff, #ff0000 → red
  • 0px → 0, 0.90 → .9
  • margin: 8px 16px 8px 16px → margin:8px 16px
  • Οι κενοί κανόνες και οι διπλές δηλώσεις αφαιρούνται

Τι κάνει η «αναδιάρθρωση»;

Η αναδιάρθρωση εξετάζει ολόκληρο το stylesheet: κανόνες με πανομοιότυπες δηλώσεις συγχωνεύονται σε μία λίστα selectors (.a,.b{color:red}) και οι επαναλαμβανόμενοι selectors συνδυάζονται. Σε πραγματικά stylesheets αυτό εξοικονομεί συχνά άλλο ένα 5–15%. Το CSSO συγχωνεύει μόνο όταν η σειρά του cascade μένει ίδια, αλλά αν βασίζεστε σε ασυνήθιστες υπερισχύσεις, μπορείτε να την απενεργοποιήσετε για καθαρά συντακτική ελαχιστοποίηση.

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

Το CSS μπλοκάρει την απόδοση: ο browser δεν μπορεί να σχεδιάσει τη σελίδα μέχρι να κατέβουν και να αναλυθούν τα stylesheets στο <head>. Μικρότερο CSS σημαίνει ταχύτερο First Contentful Paint και καλύτερα Core Web Vitals, κάτι που ωφελεί και τους χρήστες και την κατάταξη στις μηχανές αναζήτησης. Συνδυάστε την ελαχιστοποίηση με gzip ή Brotli στον server για το καλύτερο αποτέλεσμα.

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

Είναι ασφαλής η ελαχιστοποίηση CSS;
Ναι. Τα κενά και τα σχόλια δεν επηρεάζουν την απόδοση του CSS και οι αναδιατυπώσεις τιμών του CSSO είναι ισοδύναμες σύμφωνα με την προδιαγραφή. Η αναδιάρθρωση διατηρεί τη σειρά του cascade· απενεργοποιήστε την αν θέλετε την πιο συντηρητική έξοδο.
Υποστηρίζει σύγχρονο CSS, όπως custom properties, nesting και @layer;
Ναι. Τα custom properties (--var), τα @media, @supports, @layer, @container και η σύνταξη grid διατηρούνται.
Μπορώ αργότερα να επαναφέρω το ελαχιστοποιημένο CSS;
Το ελαχιστοποιημένο CSS μπορεί να ξαναπάρει εσοχές από οποιονδήποτε formatter, αλλά τα σχόλια που αφαιρέθηκαν δεν ανακτώνται. Κρατήστε το αρχικό αρχείο πηγής και θεωρήστε το ελαχιστοποιημένο ως προϊόν του build.
Ανεβαίνει κάπου το stylesheet μου;
Όχι. Η ελαχιστοποίηση τρέχει στον browser σας· τίποτα δεν αποστέλλεται σε server.

Σχετικά εργαλεία

JavaScript Minifier Συμπίεση και σύντμηση ονομάτων JS με Terser, με στατιστικά μεγέθους και gzip. HTML Minifier Αφαίρεση σχολίων και κενών, ελαχιστοποίηση inline CSS/JS. SQL Formatter Μορφοποίηση ή ελαχιστοποίηση SQL για PostgreSQL, MySQL, T-SQL, BigQuery κ.ά. JSON Formatter Μορφοποίηση, συμπίεση και επικύρωση JSON με σφάλματα ανά γραμμή/στήλη.