11 κορυφαίοι συντάκτες CSS - Ανασκόπηση

1. Stylizer

Συμβατότητα: WindowsΣημαντική δυνατότητα: Κώδικας Πλέγμα, Μεγέθους, Bullseye, Χρώμα δύο κλικ

Το Stylizer είναι ένας απολύτως μοναδικός επεξεργαστής CSS στον οποίο εστιάζει επεξεργασία CSS σε πραγματικό χρόνο. Μπορείτε να εισάγετε μια διεύθυνση web στο ενσωματωμένο πρόγραμμα περιήγησης που υποστηρίζει τον ορισμό στυλ του Firefox 3.5 και του IE7 και θα έχει όλους τους σχετικούς κανόνες CSS φορτωμένους για να επεξεργαστείτε με το οικείο interface point-and-click.

Ο επεξεργαστής έρχεται με ένα Κωδικός Πλέγμα χαρακτηριστικό που καθιστά την επεξεργασία CSS πιο εύκολη καθώς μπορείτε να δείτε το αποτέλεσμα αμέσως μετά την αλλαγή της τιμής. Επίσης με το διαγνωστικό του Bullseye μπορείτε να προβάλετε τα συνδεδεμένα στοιχεία σε συγκεκριμένο τμήμα του ιστότοπου και να τα επεξεργαστείτε με σημεία και κλικ. Άλλα χαρακτηριστικά όπως Μέγεθος λαβές σας επιτρέπει να ρυθμίσετε οπτικά τη θέση ενός στοιχείου CSS, και με Κάντε διπλό κλικ στο Coloring (Χρωματισμός) μπορείτε να επιλέξετε οποιοδήποτε χρώμα για, για παράδειγμα, τη γραμματοσειρά του ιστότοπού σας. OH, αναφέρω ότι όλες αυτές οι επεξεργασίες γίνονται σε πραγματικό χρόνο, άμεσα ορατό αποτέλεσμα?

Με Stylizer είναι απλώς αδύνατο να κάνετε ένα σφάλμα CSS, καθώς θα σας εμπόδιζε να τοποθετήσετε οποιαδήποτε αξία που δεν είναι συμβατή με την αντίστοιχη ιδιότητα CSS. Ωστόσο, το λογισμικό θα αποτύχει να φορτώσει μερικές φορές κάποιο αρχείο CSS, λόγω του ανεξήγητου κρίσιμου σφάλματός του.

Stylizer έρχεται με έκδοση Basic και Ultimate. Ενώ η βασική έκδοση είναι εντελώς δωρεάν, η έκδοση Ultimate είναι διαθέσιμη σε εσάς για 14 ημέρες μετά την εγκατάσταση, τότε προσφέρει $ 85 για να συνεχίσετε να χρησιμοποιείτε τις προηγμένες λειτουργίες της όπως το Bullseye.

2. TopStyle

Συμβατότητα: WindowsΣημαντική δυνατότητα: Επιθεωρητής στυλ, Sweeper στυλ, CSS Tidy

Το πρόγραμμα επεξεργασίας CSS του TopStyle αρχίζει να σας καταπλήσσει από την πρώτη του διαμόρφωση χρόνου, όταν μπορείτε να επιλέξετε έναν ορισμό στυλ που να δείχνει μόνο ιδιότητες και τιμές που υποστηρίζονται από τον Firefox, τον Internet Explorer, το Safari ή ακόμα και το iPhone OS 2.0. Σχεδιαστής ιστοσελίδων.

Ανάμεσα σε όλα τα χαρακτηριστικά που βρήκα Επιθεωρητής στυλ είναι ιδιαίτερα χρήσιμο, καθώς λειτουργεί ως πίνακας για να σας επιτρέψει να συμπεριλάβετε οποιαδήποτε ιδιότητα CSS με απλό interface point-and-click. Όταν ολοκληρώσετε την επιλογή όλων των ιδιοτήτων CSS που θέλετε, θα δημιουργηθεί αυτόματα ο πηγαίος κώδικας για να εξοικονομήσετε χρόνο από την επαναλαμβανόμενη και κουραστική κωδικοποίηση.

Ένα άλλο καλό πράγμα για Κορυφαίο στύλ εμφανίζει τη συμβατότητα του προγράμματος περιήγησης κάτω από τον επιθεωρητή στυλ που μπορείτε να δείτε είτε η ιδιότητα CSS υποστηρίζεται πλήρως από κάποια έκδοση του προγράμματος περιήγησης ιστού όπως ο Internet Explorer 7 ή είναι τρομερά buggy.

