فهرست مطالببستن

ویرایشگر CSS به عنوان یه برنامه کاربردی مورد استفاده قرار می‌گیره که می‌تونه فایل CSS رو ویرایش کنه. ویرایشگرهای CSS انواع مختلفی دارن از جمله ویرایشگرهای سبک دیداری، ویرایشگرهای آنلاین، ویرایشگرهای منبع باز یا open source و ویرایشگرهای تجاری. ویرایشگرهای سبک دیداری (visual) این امکان رو بهتون میدن که صفحه سایت رو بدون نیاز به برنامه نویسی یا coding ویرایش و ادیت کنین. ویرایشگر CSS یا CSS editor یه نوع نرم افزار هست که در طراحی سایت مورد استفاده قرار می‌گیره.

نکته
وردپرس، ویرایشگر CSS رو با استفاده از افزونه ای با نام Yellow Pencil در اختیار کاربران خودش قرار میده.

در ابتدا بهتره با یه توضیح مختصر از CSS شروع کنیم و سپس بهترین و جدیدترین ویرایشگرهای CSS سال ۲۰۲۰ رو بهتون معرفی کنیم.

CSS چیه؟

در واقع کلمه CSS به تنهایی در دیکشنری معنی خاصی نداره و مخفف عبارت Cascading Style Sheets به معنی صفحات استایل آبشاری هست. Cascading Style Sheets یه زبان برنامه نویسی ظاهری هست که بهتون کمک می‌کنه ظاهر صفحات مختلف (مانند رنگ پس زمینه و گرافیک تصویر) یه وبسایت رو همزمان تنها با استفاده از یه فایل کنترل کنین. به جای اینکه مجبور باشین به کد HTML هر صفحه برین و به صورت دستی تغییرات ایجاد کنین، با استفاده از فایل های CSS می تونین تغییرات گسترده ای رو در تمامی صفحات یه سایت ایجاد کنین.

مطلب مرتبط
CSS یا Cascading Style Sheets چه کاربردی در طراحی سایت دارند؟

CSS

CSS Editor چیه؟

همونطور که گفته شد در طراحی سایت، تغییرات در ظاهر یه صفحه، اساساً با استفاده از CSS انجام می‌شه. ویرایشگر CSS یا CSS Editor هر نرم افزاری هست که بتونه یه فایل CSS رو ادیت کنه. در واقع، حتی ابتدایی ترین ویرایشگر متن که در سیستم عامل شما (Notepad برای سیستم عامل windows و Textedit برای Mac) موجوده، می‌تونه فایل های CSS رو بنویسه و در اونها تغییر ایجاد کنه. امروزه پیشرفته ترین ویرایشگرهای CSS، ویژگی های اضافی مانند پیش نمایش زنده یا live preview و پررنگ سازی دستوری یا syntax highlighting رو غیرفعال می کنن.

پیشنهاد برای مطالعه
آیا طراحی سایت سخته + راهنمای ساده و کامل برای کمک به طراحی سایت

چرا از ویرایشگرهای CSS استفاده کنیم؟

کد CSS کم حجم هست و مدیریت کردن اون آسون تره. علاوه بر این، شما گزینه های قالب بندی بیشتری رو در اختیار دارین. با استفاده کردن از CSS همچنین می تونین از مزایای سئو (SEO) بهره مند بشین. ویرایشگرهای CSS ویژگی هایی مانند پررنگ سازی دستور (syntax highlighting)، یافتن و جایگزین کردن، تکمیل خودکار (auto-complection) و سایر موارد رو ارائه میدن. این ویرایشگرها با نشون دادن نتیجه فوری کد، به برنامه نویسان کمک می کنن. در واقع امکان پیش نمایش ارائه شده توسط این ویرایشگرها از ظاهر و شکل صفحه شما، ایده و ابتکارتون رو ارتقا میده.

دسته بندی دیگه ای که برای CSSها در نظر گرفته میشه، ۳ گروه رو در بر میگیره:

  1. Inline یا بین خطی
  2. Internal یا داخلی
  3. External یا خارجی

برترین ویرایشگرهای CSS سال ۲۰۲۰

خب الان دیگه وقتش رسیده که برترین و تاپ ترین ویرایشگرهای CSS سال ۲۰۲۰ رو که پرطرفدار هستن و به شدت مورد استقبال طراحان سایت قرار گرفتن رو بهتون معرفی کنیم. در ابتدا ۵ تا از بهترین های این ویرایشگرها رو در جدولی به صورت مختصر نشون می‌دیم و در ادامه ویژگی های هر کدوم رو بررسی می‌کنیم.

