11 Editor CSS Teratas - Sudah diulas

1. Stylizer

Kesesuaian: WindowsFitur Penting: Kotak Kode, Genggaman Ukuran, Bullseye, Pewarnaan dua klik

Stylizer adalah editor CSS yang benar-benar unik yang berfokus pada pengeditan CSS waktu-nyata. Anda cukup memasukkan alamat web ke dalam browser bawaan yang mendukung definisi gaya Firefox 3.5 dan IE7, dan semua aturan CSS yang terkait dimuat untuk Anda edit dengan antarmuka titik-dan-klik yang sudah dikenalinya.

Editor dilengkapi dengan Kotak Kode fitur yang membuat pengeditan CSS Anda lebih nyaman karena Anda dapat melihat hasilnya segera setelah Anda mengubah nilai. Juga dengan diagnostiknya Tepat sasaran fitur, Anda dapat melihat elemen terkait di bagian tertentu situs dan mengeditnya dengan poin dan klik. Fitur lain seperti Ukuran Grips memungkinkan Anda untuk menyesuaikan posisi elemen CSS secara visual, dan dengan Pewarnaan klik dua kali fitur Anda diberikan pemilih warna seperti Photoshop untuk memilih warna apa pun untuk, katakanlah, font situs Anda. Oh, apakah saya menyebutkan bahwa semua pengeditan ini dilakukan secara real-time, dan langsung dapat dilihat hasilnya?

Dengan Stylizer itu tidak mungkin untuk membuat kesalahan CSS karena akan membatasi Anda untuk menempatkan nilai apa pun yang tidak kompatibel dengan properti CSS yang sesuai. Namun perangkat lunak akan gagal memuat file CSS tertentu kadang-kadang, karena kesalahan kritis yang tidak dapat dijelaskan.

Stylizer hadir dengan versi Basic dan Ultimate. Sementara versi Basic benar-benar gratis, versi Ultimate tersedia untuk Anda selama 14 hari setelah instalasi, kemudian ia menawarkan $ 85 bagi Anda untuk terus menggunakan fitur-fiturnya yang canggih seperti Bullseye.

2. TopStyle

Kesesuaian: WindowsFitur Penting: Inspektur Gaya, Penyapu Gaya, CSS Tidy

Editor TopStyle CSS mulai memukau Anda dengan konfigurasi pertama kalinya, ketika Anda dapat memilih definisi gaya yang hanya menampilkan properti dan nilai yang didukung oleh Firefox, Internet Explorer, Safari, atau bahkan iPhone OS 2.0, yang praktis berguna untuk lintas-platform desainer web.

Di antara semua fitur yang saya temukan Inspektur Gaya sangat berguna, karena berfungsi sebagai panel untuk memungkinkan Anda memasukkan properti CSS dengan antarmuka titik-dan-klik sederhana. Ketika Anda selesai memilih semua properti CSS yang Anda inginkan, kode sumber akan dihasilkan secara otomatis untuk menghemat waktu Anda dari pengkodean berulang dan melelahkan.

Satu hal baik lainnya tentang Gaya top apakah itu menunjukkan kompatibilitas browser di bawah inspektur gayanya, yang Anda dapat melihat apakah properti CSS didukung sepenuhnya oleh versi web browser tertentu seperti Internet Explorer 7, atau sangat buggy.

Editor hadir sebagai versi uji coba dengan fitur terbatas, dan Anda dapat membuka potensi penuhnya dengan $ 79,95.

3. Master Gaya

Kesesuaian: Windows, Mac OS XFitur Penting: Templat Stylesheet

Diklaim sebagai master, Style Master melakukan cukup baik untuk menciptakan lingkungan pengeditan CSS untuk setiap tingkat keahlian. Perangkat lunak ini tidak hanya menyediakan editor WYSIWYG yang memperlancar alur kerja untuk pemula CSS, tetapi juga memberi Anda akses ke informasi yang sangat terperinci tentang setiap properti CSS untuk dirujuk oleh pakar. Anda dapat menelusuri dan memilih properti CSS berdasarkan kategori atau urutan abjad.