Ο επεξεργαστής έρχεται ως δοκιμαστική έκδοση με περιορισμένο χαρακτηριστικό και μπορείτε να ξεκλειδώσετε το πλήρες δυναμικό του κατά 79,95 δολάρια.

3. Κύριος στυλ

Συμβατότητα: Windows, Mac OS XΣημαντική δυνατότητα: Πρότυπο φύλλου στυλ

Ισχυρισμένος ως πλοίαρχος, ο Master Style έκανε αρκετά καλά για να δημιουργήσει ένα περιβάλλον επεξεργασίας CSS για οποιοδήποτε επίπεδο εμπειρίας. Το λογισμικό όχι μόνο παρέχει επεξεργαστή WYSIWYG που εξομαλύνει τη ροή εργασίας για αρχάριους CSS, αλλά και σας δίνει πρόσβαση στις πολύ λεπτομερείς πληροφορίες σχετικά με κάθε ιδιότητα CSS για να συμβουλευτείτε τους ειδικούς. Μπορείτε να περιηγηθείτε και να επιλέξετε τις ιδιότητες CSS είτε με βάση την κατηγορία είτε με αλφαβητική σειρά.

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

Μπορείτε να απολαύσετε το πλήρως εξοπλισμένο λογισμικό για 30 ημέρες και να πληρώσετε είτε 59,99 δολάρια ή 29,99 δολάρια για την άδεια εκπαίδευσης για να ανοίξετε πλήρως τις δυνατότητές του ξανά.

4. Xyle Scope

Συμβατότητα: ΜακΣημαντική δυνατότητα: Λειτουργία επιλογής, έξυπνη ομάδα, ενσωμάτωση επεξεργαστή κειμένου

Το Xyle Scope είναι α πρέπει να έχετε ελεύθερο πρόγραμμα επεξεργασίας CSS για Mac, καθώς είναι ένας πραγματικά επαγγελματικός συντάκτης CSS που σας επιτρέπει να κάνετε πλοήγηση στον ιστότοπο, ενώ μπορείτε να ρυθμίσετε την CSS απευθείας μέσα στον επεξεργαστή.

Το πρόγραμμα περιήγησης του Xyle έρχεται με κανονική λειτουργία περιήγησης και επιλογής που λειτουργεί αρκετά παρόμοια με το Firefox plugin Firebug που παρέχει την προβολή και επεξεργασία των πηγών CSS, εκτός από το ότι ο επεξεργαστής σάς επιτρέπει να αποθηκεύσετε τις τροποποιημένες τιμές CSS στην αρχική τους θέση.

Χρησιμοποιώντας το 'Smart Group', μπορείτε να φιλτράρετε όλους τους κανόνες που επηρεάζουν τον τρόπο με τον οποίο εμφανίζονται οι σύνδεσμοι ή εκείνοι που είναι υπεύθυνοι για τη διάταξη, μπορείτε ακόμη και να περιορίσετε το αποτέλεσμα με την ενσωματωμένη λειτουργία αναζήτησης, χωρίς άλλη μέθοδο δοκιμής και σφάλματος!

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

5. Ταχεία CSS

Συμβατότητα: WindowsΣημαντική δυνατότητα: Αναγν. Σύνταξης, ολοκλήρωση κώδικα, μορφοποίηση CSS

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

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

Ο επεξεργαστής έρχεται με περίοδο αξιολόγησης 30 ημερών με 30 χρήσεις, μπορείτε να πάτε για πλήρη έκδοση κατά 29,85 δολάρια.

6. Studio στυλ

Συμβατότητα: WindowsΣημαντική δυνατότητα: CSS Wizard, IntelliStyle

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

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

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

Το μειονέκτημα αυτού του επεξεργαστή θα ήταν η ξεπερασμένη υποστήριξη του ορισμού του στυλ του προγράμματος περιήγησης, καθώς υποστηρίζει μόνο μέχρι το IE6 και, ασφαλώς, χωρίς τον Firefox.

Σας παρέχεται 30 ημέρες για να απολαύσετε το λογισμικό και 49,99 δολάρια για να το αγοράσετε.

7. CSSEdit

Συμβατότητα: ΜακΣημαντική δυνατότητα: Επιθεωρητής ακτίνων Χ, Visual Editor, Selector Builder

