Συμπιεστής CSS & Μορφοποιητής

Τι είναι αυτό το εργαλείο;

Ένας minifier CSS ξαναγράφει ένα φύλλο στυλ ώστε να είναι όσο το δυνατόν μικρότερο χωρίς να αλλάζει την απόδοσή του: αφαιρεί σχόλια και κενά διαστήματα, συντομεύει τιμές χρωμάτων και μηδενικές μονάδες όπου είναι ασφαλές, συγχωνεύει διπλότυπους κανόνες, και αφαιρεί περιττά ερωτηματικά.

Αυτό το εργαλείο βασίζεται στο clean-css, έναν βελτιστοποιητή CSS που πραγματικά αναλύει το φύλλο στυλ σε AST αντί να χρησιμοποιεί regex, γι' αυτό μπορεί να χειριστεί με ασφάλεια οριακές περιπτώσεις που σπάνε αφελείς minifiers — προσαρμοσμένες ιδιότητες CSS (--main-color: ...), περιεχόμενο μέσα σε συμβολοσειρές, και σύνθετοι επιλογείς και media queries βγαίνουν όλα σωστά.

Γιατί να το χρησιμοποιήσετε;

• Ελαχιστοποίηση βασισμένη σε AST (clean-css), όχι regex — ασφαλής με προσαρμοσμένες ιδιότητες, συμβολοσειρές και ένθετα media queries.
• Βελτιστοποιήσεις επιπέδου 2 συγχωνεύουν και απλοποιούν κανόνες για επιπλέον εξοικονόμηση πέρα από απλή αφαίρεση κενών.
• Δείτε ακριβώς πόσα bytes και τι ποσοστό εξοικονομήσατε.
• Η λειτουργία Μορφοποίησης μετατρέπει ένα ελαχιστοποιημένο φύλλο στυλ πίσω σε αναγνώσιμο CSS με συνεπείς εσοχές.
• 100% τοπική επεξεργασία — ιδιόκτητα ή αδημοσίευτα στυλ δεν φεύγουν ποτέ από τον περιηγητή σας.

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

1. Επικολλήστε το CSS σας στο πεδίο εισαγωγής, ή κάντε κλικ στο "Load Example" για να δοκιμάσετε ένα δείγμα με προσαρμοσμένη ιδιότητα και media query.
2. Κάντε κλικ στο "Minify" για να το συμπιέσετε, ή στο "Format" για να το ομορφύνετε με εσοχή 2 κενών.
3. Ελέγξτε το μήνυμα κάτω από τα πλαίσια — η λειτουργία ελαχιστοποίησης δείχνει τη μείωση μεγέθους· άκυρο CSS δείχνει σαφές σφάλμα αντί να παράγει σιωπηλά σπασμένο αποτέλεσμα.
4. Κάντε κλικ στο "Copy" για να πάρετε το αποτέλεσμα.

Παράδειγμα

Είσοδος

:root {
  --main-color: #4f46e5;
}

.card {
  color: var(--main-color);
  padding: 16px;
}

@media (max-width: 600px) {
  .card {
    padding: 8px;
  }
}

Έξοδος

:root{--main-color:#4f46e5}.card{color:var(--main-color);padding:16px}@media (max-width:600px){.card{padding:8px}}

Η προσαρμοσμένη ιδιότητα, το media query και η σειρά cascade διατηρούνται όλα — αφαιρούνται μόνο κενά, σχόλια και περιττοί χαρακτήρες.

Πρακτικές συμβουλές

• Ελαχιστοποιήστε κατά τη στιγμή κατασκευής/διανομής, όχι κατά την ανάπτυξη — επεξεργαστείτε την αναγνώσιμη πηγή και αφήστε αυτό το εργαλείο (ή τη γραμμή κατασκευής σας) να παράγει την εκδοχή που διανέμεται.
• Αν κάνετε αποσφαλμάτωση για το γιατί μια σελίδα φαίνεται διαφορετική σε παραγωγή, η μορφοποίηση πρώτα του ελαχιστοποιημένου CSS κάνει τη σύγκριση με την πηγή σας πολύ πιο εύκολα αναγνώσιμη.
• Οι προσαρμοσμένες ιδιότητες επιβιώνουν στην ελαχιστοποίηση, οπότε φύλλα στυλ βασισμένα σε design tokens (χρησιμοποιώντας --spacing, --color-*, κ.λπ.) είναι ασφαλή να περάσουν από αυτό το εργαλείο.
• Συνδυάστε με τους minifiers HTML και JS παρακάτω αν το έργο σας κρατά τα πάντα σε ξεχωριστά αρχεία πριν από μια κυκλοφορία.

Πού ταιριάζει αυτό σε πραγματικές ροές εργασίας

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

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

→ Συμπιεστής HTML · Ελαχιστοποιητής JavaScript

Συνήθεις περιπτώσεις χρήσης

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

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