Редактор TopStyle Pro

Хочу рассказать про свой любимый CSS-редактор TopStyle. Многие уже давно им пользуются, однако часто лишь для редактирования CSS-файлов. Я же использую его в качестве своего основного HTML-редактора (речь идет о версии Pro) при изготовлении макетов страниц.

Инструмент

На win платформе существует очень много разных (профессиональных) HTML-редакторов, и выбрать «system of choice» бывает совсем не легко. Код я пишу вручную, поэтому WYSIWYG-редакторы мне никогда не были интересны. Исключение — только последний Dreamweaver, который я использую для создания сложных таблиц.

Я долгое время пользовался Homesite (в связке с TopStyle Lite), но он уже давно не развивается — его автор Nick Bradbury сейчас как раз занимается разработкой TopStyle. Поэтому, в свое время, я и решил попробовать его новое детище.

Что же он умеет

В первую очередь, редактор TopStyle конечно же для редактирования CSS. Однако, его старшая (платная) версия прекрасно подходит и для XHTML-верстки.

Редактор имеет настраиваемую подсветку, автодополнение тегов (даже автоматическую подстановку аттрибутов class и id из файла стилей), встроенные функции валидации (с использованием валидаторов W3C или скачиваемого CSE). В общем, почти все, что и остальные нормальные редакторы. Но есть у него и свои особенности, которые делают разработку сайтов при помощи CSS очень удобной.

Например, он умеет строить отчеты по использованным классам, то есть показывает какие классы где использовались, а какие классы вообще оказались «потерянными» (см. рисунок), т. е. не используются нигде на сайте.

TopStyle имеет отличный механизм предпросмотра: вы можете настроить его так, чтобы изменения в отдельном CSS-файле показывались на примере нужного вам файла HTML. То есть, редактируя один файл, просматривать изменения на другом! И все это на двух движках (Mozilla и IE), да еще с возможностью задания любого размера окна — хоть 6000×3000 пикселей.

Редактор имеет функции «причесывания» старых документов, в которых оформление вынесено в HTML-атрибуты, а также экспорта правил CSS для различных браузеров/версий CSS.

TopStyle строит очень удобное дерево селекторов, избавляющее вас от необходимости вручную расставлять элементы в алфавитном порядке. В этом дереве выводятся сначала все правила для чистых элементов, затем классы, а потом ID.

Конечно, я уже не мыслю работы без панели Style Inspector, которая гораздо удобнее аналогичных решений в каком-нибудь Dreamweaver. Она позволяет очень быстро выполнять рутинные операции — типа выбора нужных шрифтов, цветов и т. д.
При этом, для каждого правила наглядно показывается степень совместимости с разными браузерами.

Одна из самых удобных фич: цветовая палитра на основе CSS — все ваши цвета в одном месте. Теперь не нужно выписывать цвета в начале документа или постоянно ползать в поисках нужного.
Плюс, возможность сортировать и массово заменять их, например, сделать все цвета темнее (хотя лично я этим никогда не пользовался).

Кроме того, очень удобна возможность форматировать стили: например, вытянуть все правила в одну строку для экономии трафика, а при необходимости что-то найти — вернуть к первоначальному состоянию (с отступами и переносами).

В общем, полезных функций много и без перегрузки, как у html-kit, к примеру. Нет панелей вставки тегов, но есть возможность многое настроить под себя. Я, например, назначил горячие клавиши на обертку текста в теги H1 ... H4 по нажатию Ctrl-1 ... Ctrl-4. И так можно задать любые комбинации.

Заключение

В общем, все кто еще не пользуется TopStyle Pro — идите и качайте его с сайта производителя.

Программа недешевая — продается за 80 долларов, но она того стоит. Верстка по стандартам станет намного приятнее. В конце концов, попросите своего начальника купить вам нормальный инструмент!