البته خودتون که در جریان اوضاع قیمتها هستین. باید تاکید کنم که این قیمتها حدودی هستن و مریوط به همین امروز یعنی ۱۴ آبان ۹۹.

هشدار
در انتخاب ویرایشگر CSS، نوع سیستم عامل خودتون (Windows یا Mac) رو در نظر بگیرین.
   نام ویرایشگر نوع سیستم عامل  مرورگرهای پشتیبانی شده زبان های پشتیبانی شده        کاربرد                                خدمات       قیمت
     Stylizer Windows/ Mac پشتیبانی از تمامی مرورگرهای رایج       CSS طراحی وبسایت ویژگی Bullseye این ویرایشگر بهتون این امکان رو میده که ویژگی مربوط به بخش خاصی از وبسایت رو مشاهده کنین و تنها با چند کلیک اون رو آپدیت کنین. حدود ۲,۰۰۰,۰۰۰

تومان

    TopStyle     Windows IE/ Firefox/ Safari  CSS/ HTML/ XHTML ویرایش کردن CSS ویژگی Style Inspector بهتون این امکان رو میده که هر نوع ویژگی CSS رو تنها با چند کلیک اضافه کنین. بدون هزینه
 StyleMaster  Windows/ Mac مرورگرهای مختلف CSS/ PHP/ HTML/ Ruby/ ASP.Net خطایابی طراحی برنامه ۱. دارای ویرایشگر WYSIWYG

2. فراهم کردن اطلاعات جامعی درباره هر ویژگی CSS

 حدود ۱,۵۰۰,۰۰۰

تومان

 Rapid CSS Editor      Windows مرورگرهای مختلف HTML/ CSS ویرایش کردن CSS این ویرایشگر دارای یه مرجع CSS داخلی یا built-in CSS هست حدود ۱,۰۰۰,۰۰۰ تومان (نسخه رایگان هم موجوده)
    Espresso          Mac مرورگرهای جدید HTML/ CSS/ Coffee Script/ PHP/ Ruby/ Python ساخت و انتشار برنامه نویسی طراحی سایت گزینش ها و ویرایش های مختلف حدود ۲,۰۰۰,۰۰۰ تومان

۱. Stylizer

Stylizer یه ویرایشگر برای سیستم عامل های Windows و Mac هست که بهتون در طراحی سایت کمک می‌کنه.

ویژگی های Stylizer:

  • هنگام ویرایش، خروجی طراحی رو به صورت همزمان برای کمک به برنامه نویسی شما نمایش میده.
  • تمامی مرورگرهای رایج رو پشتیبانی می‌کنه. نتایج در پنل های پیش نمایش مرورگر در کنار هم نشون داده میشن.
  • کارهای تکراری رو می‌تونین با یه کلیک انجام بدین.
  • این ویرایشگر برای هر نوع وبسایتی عمل می‌کنه.

یکی از مزایای ویرایشگر Stylizer اینه که از هیچ فایل موقتی (temporary file) استفاده نمی‌کنه. توجه داشته باشین که هزینه ای که برای این ویرایشگر پرداخت می‌کنین قطعاً ارزشش رو داره و الکی نیست که این editor در رتبه اول قرار گرفته. در ضمن، یه خبر خوب اینه که برای مدتی می‌تونین از stylizer به صورت رایگان استفاده کنین.

stylizer ویرایشگر CSS

۲. TopStyle

این ویرایشگر بیشتر از یه ویرایشگر WYSIWYG برای برنامه نویسی مورد استفاده قرار می‌گیره. آخرین نسخه موجود TopStyle، ورژن ۵.۰.۰.۱۰۸ هست. متاسفانه این ویرایشگر توسعه و گسترش خودش رو متوقف کرده.

ویژگی های TopStyle:

  • دارای ویرایش مستقیم FTP هست.
  • می‌تونه با Adobe Dreamweaver و اعتبارسنج CSE HTML ادغام بشه.
  • ویژگی پررنگ سازی دستور یا syntax highlighting رو برای زبان های برنامه نویسی CSS، PHP، ASP، JavaScript، VB Script و سایر موارد فراهم می‌کنه.
  • در بررسی مشکلات سازگاری (compatibility) مرورگر کمک می‌کنه.

۳. StyleMaster

