CDRN

Μορφοποίηση και εσοχή CSS

  • Πίνακας ελέγχου
  • Τεκμηρίωση
  • API
μορφοποιεί τους CSS κανόνες σας ώστε να είναι αναγνώσιμοι και κατανοητοί, διευκολύνοντας την ανάπτυξη και τη συντήρηση

Γιατί να χρησιμοποιήσετε ένα εργαλείο μορφοποίησης CSS;

Η μορφοποίηση κώδικα CSS είναι απαραίτητη για τους προγραμματιστές να διατηρούν καθαρό και ευανάγνωστο κώδικα. Αυτό το εργαλείο απλοποιεί τη διαδικασία επιτρέποντας τη μορφοποίηση του κώδικα CSS γρήγορα και με ακρίβεια, διευκολύνοντας τη συντήρηση και τη συνεργασία σε έργα.

Χαρακτηριστικά του Εργαλείου Μορφοποίησης CSS

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

Πώς να χρησιμοποιήσετε το εργαλείο μορφοποίησης CSS

Για να χρησιμοποιήσετε το εργαλείο μορφοποίησης CSS, ακολουθήστε αυτά τα απλά βήματα:

  1. Εισαγάγετε τον κωδικό CSS σας στο πεδίο που παρέχεται.
  2. Κάντε κλικ στο κουμπί "Μορφοποίηση". Το εργαλείο θα μορφοποιήσει τον κώδικα CSS για καλύτερη αναγνωσιμότητα.
  3. Αντιγράψτε τον μορφοποιημένο κώδικα CSS για χρήση στα έργα σας.

Παράδειγμα χρήσης του εργαλείου μορφοποίησης CSS

Φωνή για παράδειγμα κώδικα CSS προηγουμένως και πριν από τη διαμόρφωση: 


Avant le formatage:
body{font-family:Arial,sans-serif;background-color:#f0f0f0;margin:0;padding:0;}.container{width:80%;margin:0 auto;}.header{background-color:#333;color:#fff;padding:20px;center-text;al

Après le formatage:
σώμα {
    γραμματοσειρά-οικογένεια: Arial, sans-serif;
    χρώμα φόντου: #f0f0f0;
    περιθώριο: 0;
    padding: 0;
}

.container {
    πλάτος: 80%;
    περιθώριο: 0 αυτόματο;
}

.κεφαλίδα {
    χρώμα φόντου: #333;
    χρώμα: #fff;
    padding: 20px;
    text-align: κέντρο;
}

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

Ποια είναι η διαφορά μεταξύ ενός μορφοποιητή CSS, ενός μινιμοποιητή και ενός βελτιωτικού;

Ένας μορφοποιητής CSS (ή βελτιωτικό) ξαναγράφει ένα συμπαγές αρχείο σε μια εσοχή και αναγνώσιμη έκδοση. Ένας minifier κάνει το αντίθετο: αφαιρεί κενά, νέες γραμμές και σχόλια για να μειώσει το μέγεθος του αρχείου που προβάλλεται στην παραγωγή. Το εργαλείο μας εστιάζει στη μορφοποίηση: παίρνει ένα ελαχιστοποιημένο ή με κακή εσοχή φύλλο CSS και το μορφοποιεί ξανά με συνεπή εσοχή, ιδιότητα ανά ιδιότητα.

Η μορφοποίηση διατηρεί τα σχόλια CSS;

Τα σχόλια /* ... */ διατηρούνται ως έχουν από προεπιλογή. Τα σχόλια άδειας χρήσης στο επάνω μέρος του αρχείου (/*! ... */) καθώς και τα βοηθητικά σχόλια (TODO, FIXME) παραμένουν άθικτα, στη δική τους γραμμή. Εάν θέλετε να τα αφαιρέσετε για να δημιουργήσετε ένα αρχείο παραγωγής, χρησιμοποιήστε έναν αποκλειστικό μίνι αντ' αυτού.

Υποστηρίζονται τα προθέματα προμηθευτή (-webkit-, -moz-);

Ναι. Τα προθέματα προμηθευτή αντιμετωπίζονται σαν συνηθισμένες ιδιότητες: έχουν εσοχές και ευθυγραμμίζονται με το υπόλοιπο μπλοκ. Ο μορφοποιητής δεν δημιουργεί ούτε αφαιρεί προθέματα: απλώς μορφοποιεί αυτό που παρέχεται. Για να προσθέσετε αυτόματα προθέματα που λείπουν, χρησιμοποιήστε το Autoprefixer στη διοχέτευση κατασκευής.

Διαχειρίζεται ο μορφοποιητής ερωτήματα πολυμέσων και ένθετους κανόνες;

Ναι. Τα @media, @supports, @keyframes και άλλοι at-rules έχουν εσοχές με τους κανόνες τους να είναι ένθετοι μέσα στις αγκύλες. Η εγγενής ένθεση CSS (& σε έναν γονικό κανόνα) αναγνωρίζεται επίσης και μορφοποιείται σωστά, όπως μπλοκ SCSS ή Less συμβατά με τυπική σύνταξη CSS.

Μπορώ να μορφοποιήσω SCSS, Less ή Stylus;

Το εργαλείο στοχεύει το τυπικό CSS. Οι εκτεταμένες συντάξεις (μίξεις SCSS, λιγότερες μεταβλητές με @, σύνταξη χωρίς άγκιστρα γραφίδας) δεν γίνονται κατανοητές από τον αναλυτή και μπορούν να παράγουν ένα υποβαθμισμένο αποτέλεσμα. Για αυτές τις γλώσσες, χρησιμοποιήστε αντ 'αυτού τις sass --style=expanded, lessc ή έναν αποκλειστικό μορφοποιητή όπως το Prettier με τη σωστή προσθήκη.

Επικυρώνει ο μορφοποιητής τη σύνταξη CSS;

Ο μορφοποιητής εκτελεί ελάχιστη συντακτική ανάλυση: προσδιορίζει μπλοκ, επιλογείς και δηλώσεις. Αναφέρει χονδροειδή λάθη (μη κλειστή αγκύλη, λείπει ερωτηματικό στο τέλος του μπλοκ) αλλά δεν επικυρώνει ονόματα ή τιμές ιδιοτήτων. Για πλήρη επικύρωση, χρησιμοποιήστε την υπηρεσία W3C CSS Validator.

Παράδειγμα αιτήματος

curl -X POST https://cdrn.fr/api/v1/tools/css-formatter/execute \
  -H "Content-Type: application/json" \
  -d '{"input":"..."}'

Σχήμα εισόδου

Πεδίο Τύπος Απαιτείται Προεπιλογή
input text ✓ –

Σημεία πρόσβασης

  • GET https://cdrn.fr/api/v1/tools - εμφανίζει όλα τα διαθέσιμα εργαλεία
  • GET https://cdrn.fr/api/v1/tools/css-formatter - ανακτά το σχήμα αυτού του εργαλείου
  • POST https://cdrn.fr/api/v1/tools/css-formatter/execute - εκτελεί αυτό το εργαλείο με payload JSON