Mungkin poin paling unik adalah editor itu sendiri berisi hampir 20 templat stylesheet yang berguna untuk Anda mulai, dan tidak mengherankan bagi seorang master gaya untuk memiliki aturan CSS yang sangat bersih, tertata dengan baik dan profesional yang ditentukan dalam templat bawaannya..

Anda dapat menikmati perangkat lunak berfitur lengkap selama 30 hari, dan membayar $ 59,99 atau $ 29,99 untuk lisensi pendidikan untuk membuka potensi penuhnya lagi.

4. Lingkup Xyle

Kesesuaian: MacFitur Penting: Mode Pemilihan, Grup Cerdas, Integrasi Editor Teks

Xyle Scope adalah a must-have editor CSS gratis untuk Mac, karena ini adalah editor CSS yang benar-benar profesional yang memungkinkan Anda untuk menjelajahi situs web sambil menyempurnakan CSS-nya langsung di dalam editor.

Browser Xyle dilengkapi dengan mode peramban normal dan mode pemilihan yang berfungsi sangat mirip seperti plugin Firefox, Firebug yang menyediakan tampilan dan pengeditan sumber CSS, kecuali bahwa editor memungkinkan Anda untuk menyimpan nilai CSS yang dimodifikasi di lokasi aslinya.

Menggunakan 'Grup CerdasDengan fitur ini, Anda dapat memfilter semua aturan yang memengaruhi cara tautan ditampilkan atau yang bertanggung jawab atas tata letak, Anda bahkan dapat mempersempit hasilnya dengan fungsi pencarian bawaannya, tidak ada lagi metode coba-coba!

Lingkup Xyle juga menawarkan integrasi dengan editor teks eksternal seperti BBEdit untuk pekerjaan pengkodean yang lebih nyaman dan hemat energi, lakukan saja perubahan dan editor teks atau Xyle Scope akan memperbarui semua perubahan secara otomatis untuk Anda.

5. CSS cepat

Kesesuaian: WindowsFitur Penting: Penyorot Sintaks, Penyelesaian Kode, Pemformatan CSS

CSS cepat adalah cara untuk mengedit CSS yang lebih nyaman, nyaman dan kompleks. Ini memiliki editor teks yang sepenuhnya dapat disesuaikan sendiri dengan fitur-fitur bermanfaat seperti penyorotan sintaksis, penyelesaian kode dan referensi CSS bawaan untuk pengalaman pengkodean yang tidak menyakitkan.

Merawat kebersihan CSS Anda, Anda dapat memformat stylesheet CSS Anda, seperti mengatur ulang berdasarkan tipe CSS atau membuat properti singkatan untuk membuat stylesheet terlihat lebih nyaman dan manis. Validator kode bawaan juga memastikan stylesheet Anda tidak hanya bersih tetapi juga valid.

Editor datang dengan periode evaluasi 30 hari dengan 30 penggunaan, Anda dapat menggunakan versi lengkap dengan $ 29,85.

6. Studio Gaya

Kesesuaian: WindowsFitur Penting: CSS Wizard, IntelliStyle

Keindahan utama dari Style Studio terletak di dalam fitur CSS Wizard-nya, yang berfungsi untuk memberi Anda efek CSS langsung dengan beberapa poin dan klik.

Misalnya, Anda dapat memilih wizard font, lalu memilih keluarga font dan mengatur ukuran font untuk itu, kemudian gaya font, berat, varian ... dan booming! Aturan dimasukkan ke dalam stylesheet sebagai kode CSS yang sepenuhnya divalidasi.

Fitur panduan juga mencakup warna, batas, teks, penentuan posisi, klasifikasi, dan akhirnya menyaring aturan, hampir semua yang dapat Anda pikirkan tentang CSS. Wizard ini sangat berguna karena Anda tidak perlu mengetik berulang kali untuk mencapai efek CSS rumit tertentu. Fitur mulia lainnya adalah IntelliStyle, yang berfungsi seperti penyelesaian kode bagi Anda untuk memilih properti CSS tertentu untuk tujuan desain Anda.

