Μορφοποιητής CSS
Μορφοποιήστε ελαχιστοποιημένα ή ακατάστατα φύλλα στυλ με αυτόν τον μορφοποιητή CSS. Επικολλήστε το CSS και το εργαλείο το αναλύει, έπειτα εκτυπώνει κάθε κανόνα με τον επιλογέα του σε μία γραμμή, κάθε δήλωση σε ξεχωριστή γραμμή με εσοχή δύο διαστημάτων, ένα διάστημα μετά από κάθε άνω και κάτω τελεία, κενά γύρω από τους συνδυαστές και ένθετους κανόνες at, όπως τα ερωτήματα μέσων. Τα σφάλματα ανάλυσης αναφέρονται. Ιδανικό για προγραμματιστές ιστού και σχεδιαστές που διαβάζουν, εντοπίζουν σφάλματα ή αναθεωρούν φύλλα στυλ από οποιαδήποτε πηγή.
Συχνές ερωτήσεις
Πώς λειτουργεί ο μορφοποιητής CSS;
Αναλύει το φύλλο στυλ σε κανόνες, δηλώσεις και κανόνες at και τα εκτυπώνει ξανά με συνεπή διάταξη. Επειδή το CSS αναλύεται, το αποτέλεσμα αποτυπώνει την πραγματική δομή του φύλλου στυλ.
Πώς είναι το μορφοποιημένο CSS;
Κάθε κανόνας αρχίζει με τον επιλογέα του και ένα άγκιστρο ανοίγματος, κάθε δήλωση τοποθετείται στη δική της γραμμή με εσοχή δύο διαστημάτων και ένα διάστημα μετά την άνω και κάτω τελεία, ενώ το άγκιστρο κλεισίματος έχει τη δική του γραμμή. Οι λίστες επιλογέων ενώνονται με κόμμα και διάστημα, ενώ γύρω από τους συνδυαστές όπως > και ~ τοποθετούνται κενά.
Υποστηρίζονται τα ερωτήματα μέσων και άλλοι κανόνες at;
Ναι, οι κανόνες μέσα σε μπλοκ @media, @supports και παρόμοια ένθετα στοιχεία αποκτούν εσοχή. Δηλώσεις όπως η @import παραμένουν σε μία γραμμή, με τις τιμές url() γραμμένες σε εισαγωγικά.
Τι συμβαίνει με μη έγκυρο CSS;
Όταν ο αναλυτής δεν μπορεί να διαβάσει το φύλλο στυλ, για παράδειγμα επειδή λείπει ένα άγκιστρο, το εργαλείο διακόπτεται και εμφανίζει το μήνυμα του αναλυτή μαζί με τον αριθμό γραμμής. Διορθώστε το σημείο που αναφέρεται και μορφοποιήστε ξανά.
Διατηρούνται τα σχόλια;
Ναι, τα σχόλια διατηρούνται τόσο ανάμεσα σε κανόνες όσο και ανάμεσα σε δηλώσεις. Κάθε σχόλιο τοποθετείται στη δική του γραμμή, με εσοχή που αντιστοιχεί στον περιβάλλοντα κώδικα.
Υποστηρίζονται οι προσαρμοσμένες ιδιότητες;
Ναι, οι προσαρμοσμένες ιδιότητες όπως --brand-color μορφοποιούνται όπως κάθε άλλη δήλωση. Οι αναφορές όπως var(--brand-color) διατηρούνται όπως είναι.
Μπορώ να μορφοποιήσω SCSS ή Less εδώ;
Όχι, αυτή η σελίδα αναμένει απλό CSS και ενδέχεται να απορρίψει ένθετους κανόνες ή μεταβλητές από προεπεξεργαστές. Για αυτά τα αρχεία, χρησιμοποιήστε το SCSS Formatter ή το Less Formatter.
Μπορώ να αλλάξω την εσοχή ή το στυλ των αγκυλών;
Όχι, ο μορφοποιητής δεν έχει επιλογές και χρησιμοποιεί πάντα δύο κενά, με την ανοικτή αγκύλη στη γραμμή του επιλογέα. Έτσι, τα αποτελέσματα παραμένουν ομοιόμορφα σε κάθε φύλλο στυλ.
Γιατί το αποτέλεσμα περικλείεται σε μπλοκ κώδικα css;
Το αποτέλεσμα επιστρέφεται ως μπλοκ κώδικα Markdown με την ένδειξη css, ώστε να εμφανίζεται με επισήμανση σύνταξης στο Markdown. Αντιγράψτε τις γραμμές ανάμεσα στους οριοθέτες για το αρχείο .css.
Πόσο μεγάλο μπορεί να είναι το φύλλο στυλ μου;
Έως 5 MB ανά εκτέλεση· μεγαλύτερη είσοδος απορρίπτεται με σχετικό μήνυμα. Το αποτέλεσμα είναι ίδιο με την επιλογή CSS του Code Formatter.