StyleMaster یه ویرایشگر برنامه نویسی Cascading Style Sheets برای Windows و Mac هست. این ویرایشگر توسط هر شخصی می‌تونه استفاده بشه، از مبتدی گرفته تا متخصص. در واقع کار باهاش راحت و آسونه. یکی از مزایای این ویرایشگر اینه که برای کاربرانش یه آموزش جزئی و دقیق رو فراهم کرده.

ویژگی های StyleMaster:

  • این ویرایشگر می‌تونه صفحات استایل رو از HTML ایجاد کنه.
  • داری ویژگی X-ray یا اشعه ایکس هست.
  • ویرایش کردن CSS رو از طریق FTP پشتیبانی می‌کنه.

۴. Rapid CSS Editor

ویرایشگر Rapid CSS Editor فقط برای سیستم عامل های Windows به کار میره و شامل ویژگی های پیشرفته تری هست. با قابلیت پیش نمایش چندین مرورگر داخلی یا built-in، می‌تونین فوراً خروجی مرورگرهای مختلف رو مشاهده کنین.

ویژگی های Rapid CSS Editor:

  • دارای یه کاوشگر فایل داخلی هست.
  • ویژگی syntax highlighting رو برای تعداد زیادی از زبان های برنامه نویسی مانند Perl، ASP، JavaScript، HTML، CSS و غیره فراهم می‌کنه.
  • تکمیل خودکار قیمت ها، براکت ها و سایر موارد رو انجام میده.
  • دارای گزینه های کپی و پیست هوشمند هست.
  • می‌تونین مستقیماً روی سرورهای FTPS، SFTP و FTP به روز رسانی و ذخیره کنیدش.
  • این ویرایشگر ویژگی های زیاد دیگه ای هم داره.

ویرایشگر Rapid CSS Editor مزایای زیادی داره از جمله:

  1. پشتیبانی از پلاگین رو فراهم می‌کنه. شما حتی می‌تونین افزونه یا پلاگین خودتون رو بنویسین و طراحی کنین و سپس اون رو اضافه کنین.
  2. همچنین امکان جستجو رو فراهم می‌کنه و ویژگی ها رو جایگزین هم می‌کنه.

Rapid CSS Editor یک ویرایشگر CSS

۵. Espresso

ویرایشگر Espresso یه ویرایشگر برنامه نویسی CSS و متن برای سیستم عامل های Mac هست. Espresso از چندین زبان مانند XML، Python، Ruby، Coffee Script، PHP، HTML،CSS و سایر موارد پشتیبانی می‌کنه. یکی از مزایای این ویرایشگر اینه که از قابلیت Plugin-in پشتیبانی می‌کنه. اما در عوض، یکی از بدی هاش اینه که فقط برای Mac قابل کاربرد هست.

ویژگی های Espresso:

  • قابلیت انتخاب و گزینش متنوع و همچنین ادیت مختلف داره.
  • شامل ویژگی های «یافتن» و «جایگزینی» میشه.

علاوه بر ۵ ویرایشگر CSS ذکر شده در بالا، ویرایشگرهای دیگه ای هم در سال ۲۰۲۰ کاربردی بودن و جرء بهترین ها و تاپ ترین ها قرار گرفتن. در ادامه موارد دیگه ای از CSS Editor رو بهتون معرفی می‌کنیم.

۶. Xyle Scope

ویرایشگر Xyle Scope یه ابزار خطایابی CSS برای سیستم عامل های Mac هست. این ویرایشگر می‌تونه در Mac، iPhone و iPad مورد استفاده قرار بگیره. یکی از معایب Xyle Scope اینه که از سال ۲۰۰۷ هیچگونه پشتیبانی به عنوان توسعه و ارتقاء این ویرایشگر موجود نیست. این ویرایشگر به صورت رایگان در اختیار کاربران قرار گرفته و شما هیچ هزینه ای برای اون پرداخت نمی‌کنین.

ویژگی های Xyle Scape:

  • Xyle Scape در واقع cascade رو برای اجزای موردنیاز HTML بررسی میکنه.

۷. Style Studio

ویرایشگر Style Studio یه ویرایشگر CSS برای سیستم عامل های Windows هست و این موضوع به عنوان یکی از معایب این ویرایشگر در نظر گرفته می‌شه. هزینه Style Studio حدود ۱,۵۰۰,۰۰۰ تومان هست. همچنین می‌تونین از این ویرایشگر برای مدت کوتاهی به صورت رایگان استفاده کنین.