Kelemahan dari editor ini adalah dukungan definisi gaya browser yang sudah usang, karena hanya mendukung hingga IE6 dan, yah, tidak ada Firefox.

Anda diberikan 30 hari untuk menikmati perangkat lunak dan $ 49,99 untuk membelinya.

7. CSSEdit

Kesesuaian: MacFitur Penting: Inspektur X-ray, Editor Visual, Pembuat Selektor

Mendesain situs web yang indah, inovatif, dan memuat cepat dengan aplikasi yang cantik, inovatif, dan cepat, itulah CSSEdit MacRabbit. Dari fitur seperti Selector Builder hingga lingkungan sumber cerdas, CSSEdit dirancang untuk tingkat keahlian apa pun.

Dengan editor yang sangat halus seperti ini, Anda diharapkan melihat perubahan pada stylesheet CSS Anda muncul secara waktu nyata, tanpa melelahkan tindakan unggah-menyegarkan. Inspektur X-ray juga dibuat sebagai fitur untuk mendiagnosis kode CSS dari bagian tertentu dari situs.

Bagian inovatif dari CSSEdit mungkin itu miliknya Pembuat Selektor yang memungkinkan Anda mendeskripsikan gaya CSS Anda dengan bahasa Inggris sederhana, tidak banyak minat untuk seorang ahli tetapi berguna untuk pemula absolut.

Versi demo membatasi Anda untuk menyimpan file dengan kurang dari 2500 karakter, sementara Anda dapat membayar $ 39,95 untuk menghapus semua batasan.

8. Editor CSS EngInSite

Kesesuaian: WindowsFitur Penting: Alat pengukuran dalam Mode Pratinjau

Jika Anda seorang desainer serius yang peduli dengan spesifikasi CSS yang benar, penempatan CSS yang tepat, atau stylesheet CSS Anda harus sepenuhnya divalidasi, maka editor CSS EngInSite dapat menjadi editor favorit Anda..

Di editor ini, Anda dapat menambahkan pemilih kelas, id, dan elemen dengan bantuan inspektur bawaannya, juga Anda dapat mengonversi warna menjadi nilai Hex atau RGB, yang merupakan fitur yang sangat langka untuk editor CSS. Anda dapat mengamati hasil Anda di panel pratinjau dengan alat pengukuran untuk memastikan bahwa setiap elemen desain Anda berada di posisi yang tepat.

Editor juga datang dengan penyelesaian kode tetapi agak sedikit bermasalah, jadi saya akan mengatakan itu penyelesaian kode semi. Kalau tidak, seluruh editor baik untuk digunakan, kecuali kenyataan bahwa editor cukup usang dalam hal dukungan definisi gaya browser, karena hanya mendukung hingga definisi gaya IE6.

9. Stylesheet Maker

Kesesuaian: WindowsFitur Penting: Tag CSS

Stylesheet Maker adalah editor CSS standar lain yang menawarkan permukaan pengkodean yang bersih dengan panel file explorer, dan beberapa alat CSS yang berguna untuk membantu pengaturan font, warna, margin, perbatasan, dll..

Dibandingkan dengan beberapa editor CSS seperti CSS cepat atau Studio Gaya, Maker memiliki lebih sedikit fitur namun antarmuka yang sangat bersih, dan ini bagus untuk pemula tertentu yang tidak ingin membuat masalah menjadi rumit, atau CSS ninja yang menginginkan segalanya minimal dan nyaman.

Meskipun editor ini dirancang untuk pengguna menengah, fitur Tag CSS-nya dapat membantu Anda membuat aturan CSS dengan tag dengan klik.

Biayanya $ 34 untuk memiliki editor ini, atau Anda dapat membelinya dengan perangkat lunak CoffeeCup lainnya sebagai pembelian bundel.