Σχεδιάστε όμορφες, καινοτόμες και γρήγορες τοποθεσίες web με μια όμορφη, πρωτοποριακή και γρήγορη εφαρμογή, η οποία είναι CSSEdit by MacRabbit. Από χαρακτηριστικά όπως το Selector Builder μέχρι το έξυπνο περιβάλλον πηγής, το CSSEdit έχει σχεδιαστεί για οποιοδήποτε επίπεδο εμπειρίας.

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

Το καινοτόμο μέρος του CSSEdit είναι πιθανώς το δικό του Επιλογέας Builder που σας επιτρέπει να περιγράψετε το στυλ CSS με καθαρά αγγλικά, όχι πολύ ενδιαφέρον για έναν ειδικό αλλά χρήσιμο για απόλυτο αρχάριο.

Η έκδοση επίδειξης σας περιορίζει την αποθήκευση αρχείου με λιγότερους από 2500 χαρακτήρες, ενώ μπορείτε να πληρώσετε 39,95 δολάρια για να εξαλείψετε όλους τους περιορισμούς.

8. Επεξεργαστής CSS EngInSite

Συμβατότητα: WindowsΣημαντική δυνατότητα: Μέσο μέτρησης στη λειτουργία Προεπισκόπηση

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

Σε αυτόν τον επεξεργαστή, μπορείτε να προσθέσετε τον επιλογέα κλάσης, id και στοιχείου με τη βοήθεια του ενσωματωμένου επιθεωρητή του και μπορείτε επίσης να μετατρέψετε το χρώμα σε τιμή Hex ή RGB, κάτι που είναι πολύ σπάνιο για έναν επεξεργαστή CSS. Μπορείτε να παρατηρήσετε το αποτέλεσμά σας στον πίνακα προεπισκόπησης με εργαλεία μέτρησης για να βεβαιωθείτε ότι κάθε στοιχείο σχεδιασμού σας βρίσκεται στη σωστή θέση.

Ο επεξεργαστής έρχεται επίσης με την ολοκλήρωση κώδικα αλλά είναι λίγο buggy, οπότε θα έλεγα ότι είναι ημι-κώδικα ολοκλήρωση. Διαφορετικά, ολόκληρο το πρόγραμμα επεξεργασίας είναι ωραίο να το χρησιμοποιήσετε, εκτός από το γεγονός ότι ο επεξεργαστής είναι αρκετά ξεπερασμένος από την άποψη της υποστήριξης υποστήριξης στυλ του προγράμματος περιήγησης, καθώς υποστηρίζει μόνο τον ορισμό στυλ του IE6.

9. Ταινίες φύλλου στυλ

Συμβατότητα: WindowsΣημαντική δυνατότητα: Ετικέτες CSS

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

Σε σύγκριση με πολλούς συντάκτες CSS Ταχεία CSS ή Style Studio, Ο δημιουργός έχει λιγότερο χαρακτηριστικό αλλά πολύ καθαρό περιβάλλον εργασίας, και αυτό είναι καλό για ορισμένους αρχάριους που δεν θέλουν να πάρουν τα πράγματα περίπλοκα ή CSS ninja που θέλει τα πάντα ελάχιστα και άνετα.

Αν και αυτός ο επεξεργαστής έχει σχεδιαστεί για ενδιάμεσο χρήστη, η λειτουργία του Ετικέτες CSS μπορεί να σας βοηθήσει να δημιουργήσετε απλά έναν κανόνα CSS με ετικέτες με κλικ.

Κοστίζει $ 34 για να είναι κύριος αυτού του εκδότη, ή μπορείτε να το αγοράσετε με άλλο λογισμικό CoffeeCup ως αγορά πακέτων.

10. Arduo CSS

Συμβατότητα: WindowsΣημαντική δυνατότητα: Κόμβος, CSSTidy

Το Arduo CSS είναι ένας νέος γεννημένος συντάκτης CSS, ο οποίος στοχεύει να σας ευχαριστήσει με το διαισθητικό και εύκολο στη χρήση περιβάλλον εργασίας του. Με την καθαρή διεπαφή και την επισήμανση σύνταξης, εγγυάται κανείς να δημιουργεί και να επεξεργάζεται ένα αρχείο CSS χωρίς πολύ κόπο και διακοπή. Επίσης, μπορείτε να χρησιμοποιήσετε τη λειτουργία του 'Κόμβου' για να ορίσετε τους κανόνες CSS με σημεία και κλικ.

