Εξωραϊστής/μορφοποιητής CSS online

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

Ο εξωραϊστής CSS είναι ένα ελαφρύ εργαλείο μορφοποίησης που λειτουργεί εξ ολοκλήρου στον browser. Δεν ανεβάζει αρχεία σε διακομιστή. Μετατρέπει τον κώδικά σας σε αναγνώσιμη μορφή ή τον συμπιέζει για μικρότερο μέγεθος.

Παράδειγμα εξωραϊσμού

Είσοδος: body{color:red;margin:0;}

Έξοδος με εσοχή δύο κενών:

body {
  color: red;
  margin: 0;
}

Ο εξωραϊσμός αφαιρεί επιπλέον κενά, χωρίζει τους κανόνες γύρω από άγκιστρα και ερωτηματικά, και προσθέτει εσοχές ανάλογα με το βάθος των μπλοκ.

Παράδειγμα συμπίεσης

Είσοδος: /* σχόλιο */ body { color: red; margin: 0; }

Έξοδος: body{color:red;margin:0}

Η συμπίεση αφαιρεί τα σχόλια μπλοκ, τα περιττά κενά γύρω από άγκιστρα, άνω και κάτω τελείες, ερωτηματικά και κόμματα, και αφαιρεί το τελευταίο ερωτηματικό πριν από το κλείσιμο άγκιστρου.

Περιορισμοί

Το εργαλείο δεν είναι πλήρης αναλυτής ή επικυρωτής CSS. Δεν υπολογίζει το μέγεθος gzip, δεν δημιουργεί source maps, δεν αναδιατάσσει ιδιότητες, δεν προσθέτει vendor prefixes, δεν ελέγχει συμβατότητα και δεν διορθώνει επιλογείς. Σε περίπτωση πολύπλοκων συμβολοσειρών, τιμών custom properties, data URLs ή σχολίων που χρησιμοποιούνται ως οδηγίες, το αποτέλεσμα μπορεί να μην είναι σημασιολογικά ισοδύναμο. Ελέγξτε το αποτέλεσμα σε browser ή σε build pipeline.

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

Μπορώ να μορφοποιήσω αρχείο CSS μεγάλο σε μέγεθος;

Ναι, αρκεί να μην υπερβαίνει τους 500.000 χαρακτήρες ανά εισαγωγή.

Γιατί το συμπιεσμένο αποτέλεσμα δεν είναι πάντα έγκυρο;

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

Μπορώ να επιλέξω τον αριθμό των κενών για την εσοχή;

Ναι, έχετε τρεις επιλογές: δύο κενά, τέσσερα κενά ή tab.

Λίστα ελέγχου

• Επικολλήστε έγκυρο CSS.
• Επιλέξτε την επιθυμητή εσοχή.
• Επιλέξτε Beautify ή Minify.
• Ελέγξτε το αποτέλεσμα για τυχόν προβλήματα.