Ομορφοποιητής CSS δωρεάν
Μορφοποιήστε συμπιεσμένο CSS με συνεπή εσοχή ή συμπιέστε το. Προαιρετική αλφαβητική ταξινόμηση ιδιοτήτων για προβλέψιμες διαφορές.
Αφήστε ένα αρχείο εδώ ή κάντε κλικ για αναζήτηση
CSS · επεξεργάζεται στη συσκευή σας
ή πατήστε Ctrl+V για επικόλληση από το πρόχειρο
Η έξοδος θα εμφανιστεί εδώ…Συνηθισμένες χρήσεις
- Εντοπισμός σφαλμάτων Παραγωγή CSSΠροβολή minified CSS από παραγωγικούς χώρους σε ένα αναγνώσιμο μορφή για εύρεση και reverse-engineer styling.
- Επιβολή Style CSS της ΟμάδαςΕκτελέστε CSS που υποβάλλει η ομάδα μέσω ενός συνεπούς beautifier έτσι ώστε τα diffs να αφορούν το περιεχόμενο, όχι τη μορφοποίηση.
- Μορφοποίηση Vendor-Prefixed CSSΤο Vendor-prefixed CSS (autoprefixer output) έχει συχνά πολλές παραλλαγές -webkit-, -moz-, -ms-. Μορφοποιήστε για επιθεώρηση.
- Μάθετε από Pro CSSΜελετήστε CSS από διάσημα συστήματα σχεδίασης με μορφοποίηση της μεταγενότητας εξόδου τους.
- Μορφοποίηση CSS για Αναφορές ΣφαλμάτωνΚατά την υποβολή σφαλμάτων CSS, το μορφοποιημένο CSS είναι πολύ ευκολότερο για τους κριτές να διαβάσουν και να κατανοήσουν.
Πώς λειτουργεί
Αυτό το εργαλείο μορφοποιεί CSS με χειρόγραφο αναδρομικό αναλυτή ενσωματωμένο στη σελίδα — χωρίς βιβλιοθήκη τρίτων ή κλήση σε διακομιστή. Ο αναλυτής διατρέχει το CSS σας χαρακτήρα προς χαρακτήρα, χειριζόμενος σωστά συμβολοσειρές σε εισαγωγικά, τιμές url(), ένθετους at-rules και σχόλια που θα μπέρδευαν απλούστερες προσεγγίσεις με regex.
- 1Tokenization σε επίπεδο χαρακτήραΗ συνάρτηση walkCss σαρώνει την είσοδο έναν χαρακτήρα τη φορά, παρακολουθώντας την κατάσταση εισαγωγικών και το βάθος παρενθέσεων, ώστε ερωτηματικά ή άγκιστρα μέσα σε url(), τιμές συμβολοσειρών ή σχόλια να μη θεωρούνται ποτέ δομικοί οριοθέτες.
- 2Διαχωρισμός μπλοκ και δηλώσεωνΌταν ο σαρωτής βρει άγκιστρο ανοίγματος ανώτατου επιπέδου, εξάγει το prelude (τον επιλογέα ή τη λέξη-κλειδί at-rule) και επεξεργάζεται αναδρομικά το σώμα του μπλοκ — το οποίο μπορεί να περιέχει ένθετους κανόνες (@media, @supports, εγγενές CSS nesting) που χειρίζονται σε βαθύτερο επίπεδο αναδρομής.
- 3Ταξινόμηση ιδιοτήτων και εσοχέςΟι δηλώσεις κάθε μπλοκ συγκεντρώνονται και προαιρετικά ταξινομούνται αλφαβητικά κατά όνομα ιδιότητας πριν γραφτούν με το επιλεγμένο πλάτος εσοχής (2 ή 4 κενά). Η λειτουργία ελαχιστοποίησης παραλείπει εντελώς τα κενά και αφαιρεί τα σχόλια.
- 4Άμεση έξοδος στον browserΤα αποτελέσματα εμφανίζονται καθώς πληκτρολογείτε μέσω ενός useMemo hook — τίποτα δεν αποστέλλεται πουθενά. Το μορφοποιημένο ή ελαχιστοποιημένο CSS μπορεί να αντιγραφεί στο πρόχειρο ή να ληφθεί ως αρχείο .css, και το πλαίσιο δείχνει τη διαφορά μεγέθους σε σχέση με το αρχικό.
Σχετικά εργαλεία
Ομορφοποιητής & Συμπιεστής HTML
Μορφοποιήστε ή συμπιέστε HTML με σωστή εσοχή φωλιάσματος. Διατηρεί περιεχόμενο εντός μπλοκ <pre>, <script>, <style>.
Μορφοποιητής & Ομορφοποιητής SQL
Μορφοποιήστε ερωτήματα SQL με σωστή εσοχή, ρυθμιζόμενη πεζοκεφαλαία λέξεων-κλειδιών και αλλαγές γραμμής σε κύριες ρήτρες. Λειτουργεί με οποιαδήποτε διάλεκτο SQL.
Συμπιεστής & Ομορφοποιητής CSS
Συμπιέστε CSS για μείωση μεγέθους αρχείου ή ομορφοποιήστε συμπιεσμένο CSS για αναγνωσιμότητα. Άμεσο, στο πρόγραμμα περιήγησής σας.