Μορφοποίηση CSS online
Εισαγάγετε ένα συμπυκνωμένο φύλλο στυλ και διαβάστε το ξανά με άνεση. Οι επιλογείς εμφανίζονται σε ξεχωριστές γραμμές, κάθε δήλωση στη δική της γραμμή και τα μπλοκ και τα media queries αποκτούν τις εσοχές που θα βάζατε μόνοι σας.
Γιατί η CSS παραγωγής είναι μία μακριά γραμμή
Τα φύλλα στυλ ελαχιστοποιούνται για τον ίδιο λόγο με τα scripts: η CSS καθυστερεί την απόδοση της σελίδας μέχρι να φορτωθεί, οπότε κάθε byte που εξοικονομείται συμβάλλει στην ταχύτερη εμφάνισή της. Τα cssnano, Lightning CSS και οι βελτιστοποιητές των Sass και PostCSS αφαιρούν κενά και σχόλια, συντομεύουν χρωματικές τιμές, συγχωνεύουν διπλούς κανόνες και αφαιρούν το τελευταίο ερωτηματικό κάθε μπλοκ. Τα utility frameworks δίνουν ακόμη πιο πυκνό αποτέλεσμα, καθώς ένα παραγόμενο φύλλο στυλ Tailwind μπορεί να περιέχει χιλιάδες μικρούς κανόνες χωρίς σχεδόν τίποτα ανάμεσά τους.
Διαβάστε ξανά την προτεραιότητα των κανόνων
Ο βασικός λόγος να μορφοποιήσετε ένα φύλλο στυλ είναι να καταλάβετε γιατί ένας κανόνας εφαρμόζεται ή αγνοείται. Όταν κάθε επιλογέας βρίσκεται σε δική του γραμμή και οι δηλώσεις του έχουν εσοχές, μπορείτε να ακολουθήσετε σωστά την αλληλουχία προτεραιότητας: να βρείτε όλους τους κανόνες που στοχεύουν ένα στοιχείο, να συγκρίνετε την ειδικότητά τους, να δείτε ποιος εμφανίζεται τελευταίος και να εντοπίσετε κάποιο ξεχασμένο !important που υπερισχύει. Τα media queries και το περιεχόμενό τους γίνονται ορατά ως μπλοκ, διευκολύνοντας την εξέταση της συμπεριφοράς σε διαφορετικά μεγέθη οθόνης.
Υποστηρίζεται σύγχρονη CSS
Ο μορφοποιητής κατανοεί τη σύγχρονη CSS και όχι ένα περιορισμένο σύνολο παλαιών κανόνων. Προσαρμοσμένες ιδιότητες, εκφράσεις calc και clamp, συντομογραφίες grid και flexbox, container queries, ένθετοι κανόνες, layers, μπλοκ @supports και keyframes μορφοποιούνται σωστά. Οι μεγάλες λίστες επιλογέων χωρίζονται σε γραμμές για να διαβάζονται άνετα και τα σχόλια που επέζησαν από τη διαδικασία παραγωγής διατηρούνται. Αν το αρχείο συνδυάζει κανονική CSS με ιδιότητες που έχουν προθέματα κατασκευαστών, διατηρούνται και οι δύο μορφές, απλώς οργανώνονται με σαφήνεια.
Πρακτική συμβουλή για παραγόμενα φύλλα στυλ
Όταν μορφοποιείτε ένα παραγόμενο φύλλο στυλ Tailwind ή Bootstrap, το αποτέλεσμα γίνεται γρήγορα πολύ μεγάλο. Οι δεκάδες χιλιάδες γραμμές δεν είναι ασυνήθιστες. Ενεργοποιήστε τους αριθμούς γραμμών και χρησιμοποιήστε την αναζήτηση του προγράμματος περιήγησης για το όνομα της κλάσης ή την ιδιότητα που σας ενδιαφέρει, αντί να κάνετε ατελείωτη κύλιση. Αν ο στόχος σας είναι να μικρύνετε το αρχείο και όχι να το διαβάσετε, η ουσιαστική δουλειά γίνεται στις ρυθμίσεις παραγωγής, καθώς οι αχρησιμοποίητοι κανόνες έχουν παραχθεί πριν καν ξεκινήσει η ελαχιστοποίηση.
Συχνές ερωτήσεις
Μπορώ να μορφοποιήσω ένα παραγόμενο φύλλο στυλ Tailwind;
Ναι, είναι μάλιστα μία από τις συνηθέστερες χρήσεις αυτής της σελίδας. Περιμένετε πολύ μεγάλο αποτέλεσμα, επειδή το framework παράγει έναν κανόνα ανά βοηθητική κλάση. Οι αριθμοί γραμμών και η αναζήτηση του προγράμματος περιήγησης είναι ο πρακτικότερος τρόπος πλοήγησης.
Επαναφέρονται τα σχόλια;
Μόνο όσα διατηρήθηκαν στο αρχείο. Οι περισσότεροι ελαχιστοποιητές διαγράφουν όλα τα σχόλια εκτός από όσα περιέχουν νομικές επισημάνσεις. Ό,τι διαγράφηκε δεν μπορεί να ανακτηθεί. Ο μορφοποιητής κρατά και οργανώνει σωστά τα σχόλια που εξακολουθούν να υπάρχουν.
Λειτουργεί με SCSS ή Less;
Αυτή η σελίδα προορίζεται για απλή CSS, δηλαδή αυτήν που λαμβάνει πραγματικά το πρόγραμμα περιήγησης. Πηγαίος κώδικας προεπεξεργαστών με μεταβλητές, mixins και σύνταξη ένθεσης ειδική για SCSS ή Less δεν είναι η προβλεπόμενη είσοδος. Υποστηρίζεται όμως η κανονική CSS με τους τυπικούς ένθετους κανόνες της.