Εργαλείο μορφοποίησης & ελαχιστοποίησης CSS

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

Εσοχή
Συμπίεση
Επικολλήστε ή πληκτρολογήστε CSS για μορφοποίηση ή ελαχιστοποίηση.

Το CSS σας μορφοποιείται και ελαχιστοποιείται τοπικά στο πρόγραμμα περιήγησής σας. Τίποτα δεν μεταφορτώνεται στο BroBroGo.

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

Ποια είναι η διαφορά μεταξύ μορφοποίησης (beautify) και ελαχιστοποίησης (minify);

Η μορφοποίηση (beautify) επαναφέρει τις εσοχές και τα διαστήματα στα στυλ σας ώστε να είναι ευανάγνωστα και εύκολα στην επεξεργασία. Η ελαχιστοποίηση (minify) κάνει το αντίθετο — αφαιρεί τα κενά διαστήματα και τα σχόλια που δεν χρειάζεται ο περιηγητής και συντομεύει τιμές όπως τα χρώματα, ώστε το αρχείο να είναι μικρότερο και να φορτώνει πιο γρήγορα. Μορφοποιήστε κατά την εργασία σας, ελαχιστοποιήστε πριν τη δημοσίευση.

Τι κάνουν οι ρυθμίσεις συμπίεσης «Ασφαλής» και «Βελτιστοποιημένη»;

Η επιλογή «Ασφαλής» αφαιρεί μόνο κενά διαστήματα και σχόλια και συντομεύει τιμές, αφήνοντας κάθε κανόνα ακριβώς εκεί που τον γράψατε. Η επιλογή «Βελτιστοποιημένη» προχωρά παραπέρα και συγχωνεύει διπλότυπους επιλογείς και κανόνες για ακόμη μικρότερο αρχείο — μπορεί να αλλάξει τη σειρά των κανόνων, επομένως σε φύλλα στυλ που βασίζονται στη σειρά προέλευσης αξίζει να κάνετε έναν γρήγορο έλεγχο πριν τη δημοσίευση. Τα σχόλια που επισημαίνονται ως /*! … */ διατηρούνται και στις δύο περιπτώσεις.

Θα αλλάξει η εμφάνιση της σελίδας μου με την ελαχιστοποίηση;

Στην «Ασφαλή» λειτουργία, όχι — τα στυλ σας αποδίδονται ακριβώς με τον ίδιο τρόπο. Συμπτύσσει τα κενά διαστήματα, αφαιρεί τα απλά σχόλια και ξαναγράφει τις τιμές σε συντομότερες ισοδύναμες μορφές (όπως το #ffffff ως #fff), ενώ δεν αλλάζει ποτέ τα vendor prefixes ή τη σύγχρονη σύνταξη. Η «Βελτιστοποιημένη» λειτουργία συγχωνεύει επίσης κανόνες, κάτι που φαίνεται πανομοιότυπο σχεδόν σε κάθε φύλλο στυλ, αλλά αξίζει να το επαληθεύσετε εάν το δικό σας εξαρτάται από τη σειρά των κανόνων.

Εργαλείο μορφοποίησης & ελαχιστοποίησης HTMLΔιορθώστε τις εσοχές σε μπερδεμένο HTML για εύκολη ανάγνωση ή ελαχιστοποιήστε το για γρήγορη φόρτωση — με προαιρετικό έλεγχο για κατεστραμμένες ετικέτες.Βελτιστοποίηση SVGΚαθαρίστε τον κώδικα SVG και μειώστε το μέγεθός του χωρίς να αλλάξετε την εμφάνιση του γραφικού.Εργαλείο μορφοποίησης & ελαχιστοποίησης JavaScriptΔιορθώστε τις εσοχές σε ελαχιστοποιημένο ή συσκοτισμένο JavaScript για να μπορείτε να το διαβάσετε, ή ελαχιστοποιήστε τον δικό σας κώδικα για μικρότερο μέγεθος.Υπολογιστής CSS clamp()Εισαγάγετε ένα μέγεθος για μικρές και μεγάλες οθόνες και λάβετε μια ρευστή τιμή clamp() που κλιμακώνεται ομαλά ενδιάμεσα — για γραμματοσειρές, padding, περιθώρια ή κενά.Γεννήτρια διαβαθμίσεων (Gradient)Δημιουργήστε μια γραμμική, ακτινωτή ή κωνική διαβάθμιση, προσθέστε σημεία χρώματος, ορίστε την κατεύθυνση και αντιγράψτε το CSS με ένα κλικ.Γεννήτρια Box ShadowΣύρετε τα ρυθμιστικά για να διαμορφώσετε μια σκιά πλαισίου, συνδυάστε επίπεδα για βάθος και αντιγράψτε το έτοιμο CSS αμέσως.Μετατροπέας χρωμάτωνΜετατρέψτε χρώματα μεταξύ HEX, RGB, HSL, HSV, CMYK και LAB — επεξεργαστείτε οποιοδήποτε πεδίο και τα υπόλοιπα ενημερώνονται αυτόματα.Μορφοποιητής JSONΜορφοποιήστε, επικυρώστε και ελαχιστοποιήστε JSON άμεσα.