|
|
Зачем мне нужен CSS-редактор?
Ну, на самом деле он вам не нужен. Но вы можете использовать его чтобы сделать свой рабочий процесс более эффективным. Основное преимущество CSS-редакторов заключается в комплексной среде разработки которую они предлагают для веб-разработчиков. Основная задача CSS-редактора заключается в том, чтобы эффективно совместить функции редактирования CSS-стилей, HTML-исходников и макета сайта в рамках компактного интерфейса. Однако, зачастую CSS-редакторы идут еще дальше.
Наряду с хорошей функциональностью для кодирования, CSS-редакторы предлагают инструменты для отладки и тестирования, а также полезные функции, такие как live-редактирование, предварительный просмотр в различных браузерах, форматирование кода, валидацию, встроенную CSS-справку и инструменты управления проектами. Сочетание этих характеристик вместе дает Вам арсенал полезных инструментов.
Некоторые редакторы также позволяют разделят части кода в отдельные папки и фильтровать стили, что упрощает работу и делает исходный код проще и понятнее. Еще одна полезная функция, мгновенный просмотр таблицы стилей в Internet Explorer или FireFox, которую трудно найти в каких-либо стандартных HTML-редакторах. Кроме того, с помощью CSS-редакторов можно легко анализировать ошибки в коде с использованием код-инспектора и анализировать стили используя так называемую "X-Ray"-функцию.
Короче говоря, основное преимущество CSS-редактора заключается в том, что он предоставляет комплексные, компактные условия для работы с CSS-дизайном и позволяет быстро и эффективно кодировать.
Так какие CSS-редакторы имеются у нас в наличии?
Xyle
 Xyle (Mac)
Этот продвинутый редактор позволяет разработчикам редактировать веб-сайты на лету с использованием встроенных стилей. Вы можете изменять CSS-код, и изменения будут отображаться непосредственно в окне браузера. По сравнению с Web-Developer тулбаром, с Xyle у Вас есть такие полезные функции, как древовидный просмотр селекторов, подсветка синтаксиса и расширенное управление файлами.
В режиме браузера Вы можете просматривать сайты используя движок Сафари. В режиме Selection, кликнув на любой части веб-страницы, отображается исходный код HTML и CSS выбранного фрагмента.
В режиме Cascade, Xylescope отображает не только стили, которые применяются в настоящее время для выбранного элемента, но и все правила, применяемые к предкам выбранного элемента. При отладке с
помощью Xylescope можно просто выбрать "проблемный" элемент в режиме Cascade, чтобы посмотреть, какие стили действительно применяются и какие из них отменены, в том числе те, которые применяются для предков данного элемента. Xylescope отображает специфичные селекторы и указывает, какие стили имеют приоритет. Xylescope также предлагает интеграцию с текстовыми редакторами, такими, как BBEdit.
Цена: $ 19,95. Доступна trial-версия. Прекрасное решение без дополнительных функций, таких, как валидация, оптимизация, за оптимальную цену.
Некоторые из возможностей Xyle
* Автоматическое форматирование
* Сопоставление селекторов
* Фильтр больших CSS-файлов с помощью смарт-групп
* Встроенный DTD-viewer
Stylizer
 Stylizer (Windows)
Две вещи делают Stylizer немного отличным от других: он использует интерфейс сетки (grid interface) вместо текстового редактора, и он встроен в Firefox и IE, поэтому, когда пользователь меняет CSS, он применяется сразу же в браузере. Сеточная система позволяет CSS почувствовать себя вроде "CSS on rails", поскольку она делает невозможным какие-либо ошибки в CSS. Она позволяет Stylizer делать вещи, такие же как элемент инспектор в Firebug-е.
В Stylizer значения могут быть скорректированы на лету. Чтобы изменить высоту, отступ, или background-position, пользователь может буквально щелкнуть по value, редактировать элемент в реальном времени. Цвета также же. Пользователь может щелкнуть по ним, перетащите мышью, и посмотреть цвет текста, фона или границы в браузере, в режиме реального времени, создав наподобие "Photoshop-а для веб". Stylizer Basic является бесплатным. Полная версия (Цена: $ 69,95) не сильно отличается, однако в бесплатной версии невозможно отфильтровать таблицу стилей, чтобы показывались стили только с определенным содержанием.
Rapid CSS Editor
 Rapid CSS Editor (Win)
