Συμπιεστής & Ομορφοποιητής CSS δωρεάν
Συμπιέστε CSS για μείωση μεγέθους αρχείου ή ομορφοποιήστε συμπιεσμένο CSS για αναγνωσιμότητα. Άμεσο, στο πρόγραμμα περιήγησής σας.
Αφήστε ένα αρχείο .css εδώ ή κάντε κλικ για αναζήτηση
CSS · επεξεργάζεται στη συσκευή σας
ή πατήστε Ctrl+V για επικόλληση από το πρόχειρο
Συνηθισμένες χρήσεις
- Ελαχιστοποιήστε CSS για ανάπτυξη παραγωγήςΜειώστε το μέγεθος του αρχείου CSS πριν από την ανάπτυξη στην παραγωγή — ταχύτερη φόρτωση σελίδας και χαμηλότερο κόστος εύρους ζώνης.
- Ομορφύνετε ελαχιστοποιημένο CSS για εντοπισμό σφαλμάτωνΜορφοποιήστε συμπιεσμένο ή ελαχιστοποιημένο CSS σε αναγνώσιμο κώδικα έτσι ώστε να μπορείτε να επιθεωρήσετε και να εντοπίσετε σφάλματα σε στυλ.
- Ελαχιστοποιήστε CSS για πρότυπα ηλεκτρονικού ταχυδρομείουΣυμπιέστε CSS για πρότυπα ηλεκτρονικού ταχυδρομείου HTML όπου το μέγεθος αρχείου και η υπερχείλιση ενσωματωμένου στυλ έχουν σημασία.
- Ελαχιστοποιήστε CSS για θέματα WordPressΜειώστε το μέγεθος των προσαρμοσμένων φύλλων στυλ θέματος WordPress για καλύτερα σκορ PageSpeed.
- Ομορφύνετε CSS για ανασκόπηση κώδικαΜορφοποιήστε οποιοδήποτε αρχείο CSS σε καθαρό, με εσοχή, αναγνώσιμο κώδικα έτοιμο για αναθεώρηση και συνεργασία.
Πώς λειτουργεί
Αυτό το εργαλείο χρησιμοποιεί έναν χειρόγραφο tokenizer CSS χωρίς εξαρτήσεις, γραμμένο εξ ολοκλήρου σε JavaScript — χωρίς εξωτερικές βιβλιοθήκες ή κλήσεις σε διακομιστή. Ο tokenizer ταξινομεί κάθε χαρακτήρα ως κώδικα, σχόλιο, συμβολοσειρά σε εισαγωγικά ή τιμή url() πριν εφαρμόσει οποιονδήποτε μετασχηματισμό, κάτι που εμποδίζει τους κανόνες κενών να αλλοιώσουν περιεχόμενα συμβολοσειρών, data URIs ή εκφράσεις calc().
- 1Πέρασμα tokenizationΤο CSS εισόδου σαρώνεται χαρακτήρα προς χαρακτήρα και χωρίζεται σε τυποποιημένα tokens: τμήματα ακατέργαστου κώδικα, σχόλια /* ... */, συμβολοσειρές σε εισαγωγικά (διατηρώντας τις ακολουθίες διαφυγής) και μπλοκ url(...). Έτσι οι μετασχηματισμοί του επόμενου βήματος αγγίζουν μόνο πραγματική σύνταξη CSS — ποτέ τα περιεχόμενα μιας συμβολοσειράς ή ενός data URI.
- 2Ελαχιστοποίηση ή ωραιοποίησηΣτη λειτουργία ελαχιστοποίησης, τα κανονικά σχόλια αφαιρούνται (τα σχόλια /*! license */ διατηρούνται), οι ακολουθίες κενών στα tokens κώδικα συμπτύσσονται σε ένα κενό και τα κενά δίπλα σε σημεία στίξης γύρω από { } : ; , > ~ αφαιρούνται. Τα κενά γύρω από + και - αφήνονται σκόπιμα ανέγγιχτα για να μη σπάσουν εκφράσεις calc(). Στη λειτουργία ωραιοποίησης, ο κώδικας πρώτα ελαχιστοποιείται σε καθαρή βάση, έπειτα αναλύεται ξανά και αποκτά νέες εσοχές με παρακολούθηση βάθους δύο κενών και ανίχνευση άνω-κάτω τελειών δηλώσεων, ώστε να διακρίνονται οι άνω-κάτω τελείες property: value από εκείνες των επιλογέων όπως a:hover.
- 3Εκτίμηση μεγέθους gzipΜετά την παραγωγή της εξόδου, χρησιμοποιείται το εγγενές CompressionStream API του browser για να συμπιεστεί το αποτέλεσμα με gzip και να μετρηθεί ο αριθμός bytes. Αυτό δίνει ρεαλιστική εκτίμηση μεγέθους μεταφοράς, αντίστοιχη με ό,τι θα έστελνε μέσω δικτύου ένας web server με συμπίεση gzip.
- 4Αντιγραφή ή λήψηΤο επεξεργασμένο CSS γράφεται στο πρόχειρο μέσω του Clipboard API ή κατεβαίνει ως styles.min.css (λειτουργία ελαχιστοποίησης) ή styles.css (λειτουργία ωραιοποίησης) με Blob τύπου MIME text/css. Το ποσοστό μείωσης μεγέθους εμφανίζεται ζωντανά καθώς πληκτρολογείτε.
Σχετικά εργαλεία
Βελτιστοποιητής & Συμπιεστής SVG
Αφαιρέστε μεταδεδομένα, συμπτύξτε κενά και στρογγυλοποιήστε δεκαδικά για δραστική μείωση μεγέθους SVG — τυπικές μειώσεις 30-70%. Οπτική προεπισκόπηση επαληθεύει ότι τίποτα δεν χαλάει.
Ομορφοποιητής CSS
Μορφοποιήστε συμπιεσμένο CSS με συνεπή εσοχή ή συμπιέστε το. Προαιρετική αλφαβητική ταξινόμηση ιδιοτήτων για προβλέψιμες διαφορές.
Μορφοποίηση JSON
Μορφοποιήστε, επικυρώστε, ελαχιστοποιήστε και εξερευνήστε δεδομένα JSON. Προβολή δέντρου, επισήμανση σύνταξης και αντιγραφή με ένα κλικ.