Редактор TopStyle Pro

2006-06-12 перейти к комментариям

TopStyle

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

Инструмент

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

Теги: , , ,

Комментарии RSS для комментариев

  1. # pepelsbey — 1368 дн. назад:

    Спасибо, что сделал то, до чего у меня самого давно не доходили руки ;) Помимо всего, я бы ещё упомянул про очень подробную подсветку и атрибуты class и id в качестве ссылок на их описание в CSS-файле. Редактор действительно отличный :)

  2. # Александр Шабуневич — 1368 дн. назад:

    Да, аттрибуты в виде ссылок — это и правда очень удобно.

    Просто когда сел писать — все перемешалось в голове =) Столько разных фич. Одно дело — пользоваться, а описать все сложнее. Что-нибудь да забудешь.

  3. # signique — 1368 дн. назад:

    Спасибо, а то Dreamweaver кажется слишком навороченным, а в блокноте писать как то..

  4. # Mad Cat — 1368 дн. назад:

    Толковая софтина, спасибо.

  5. # Severus — 1368 дн. назад:

    Спасибо за обзор редактора. Сам пользуюсь PSPad. Вполне добротный блокнот, но без узкой специализации. После подобных обзоров в папке «My Downloads» появляются триал-версии программ, но пока ничего не изменилось =)

  6. # Vond — 1368 дн. назад:

    Есть полноценная ПРО версия 3,11. Давно как то скачал от Fozi :) Кому-то надо?

  7. # Александр Шабуневич — 1368 дн. назад:

    Severus: Ну в качестве блокнота я TopStyle и не использую — тут у меня фаворит UltraEdit.

  8. # Michael de`OZ — 1367 дн. назад:

    Спасибо, попробую

  9. # Игорь — 1367 дн. назад:

    Я уже несколько лет использую данную софтину! Очень нравиться, потому как визуальные редакторы вообще никогда не использую! А html и ручками мона написать! В блокноте! А тут все просто, сразу все видно и запоминать не надо, конечно со временем уже многое на автомате в голове!

  10. # Игорь — 1367 дн. назад:

    Хотелось бы попросить автора, зделать статейку по вкладкам, хотябы по тем, которые используются на данном ресурсе. А лучше по тем, которые еще будут меняться при наведении, но и будут различной ширины, взависимости от количества текста в них. Заранее спасибо.

  11. # Александр Шабуневич — 1367 дн. назад:

    А лучше по тем, которые еще будут меняться при наведении, но и будут различной ширины, взависимости от количества текста в них.

    А у меня они и так меняют ширину. А фон при наведении менять тоже не очень хитрое дело. Просто про табы уже столько всего написано… Ну может когда-нибудь и сделаю =)

  12. # PineGin — 1359 дн. назад:

    Пользовался topStyle Pro много лет, но сейчас в связи с невозможностью работы последнего с utf-8 пришлось с большим сожалением от него отказаться. Пока пользуюсь PhpED, но topStyle-ровских селекторов нехватает...

Что вы об этом думаете?

Помощь по Textile, gravatar

Нет CSS хакам? Как у меня сменяются картинки в заголовке страницы