10. Arduo CSS

Kesesuaian: WindowsFitur Penting: Node, CSSTidy

Arduo CSS adalah editor CSS yang baru lahir yang bertujuan untuk menyenangkan Anda dengan antarmuka yang intuitif dan mudah digunakan. Dengan antarmuka yang bersih dan penyorotan sintaksis, Anda dijamin dapat membuat dan mengedit file CSS tanpa terlalu banyak kesulitan dan gangguan. Anda juga dapat menggunakan fitur 'Node' untuk mendefinisikan aturan CSS berdasarkan poin dan klik.

Bagi mereka yang merasa stylesheet Anda terlalu berat, alat CSSTidy dari editor dapat membantu Anda untuk mengoptimalkan stylesheet dan menghapus semua kode yang tidak perlu.

Editor tersedia secara gratis di situs resminya.

11. CSS sederhana

Kesesuaian: Windows, Mac OS XFitur Penting: Impor file CSS, antarmuka titik-dan-klik, basis data font tambahan

Sama seperti namanya, Simple CSS memiliki segala yang dibutuhkan desainer untuk mengedit CSS sederhana. Anda dapat mengimpor file CSS ke editor dan memodifikasinya dengan beberapa klik, periksa hasilnya di panel pratinjau, dan segera ambil kode sumber.

Meskipun Anda dapat mengimpor hampir setiap file CSS ke editor, Anda hanya dapat melihat 1 aturan CSS sekaligus dengan satu klik, dan terkadang impor Anda akan menyebabkan kesalahan karena keterbatasannya seperti tidak ada dukungan @ aturan. Juga editor itu sendiri tidak begitu fleksibel seperti Anda hanya dapat memilih 'Otomatis' atau 'Mewarisi' untuk properti indeks-z, tetapi tidak secara langsung memberi nilai pada properti..

Meskipun demikian, ini gratis dan sangat berguna untuk perancang yang membutuhkan perbaikan cepat.

Bonus: Lebih Banyak Editor dan Alat

Meskipun mereka bukan editor CSS, alat-alat berikut ini adalah sesuatu yang mungkin ingin Anda miliki ketika mengedit CSS.

Pembakar

Alat pengembangan web paling populer dan kuat yang memeriksa HTML, memodifikasi gaya CSS dan melihat perubahan secara waktu nyata, tersedia sebagai plugin untuk browser web Firefox.

Penggunaan CSS

Ekstensi untuk Firebug yang memungkinkan Anda memindai banyak halaman situs Anda untuk melihat aturan CSS mana yang sebenarnya digunakan di situs Anda.

Pengembang Web

Ekstensi Firefox bagi Anda untuk melakukan banyak hal keren seperti melihat sumber CSS atau menonaktifkan lembar gaya CSS tertentu untuk penggunaan desain atau pengembangan.

Notes++

Editor kode sumber gratis dan penggantian Notepad yang mendukung beberapa bahasa termasuk CSS. Berisi fitur-fitur seperti Function Completion untuk membantu membangun desain CSS Anda.

Coda

Editor teks canggih dengan editor CSS built-in yang memberikan Anda dua mode edit CSS untuk pengalaman mendesain yang lebih fleksibel, dapat melihat hasilnya secara instan setelah perubahan dilakukan.

NetBeans IDE

Lingkungan Pengembangan Terpadu sumber terbuka dan profesional dengan referensi CSS terlengkap dalam fitur penyelesaian kode.

Studio Aptana

Lingkungan pengembangan web lengkap yang menggabungkan alat penulisan yang kuat untuk HTML, CSS, dan JavaScript, saat ini mendukung hingga HTML5 dan CSS3.

WebStorm

JetBrain's IDE yang mengimplementasikan penyelesaian otomatis yang relevan untuk semuanya termasuk CSS, dan Anda juga bisa mendapat pemberitahuan tentang masalah CSS dengan cepat.