Ο μορφοποιητής χρησιμοποιεί έναν σαρωτή που κατανοεί τη σύνταξη αντί να χωρίζει μηχανικά το κείμενο σε κάθε άγκιστρο και ελληνικό ερωτηματικό. Παρακολουθεί συμβολοσειρές, σχόλια, συναρτήσεις, επιλογείς γνωρισμάτων και ένθετα μπλοκ. Έτσι, τα σημεία μέσα σε URL ή τιμές με εισαγωγικά παραμένουν άθικτα.
CSS Formatter online
Λειτουργεί εξ ολοκλήρου στον browser σας - χωρίς μεταφόρτωση, χωρίς εγγραφή.
CSS εισόδου
Μορφοποιημένο CSS
Επικολλήστε CSS για μορφοποίηση
Πώς μορφοποιείται το CSS online;
Το CSS Formatter μετατρέπει ένα ελαχιστοποιημένο φύλλο στυλ ή κώδικα με ασυνεπή κενά σε ευανάγνωστο κείμενο με ομοιόμορφες εσοχές και αλλαγές γραμμής. Επικολλήστε το CSS, επιλέξτε δύο κενά, τέσσερα κενά ή tab και αντιγράψτε ή κατεβάστε το αποτέλεσμα. Η επεξεργασία γίνεται στον φυλλομετρητή και διατηρεί σχόλια, τιμές σε εισαγωγικά, data URL και τη σειρά των δηλώσεων.
Πώς λειτουργεί
- 1Επικολλήστε το CSS. Προσθέστε στο πεδίο εισόδου ένα φύλλο στυλ, ένα μπλοκ επιλογέων ή ένα τμήμα ελαχιστοποιημένου CSS.
- 2Επιλέξτε εσοχή. Διαλέξτε δύο κενά, τέσσερα κενά ή tab. Το μορφοποιημένο αποτέλεσμα ενημερώνεται καθώς πληκτρολογείτε.
- 3Ελέγξτε την κατάσταση. Δείτε τις μετρήσεις δομής ή διορθώστε το ασύζευκτο διαχωριστικό, το ανοικτό σχόλιο ή τη μη κλεισμένη συμβολοσειρά που επισημαίνεται.
- 4Αντιγράψτε ή κατεβάστε. Αντιγράψτε το μορφοποιημένο CSS στο πρόχειρο ή αποθηκεύστε το ως formatted.css.
Σε ποιους απευθύνεται
- Προγραμματιστές front-end που αναπτύσσουν CSS παραγωγής για ευκολότερη ανάγνωση και αποσφαλμάτωση.
- Αξιολογητές κώδικα που ενοποιούν τις εσοχές πριν συγκρίνουν ένα αντιγραμμένο φύλλο στυλ ή τμήμα αιτήματος συγχώνευσης.
- Σπουδαστές που θέλουν να διακρίνουν καθαρότερα ένθετα media queries, επιλογείς και μπλοκ δηλώσεων.
- Ομάδες υποστήριξης και QA που τακτοποιούν CSS από τα εργαλεία προγραμματιστή πριν το προσθέσουν σε αναφορά ή βήματα αναπαραγωγής.
Συχνές ερωτήσεις
Είναι δωρεάν το CSS Formatter;
Ναι. Μπορείτε να μορφοποιήσετε όσο CSS μπορεί να επεξεργαστεί άνετα ο φυλλομετρητής. Δεν χρειάζεται λογαριασμός ή εγκατάσταση, δεν υπάρχει όριο χρήσης και το αποτέλεσμα εμφανίζεται αμέσως.
Αποστέλλεται το CSS μου σε διακομιστή;
Όχι. Η μορφοποίηση εκτελείται τοπικά στον φυλλομετρητή. Το CSS που επικολλάτε παραμένει στον επεξεργαστή της σελίδας και δεν αποστέλλεται σε κανένα API, οπότε μπορεί να χρησιμοποιηθεί και για στυλ ιδιωτικών έργων.
Πόσο CSS μπορώ να μορφοποιήσω;
Το εργαλείο δεν θέτει σταθερό όριο χαρακτήρων. Τα πολύ μεγάλα παραγόμενα φύλλα στυλ εξαρτώνται από τη μνήμη και την απόδοση της συσκευής, αλλά τα συνηθισμένα στυλ ιστοτόπων, στοιχείων και email μορφοποιούνται αμέσως.
Η μορφοποίηση αλλάζει τη λειτουργία του CSS;
Αλλάζει μόνο τα κενά και τις αλλαγές γραμμής. Οι επιλογείς, οι δηλώσεις, τα σχόλια, οι συμβολοσειρές σε εισαγωγικά και η σειρά τους διατηρούνται. Ελέγξτε το αποτέλεσμα πριν από τη δημοσίευση, ειδικά με πειραματική σύνταξη ή ασυνήθιστες ακολουθίες διαφυγής που εξαρτώνται από κενά.
Το εργαλείο επικυρώνει ιδιότητες CSS;
Όχι. Ελέγχει την ισορροπία αγκίστρων, αγκυλών, παρενθέσεων, σχολίων και συμβολοσειρών. Δεν εξετάζει αν κάθε ιδιότητα, τιμή ή λειτουργία συγκεκριμένου φυλλομετρητή είναι έγκυρη. Για αυτό χρειάζεται επικυρωτής CSS βασισμένος στα πρότυπα.
Μπορεί να μορφοποιήσει media queries και ένθετο CSS;
Ναι. Τα μπλοκ μέσα στους κανόνες @media, @supports, @container, @layer και @keyframes αποκτούν εσοχή ανάλογα με το βάθος τους. Οι σύγχρονοι ένθετοι επιλογείς μορφοποιούνται επίσης χωρίς αλλαγή των συμβολοσειρών ή των ορισμάτων συναρτήσεων.