Этот редактор поддерживает подсветку синтаксиса, автозаполнение и код-инспектор, который гарантирует что производимый код является правильным. Вы можете использовать встроенные в CSS и HTML-справки, чтобы быстро посмотреть синтаксис и атрибуты с учетом селекторов или тегов. Палитра позволяет дизайнерам подобрать цвет и увидеть результат "вживую", используя Style Sheet Preview для Internet Explorer и Firefox. Файловый менеджер может также позаботиться о загрузке CSS-файлов через FTP. Кроме того, вы можете использовать расширенный буфер обмена, чтобы хранить несколько готовых фрагментов кода. Редактор стоит $ 29,85. Доступна trial-версия.
Некоторые из функций Rapid CSS Editor
* Подсветкой синтаксиса для CSS и HTML документов
* CSS Checker и валидатор
* CSS Code Explorer
* Код инспектор
* Автоматическое заполнение для CSS и HTML
* Style Sheet Preview с Internet Explorer или FireFox
* X-Ray для просмотра HTML
* Соответствие CSS стандартам и различным браузерам
* Интеграция с W3C HTML и CSS валидаторами
* Встроенная в CSS справка
* Форматирование CSS кода
* CSS код-компрессор
* Поиск и Замена с поддержкой регулярных выражений
* Поиск и Замена в файлах
* Multi Item буфер обмена
* Встроенный File Explorer
* Сохранение и открытие файлов непосредственно с FTP
* Проект и сайт менеджер и FTP публикация
* Полностью настраиваемый интерфейс
TopStyle
 TopStyle (Win)
CSS и HTML-редактор TopStyle доступен в ее Lite-версия вместе с HTML-редактором Homesite - впрочем, есть также более сложная полная версия для профессиональных веб-разработчиков. С TopStyle разработчики получили ряд особенностей, которые недоступны в других редакторах. Например, со встроенным HTML-tidy вы можете легко перевести HTML-теги в XHTML стиль. Таким образом, заменяются теги, такие как <font>- на тег с соответствующими валидными CSS-правилами. Библиотека содержит подборки часто используемых фрагментов кода. Разбитие окна дает возможность напрямую сравнивать представление сайта в Internet Explorer и Mozilla. Вы можете также изменять Doctype-определение, с тем чтобы выяснить, каким образом различные DTDs влияют на верстку в разных браузерах.
Наверное, самым мощным инструментом в TopStyle является Style checker. Он позволяет не только проверить таблицы стилей и, соответственно, обеспечить правильный формат представления в различных браузерах. Он также может предсказать ошибки в популярных браузерах, которые могут появиться, несмотря на валидный CSS-код. Вы можете также проверить CSS-стили W3C CSS Validation Service для исправления ошибок, которые не были найдены TopStyle.
Полная версия стоит $ 79,95. Предупреждение: lite-версия не может быть обновлен. Только для Windows.
Некоторые из функций TopStyle:
* HTML, xHTML и CSS правка в Единой программе: HTML атрибуты отсортированны так что вы можете быстро посмотреть, какие требуются.
* Простая навигация между документами: кликните на класс HTML-атрибута, чтоб перейти на определение этого класса во внешнюю таблицу стилей или нажмите на ссылку, чтобы открыть файл для редактирования. Вы даже можете нажать на <img> тег, чтобы открыть графический файл в вашем любимом редакторе изображений.
* Проверка элементов и атрибутов: Все классы определены в свои блоки стилей и внешние таблицы стилей, поэтому присвоение класса для HTML тега очень простая задача.
* Style Checker: проверка ваших стилей в нескольких браузерах, отметка каких-либо недействительных значений или свойств. Вы также можете передавать ваши таблицы стилей непосредственно в W3C CSS Validation Service, поэтому вы можете быстро проверить соответствие официальной спецификации CSS.
* Style Upgrade: быстрый, надежный способ заменить все не рекомендуемые (устаревшие) теги HTML - в том числе давно не используемый HTML-тег <font> - на эквивалентный CSS.
* HTML Tidy Integration: Сделать переезд на XHTML безболезненным с встроенным Tidy configuration, который преобразует HTML к XHTML одним кликом!
* Site Reports: Посмотрите стили, используемые на вашем сайте. Выясните, где вы применяете их или узнайте какие стили, определенные Вами, не используются.
* Full Screen Preview: Разделенный просмотр в Internet Explorer и Mozilla для мгновенного обзора различий. Вы даже можете изменить DOCTYPE каждой панели предварительного просмотра "на лету" чтобы увидеть, как различные DOCTYPE влияют на компоновку.
* Интеграция с W3C HTML Validation: Результаты проверки отображаются в TopStyle, с гиперссылкой номеров строк, который синхронизируется с TopStyle редактором.
CSSEdit
 MacRabbit CSSEdit (Mac)
