Πώς λειτουργεί η ομορφοποίηση CSS
Το εργαλείο ομορφοποίησης διαβάζει το φύλλο στυλ σας χαρακτήρα προς χαρακτήρα, παρακολουθεί πόσο βαθιά είναι ένθετο κάθε μπλοκ και το αναπαράγει με συνεπή διαστήματα. Δεν αλλάζει ποτέ αυτό που κάνουν τα στυλ — μόνο το πώς φαίνονται στο αρχείο.
- Tokenize. Η βιβλιοθήκη σαρώνει την είσοδό σας σε μια ροή tokens: επιλογείς, ονόματα ιδιοτήτων, τιμές, at-rules, σχόλια και τις αγκύλες, άνω και κάτω τελείες και ερωτηματικά που τα διαχωρίζουν.
- Παρακολούθηση ένθεσης. Καθώς διατρέχει τη ροή tokens, το εργαλείο διατηρεί ένα τρέχον επίπεδο εσοχής. Κάθε άνοιγμα αγκύλης ωθεί το επίπεδο βαθύτερα και κάθε κλείσιμο αγκύλης το επαναφέρει.
- Εφαρμογή επιλογών. Η επιλογή εσοχής σας (2 κενά, 4 κενά ή στηλοθέτης) ορίζει το πλάτος ενός επιπέδου. Η ρύθμιση στυλ αγκύλης αποφασίζει αν η αγκύλη ανοίγματος είναι στην ίδια γραμμή με τον επιλογέα ή πέφτει στη δική της γραμμή.
- Αναπαραγωγή. Τέλος, ο μορφοποιητής εκτυπώνει ξανά τα tokens με την εσοχή και τις αλλαγές γραμμής που έχει υπολογίσει, βάζοντας μία δήλωση ανά γραμμή και ένα κενό μετά από κάθε άνω και κάτω τελεία.
Γιατί να ομορφοποιήσετε CSS
- Ανάγνωση συμπιεσμένων φύλλων στυλ. Το CSS παραγωγής αποστέλλεται σε μία γραμμή χωρίς διαστήματα μεταξύ κανόνων. Η ομορφοποίηση αποκαθιστά τις αλλαγές γραμμής και την εσοχή ώστε να μπορείτε να βρείτε τον επιλογέα πίσω από ένα σφάλμα διάταξης.
- Τακτοποίηση ασυνεπών αρχείων. Ένα φύλλο στυλ που έχει πειραχτεί από πολλά άτομα αποκτά μικτή εσοχή και στυλ αγκύλης. Ένα πέρασμα από το εργαλείο ομορφοποίησης κανονικοποιεί ολόκληρο το αρχείο σε μια ενιαία διάταξη.
- Αυτό το εργαλείο δεν επιβαρύνει τη σελίδα σας. Τα περισσότερα online εργαλεία μορφοποίησης φορτώνουν ολόκληρη τη βιβλιοθήκη τους μόλις ανοίξετε τη σελίδα. Αυτό φορτώνει το js-beautify μόνο όταν κάνετε κλικ στο Ομορφοποίηση ή ενεργοποιείτε τη Ζωντανή λειτουργία.
- Τίποτα δεν εγκαταλείπει το πρόγραμμα περιήγησής σας. Το εργαλείο ομορφοποίησης λειτουργεί εξ ολοκλήρου στη συσκευή σας. Το CSS σας δεν μεταφορτώνεται ποτέ σε διακομιστή.
Κοινές εφαρμογές
Η ομορφοποίηση CSS χρειάζεται όποτε κάποιος πρέπει να διαβάσει ένα φύλλο στυλ που δεν γράφτηκε για να διαβαστεί.
- Εντοπισμός σφαλμάτων παραγωγής: επικολλήστε ένα συμπιεσμένο φύλλο στυλ από την καρτέλα Network για να βρείτε τον κανόνα που παρακάμπτει τη διάταξη που περιμένατε.
- Προετοιμασία αναθεώρησης κώδικα: αναμορφώστε ένα ασυνεπές φύλλο στυλ ενός συνεργάτη πριν ανοίξετε το pull request.
- Εκμάθηση και έλεγχος: επεκτείνετε ένα φύλλο στυλ πλαισίου ή βιβλιοθήκης στοιχείων για να μελετήσετε τη δομή των επιλογέων, των media queries και των custom ιδιοτήτων του.
Ένα παράδειγμα
Πάρτε μια συμπιεσμένη μονόγραμμη: a{color:red;margin:0}b{padding:0}. Επικολλήστε την παραπάνω με εσοχή 2 κενών και στυλ αγκύλης Σύμπτυξη, μετά κάντε κλικ στο Ομορφοποίηση. Παίρνετε πίσω αναγνώσιμα μπλοκ.
FAQ
Αυτό λειτουργεί στο πρόγραμμα περιήγησής μου;
Ναι. Η βιβλιοθήκη js-beautify φορτώνεται την πρώτη φορά που κάνετε κλικ στο Ομορφοποίηση ή ενεργοποιείτε τη Ζωντανή λειτουργία και στη συνέχεια αποθηκεύεται στην κρυφή μνήμη. Το CSS σας δεν εγκαταλείπει ποτέ τη σελίδα.
Είναι η ομορφοποίηση το ίδιο με την αποσυμπίεση;
Αποκαθιστά την αναγνώσιμη μορφοποίηση — εσοχή, αλλαγές γραμμής και διαστήματα — αλλά δεν μπορεί να φέρει πίσω σχόλια που η συμπίεση αφαίρεσε ή να ανακτήσει δομή που δεν υπήρχε ποτέ στο αρχείο.
Θα αλλάξει η ομορφοποίηση τον τρόπο που αποδίδονται τα στυλ μου;
Όχι. Η ομορφοποίηση προσθέτει και αφαιρεί μόνο κενά και αλλαγές γραμμής· η διάταξη παραμένει ανέπαφη και η σελίδα αποδίδεται πανομοιότυπα.
Τι σημαίνουν οι επιλογές στυλ αγκύλης;
Η Σύμπτυξη κρατά την αγκύλη ανοίγματος στην ίδια γραμμή με τον επιλογέα (a {), που είναι η κοινή σύμβαση CSS. Η Επέκταση ρίχνει κάθε αγκύλη ανοίγματος στη δική της γραμμή κάτω από τον επιλογέα.
Η ομορφοποίηση CSS από την πλευρά του προγράμματος περιήγησης σας δίνει ένα αναγνώσιμο φύλλο στυλ χωρίς βήμα δημιουργίας ή μεταφόρτωση. Επικολλήστε ένα συμπιεσμένο ή ακατάστατο αρχείο, επιλέξτε την εσοχή και το στυλ αγκύλης σας και αντιγράψτε ή κατεβάστε το αποτέλεσμα.