ویژگی های Style Studio:

  • این ویرایشگر دارای یه اعتبارسنج CSS یا CSS validator هست.
  • امکان پیش نمایش یا preview رو فراهم می‌کنه.
  • در یافتن و پیدا کردن ویژگی ها و خصوصیات نامعتبر کمک می‌کنه.
  • قابلیت برنامه نویسی رنگی یا color coding رو برای دستور داره.
  • ویژگی هایی مانند انتخاب رنگ (color picker) و مدیریت رنگ (color management) رو شامل می‌شه.

ویرایشگر Style Studio مزایای زیادی داره که ما در اینجا به دو مورد اونها اشاره می‌کنیم:

  1. الگوهای از پیش تعریف شده در این ویرایشگر ارائه شدن.
  2. ویژگی find و replace (یافتن و جایگزینی) موجود هستن.

۸. CSS3 Please

ویرایشگر CSS3 Please به عنوان مولد دستور (rule generator) برای CSS3 هست.

ویژگی های CSS3 Please:

  • قسمت underline شده می‌تونه تغییر کنه.
  • می‌تونین سریعاً نتایج مربوط به قسمت تغییریافته رو مشاهده کنین.
  • حتی این امکان رو بهتون میده که کد نمایش داده شده رو کپی کنین.

ویرایشگر CSS3 please

۹. CODA

ویرایشگر CODA یه ویرایشگر متن هست و بر روی Mac و iPad مورد استفاده قرار می‌گیره. این ویرایشگر دارای بسیاری از ویژگی ها مانند برجسته سازی CSS یا CSS overriding، انتشار، ایندکس سازی موضعی (local indexing) و سایر موارد هست. متاسفانه باید بهتون بگیم که هزینه این ویرایشگر حدود ۳,۰۰۰,۰۰۰ تومان هست 🙂 انتخاب با خودتونه. عیبی که این ویرایشگر داره این هست که فقط برای سیستم عامل های Mac می‌تونه استفاده بشه.

ویژگی های CODA:

  • بهتون یه پیش نمایش پیکسل پرفکت یا pixel-perfect نشون می‌ده.
  • به شما در مدیریت فایل های محلی و خارج از منطقه کمک می‌کنه.
  • دارای قابلیت syntax highlighting هست.
  • دارای یه ترمینال داخلی و ویرایشگر MySQL هست.
  • ویرایشگر CODA یه ویژگی برای سوئیچ کردن فوری بین ویرایشگر و صفحات پیش نمایش رو فراهم می‌کنه.

از مزایای CODA Editor می‌تونیم به این مورد اشاره کنیم که با استفاده از این ویرایشگر می‌تونین ویژگی هایی رو از طریق پلاگین ها اضافه کنین و همچنین پلاگین های موجود رو پشتیبانی کنین.

یه تعداد کمی نرم افزارهای ویرایشگر CSS دیگه هم وجود دارن که اونها هم رایج و پرطرفدار هستن، مانند:

  • EditPlus
  • Atom
  • TextWrangler
  • Brackets
  • ++Notepad

توجه داشته باشین که بین تمامی ویرایشگرهایی که تا اینجا مطرح شدن و تعدادی از ویژگی های اونها رو بررسی کردیم، هیچ ویرایشگری برای سیستم عامل های Linux مطرح نشد. ویرایشگرهای CSS که برای سیستم عامل های Linux در نظر گرفته می‌شن عبارتند از: CSS، Gedit، Quanta و Scintilla. علاوه بر این ویرایشگرهای CSS منبع باز برای تمرین کردن ویرایش CSS موجود هستن. ویرایشگر Atom یکی از رایج ترین ویرایشگرهای منبع باز هست.

همچنین می‌تونین از ویرایشگرهای CSS آنلاین هم کمک بگیرین. مزیت اصلی ویرایشگرهای آنلاین اینه که هیچ نیازی به تنظیم محیط یا environment setup نیست. تعدادی از ویرایشگرهای آنلاین عبارتند از:

  • HTML-CSS-JS.com
  • CSSPortal.com
  • Scratchpad.io
  • CSSdesk.com

ویرایشگرهای CSS برنامه نویسی و کدگذاری رو برای شما تسهیل می‌کنن و در واقع آپدیت و به روز رسانی رو براتون آسون تر می‌کنن. به این ترتیب می‌تونیم نتیجه بگیریم که ویرایشگرهای CSS انعطاف پذیری بیشتری رو برای برنامه نویسان ایجاد می‌کنن.