Аналогично XyleScope, CSSEdit предоставляет "real-time" редактирование таблиц стилей, даже тогда, когда используются динамические веб-приложения с использованием баз данных или AJAX. Вы можете редактировать и анализировать стили без хлопот о загрузке или обновлении (онлайн и оффлайн режиме). Selector Builder позволяет описывать элементы на обычном английском языке. Интеллектуальный CodeSense анализирует CSS и CSS-behavior чтобы предложить умный, контекстно-зависимый совет.
X-ray Inspector покажет вам, какие стили применяются к HTML-документу. Вы также можете проверить свою стили на соответствие стандартам W3C и использовать инструмент управления проектами (Milestones etc.) для улучшения Вашего рабочего процесса.
Существует EditCSS-плагин для Firefox, а также CSSEdit-bookmarklets. Вы можете начать редактирование стилей любого сайта одним нажатием кнопки в браузере, а также использовать CSSEdit для редактирования. Инструмент имеет красивый, интуитивно понятный интерфейс, который очень компактный также, и очень хорошо организован, с ним приятно работать. EditCSS стоит 29,95 евро ($ 47). Существует также пробные версии доступны для свободного скачивания.
Некоторые из функций CSS Edit
* Selector Builder
* Легкая организация папок и фильтров
* Изменение исходного кода с интеллектуальным CodeSense
* X-ray pages
* Live-привью
* Управление проектами
* Валидация
* Интеграция с веб-браузерами
Style Master
 Style Master (Win / Mac)
С этим WYSIWIG-CSS-редактором каждый почувствует себя мастером, он обладает возможностями, которые позволяют выделяться из общей массы. Действительно, Style Master позволяет как новичкам, так и профессионалам создавать валидные и семантически правильные стили. Селекторы могут быть сгруппированы по алфавиту, категориям или текущим настройкам. Редактор имеет интегрированную палитру цветов, различные шаблоны, инструменты автоматизации и валидации. Таким образом, профессионалы могут работать легко и эффективно, а новичкам не нужно много времени для создания отличных веб-сайтов.
Совершенно удивительным является тот факт, что различные шаблоны, которые по умолчанию включены в редактор, на самом деле полезные - чего обычно не бывает в большинстве приложений для редактирования. Здесь вы можете просто взять CSS-макет и определить стили, - все селекторы уже имеются. Вы также можете использовать W3C-примеры стилей, которые определяет стили почти для всех HTML-тегов, например заголовков <h1>-<h6>.
Вы можете использовать все возможности Design Pane, аналогичной, X-Ray, чтобы создать свои стили. Редактор очень простой, интуитивный и понятный. Цена: $59,99. Не дешево, однако в конце вы получите эффективное и мощное средство для вашей повседневной работы. Style Master доступен как для Windows, так и для Mac. Существуют также пробные версии, доступные для свободного скачивания.
Некоторые из функций Style Master
* Помощь по поддержке браузеров
* Wizards
* Более 40 шаблонов
* X-Ray, который позволяет сразу увидеть структуру Ваших слоев
* Оптимизация кода
* Интеллектуальный CodeSense
Style Studio
 Style Studio (Win)
Style Studio предоставляет мощный "CSS-Checker", который позволяет новичкам и профессионалам разрабатывать кросс-браузерные CSS-макеты. Разработчики могут использовать ряд вспомогательных инструментов, таких как "Smart linker" который связывает несколько CSS документов с несколькими HTML, XHTML/XML документами сразу и CSS Manager, который управляет и обновляет совместимый со стандартом код (tidy) и определяет ошибки CSS.
Редактор имеет IntelliSense технологию (для стилей и HTML) с быстрой справкой по CSS. Property Watch автоматически определяет CSS-свойство (или HTML-тег, если вы редактируете HTML-документ) и выводит полную информацию о нем.
Style Studio стоит $ 49,95 и доступен только для пользователей Windows.
Некоторые из возможностей Style Studio:
* Мощная настраиваемая подсветка синтаксиса с возможностью поиска/ замены / редактирования
* CSS Validator: обнаружение и исправление ошибок css.
* Мощный CSS Manager, который позволяет управлять, обновлять код и выявлять CSS-проблемы на вашем веб-сайте.
* Интеграция с более чем 35 редакторами HTML
* IntelliSense для стилей и HTML
* Property Watch и Instant-справка по ключевым словам css
* CSS-мастер
* Валидация XML-документов
* Интеллектуальный парсер, который обнаруживает неправильные свойства во время их ввода.
* Автоматическое обнаружение установленых браузеров
* Простое изменение CSS значений используя горячие клавиши Ctrl + Up / Down.
* Встроенная система поиска и замены.
CoffeeCup
 CoffeeCup StyleSheet Maker (Win)