Για όσους αισθάνονται το φύλλο στυλ σας είναι πάρα πολύ βαρύ, το εργαλείο CSSTidy από τον επεξεργαστή μπορεί να σας βοηθήσει να βελτιστοποιήσετε το φύλλο στυλ και να εξαλείψετε όλο τον περιττό κώδικα.

Ο εκδότης είναι ελεύθερα διαθέσιμος στον επίσημο ιστότοπό του.

11. Απλή CSS

Συμβατότητα: Windows, Mac OS XΣημαντική δυνατότητα: Εισαγωγή αρχείου CSS, Διεπαφή σημείου και κλικ, Πρόσθετη βάση δεδομένων γραμματοσειρών

Όπως το όνομά του, το απλό CSS έχει όλα όσα χρειάζεται ένας σχεδιαστής για απλή επεξεργασία CSS. Μπορείτε να εισαγάγετε ένα αρχείο CSS στο πρόγραμμα επεξεργασίας και να το τροποποιήσετε με λίγα κλικ, να δείτε το αποτέλεσμα στον πίνακα προεπισκόπησης του και να βγάλετε αμέσως τον πηγαίο κώδικα.

Παρόλο που μπορείτε να εισάγετε σχεδόν κάθε αρχείο CSS στον επεξεργαστή, μπορείτε να προβάλετε μόνο 1 κανόνα CSS ταυτόχρονα με ένα κλικ και μερικές φορές η εισαγωγή σας θα προκαλέσει σφάλμα εξαιτίας του περιορισμού του, όπως δεν υπάρχει υποστήριξη @rules. Επίσης, ο ίδιος ο επεξεργαστής δεν είναι τόσο ευέλικτος, όπως μπορείτε να επιλέξετε μόνο 'Auto' ή 'Inherit' για την ιδιότητα z-index, αλλά όχι απευθείας να δώσετε στην ιδιοκτησία αξία.

Παρ 'όλα αυτά, είναι δωρεάν και αρκετά βολικό για σχεδιαστή που χρειάζεται μια γρήγορη λύση.

Μπόνους: Περισσότεροι συντάκτες και εργαλεία

Ενώ δεν είναι ακριβώς οι επεξεργαστές CSS, αυτά τα ακόλουθα εργαλεία είναι κάτι που ίσως θέλετε να έχετε όταν πρόκειται για την επεξεργασία CSS.

Firebug

Το πιο δημοφιλές και ισχυρό εργαλείο ανάπτυξης ιστού που επιθεωρεί το HTML, τροποποιεί το στυλ CSS και βλέπει τις αλλαγές σε πραγματικό χρόνο, διατίθεται ως plugin για τον web browser του Firefox.

Χρήση CSS

Μια επέκταση για το Firebug που σας επιτρέπει να σαρώσετε πολλές σελίδες του ιστότοπού σας για να δείτε ποιοι κανόνες CSS χρησιμοποιούνται πραγματικά στον ιστότοπό σας.

Web Developer

Μια επέκταση του Firefox για να κάνετε πολλά δροσερά πράγματα όπως προβολή πηγών CSS ή απενεργοποίηση συγκεκριμένου φύλλου στυλ CSS για χρήση σε σχεδιασμό ή ανάπτυξη.

Μπλοκ ΣΗΜΕΙΩΣΕΩΝ++

Ένα δωρεάν επεξεργαστή πηγαίου κώδικα και αντικατάσταση του Notepad που υποστηρίζει πολλές γλώσσες συμπεριλαμβανομένου του CSS. Περιέχει λειτουργίες όπως Λειτουργία ολοκλήρωσης για να βοηθήσει στην οικοδόμηση του σχεδιασμού CSS.

Coda

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

NetBeans IDE

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

Aptana Studio

Ένα πλήρες περιβάλλον ανάπτυξης ιστού που συνδυάζει ισχυρά εργαλεία συγγραφής για HTML, CSS και JavaScript, υποστηρίζει προς το παρόν HTML5 και CSS3.

WebStorm

Το IDE του JetBrain που υλοποιεί τη σχετική αυτόματη συμπλήρωση για όλα, συμπεριλαμβανομένου του CSS, μπορείτε επίσης να λαμβάνετε ειδοποιήσεις σχετικά με προβλήματα CSS.