CoffeeCup StyleSheet Maker предлагает CSS-редактор, который представляет собой нечто среднее между сложным функциональным редактором и базовыми функциями для редактирования. Он похож на TopStyle, но еще явно не достиг того же уровня гибкости. Используя CoffeeCup StyleSheet Maker вы будете иметь примерно те же возможности. Цена: $ 34,00. Доступна trial-версия.
Некоторые из возможнойтей CoffeeCup:
* Встроенный CoffeeCup Website Color Schemer
* Простой CSS Font Designer, достаточно выбрать из выпадающего меню.
* Пошаговая справка при созданни стилей
* Проверка в нескольких браузерах
* 50 Style Sheet Drop Down Tags
* Class & ID Wizard для создания ваших собственных HTML-тегов.
* Создание стилей для Netscape и Internet Explorer 3.0 +
EngInSite CSS Editor
 EngInSite CSS Editor (Win)
Если вы хотите обеспечить себе строгий и правильный CSS-код, который соответствует стандартам W3C, определенно стоит рассмотреть вариант с EngInSite. Основная задача редактора заключается в том, чтобы создавать веб-сайты в строгом соответствии стандартам, которые проходят проверку W3C. Инструмент имеет интегрированный previewer стилей, автоматизированное завершение кода, подсветку синтаксиса, объединен с W3C HTML-валидатором, имеет встроенную помощь и CSS-справку, настраиваемую и расширяемую библиотеку кода и функцию live-редактирования.
Вы можете также использовать CSS Property редактор с поддержкой динамических свойств и Selector Constructor - удобный мастер для сложных селекторов и различных инструментов кода, например, Expanding/Extract URLS, Convert Colors, Convert Code и так далее. Можно просматривать селекторы, свойства, комментарии и @-правила и добавлять / удалять HTML, такие как HTML-комментарии и CDATA секции. Цена: $ 39,95. Доступна trial-версия.
Некоторые из функций EngInSite:
* Полностью настраиваемый текстовый редактор
* Интегрированный Instant Style Sheet Preview
* Проверка синтаксиса CSS для нескольких браузеров
* Интеграция с W3C HTML валидатором
* Соответствие CSS-стандартам и различным браузерам
* Preview в различных браузерах.
* Интегрированная справочная система и встроенный в CSS-справка
* Поиск и замена с поддержкой регулярных выражений
* Визуальный редактор для различных типов данных
* Wizards для body, IE Scrollbars, списков и фона
Jellyfish CSS
 Jellyfish CSS (Mac)
Будучи чрезвычайно проста и понятна, Jellyfish CSS гарантирует, что разработчики могут редактировать CSS-стили легко и быстро. Редактор имеет библиотеку кода, поддержку Code-Sense, справку по браузерам, wizards и помощь поможет вам избежать ошибок (Вам будет сообщено сразу же, если вы случайно сделали ошибку). Вы можете также использовать интегрированный Colorblender, для создания цветовой палитры. Цена: 29? ($ 47). Trial-версиz, конечно, имеется.
Некоторые из функций Jellyfish CSS:
* Code-Sense поможет вам избежать ошибок
* Поддержка Mobile Profile 1.0
* Подсветка синтаксиса
* Проверка кода во время ввода
* 3 различных типа preview
* Интегрируется с внешними программами для быстрого доступа
* Проверка стилей с W3C Validator и CSS-Tidy
* Загрузка CSS-файлов прямо из www и работа над ними
* Codesnippets
* Colourblender
Astyle
 Astyle (Win)
Astyle является визуальным CSS-редактором, который предлагает именно то, что можно было бы ожидать из большинства инструментов редактирования. Нет дополнительных возможностей, однако есть все наиболее важные инструменты редактирования. Astyle не может не впечатлять нас некоторыми весьма полезными функциями и способностями. Цена: $ 20.
Некоторые из функций Astyle:
* Простой в использовании интерфейс
* Сгруппированные свойства и селекторы
* Автоматический выбор и группировка селекторов CSS
* Подсветка CSS, HTML, XML кода
* Очистка HTML документа с помощью CSS
* Поддержка Drag and Drop
|
Версия для печати
