TopStyle 5

Спустя 3,5 года после выхода TopStyle 4 встречаем TopStyle 5 — свежую версию популярного редактора CSS- и HTML-кода.

Как и с TopStyle 4, доступна бесплатная пробная версия TopStyle 5, от зарегистрированной отличающаяся немногочисленными ограничениями, наиболее значительное из которых — задержка при запуске.

К сожалению, весьма актуальная сейчас поддержка синтаксиса CSS-препроцессоров LESS/SASS по-прежнему отсутствует, но есть другие интересные новшества.

CSS

  • Поддержка CSS3.
  • Prefixr — возможность автоматического добавления префиксов в выделенный CSS-код.
  • Поддержка медиа-запросов CSS (CSS3 Media Queries).
  • Встроенные генераторы CSS-градиентов (без префиксов), тени от текста (text-shadow).
  • Возможность разделения кода на фрагменты, называемые группами, с помощью особых псевдотегов, основанных на CSS-комментариях и последующего быстрого перехода к нужной группе с помощью контекстного меню в панели CSS Selector.
  • CSS Tidy — встроенное средство приведения CSS-кода в порядок или форматирования его в соответствии с выбранными настройками.
  • Визуальная индикация поддержки CSS-свойств тем или иным браузером путём отображения пиктограмм соответствующих браузеров напротив имени свойства.
  • Возможность визуального отображения цвета, соответствующего ключевому слову CSS (например, red), путём отображения этого цвета в качестве фона соответствующего ключевого слова в таблице стилей.
  • Возможность быстрого изменения цвета с помощью окна, открываемого по тройному щелчку на коде соответствующего цвета либо по щелчку на контекстной кнопке, расположенной рядом.
  • Улучшенная справка по CSS-свойствам с возможностью перехода на соответствующие онлайновые спецификации.

HTML

  • Поддержка HTML5.
  • Встроенный HTML5-валидатор.
  • Функция автоматического заключения заданного кода в теги заданного элемента.
  • Встроенных редактор HTML-кода для карт изображений (Image Maps). Ранее для этого приходилось использовать сторонние инструменты типа CuteMAP.

Прочее

  • Помимо IE и Firefox, теперь доступен встроенный просмотр с использованием браузерного движка Chrome.
  • Встроенный фреймворк iWebKit 5, призванный облегчить разработку для мобильных устройств iPhone, iPod Touch и iPad.
  • XRAY — встроенный аналог инспектора, доступного среди инструментов для разработчика в современных браузерах. XRAY позволяет в окне предпросмотра определять быстро определять расположение и габариты выбранного элемента, значения его CSS-свойств, а по щелчку на CSS-селекторе — быстро переходить в соответствующее место таблицы стилей (не вполне понятно, впрочем, что будет в случае, если селектор присутствует в таблице стилей в более чем одном экземпляре; проверить не представляется возможным, поскольку у автора этих строк эта функция не работает как минимум в пробной версии).
  • Возможность синхронного выделения исходного HTML-кода и текста в окне предпросмотра.
  • Автоматическая подсветка соответствующей парной скобки при выделении открывающей или закрывающей фигурной скобки.
  • Улучшенное автодополнение:
    • динамическая фильтрация подходящих CSS-свойств по мере набора имени свойства,
    • вывод имён тегов HTML-элементов и классов, использованных в текущем HTML-документе, при наборе кода внутри элемента STYLE.
  • Интеграция с веб-шрифтами Google (Google Web Fonts): после выбора соответствующего шрифта автоматически генерируется необходимый HTML-код подключения JavaScript-сценария в HEAD-секции текущего HTML-документа. Впрочем, польза этой функции, судя по всему, ограничена, поскольку логично предположить, что работает она только для inline-стилей, набираемых в атрибуте style HTML-элемента, что в общем случае является дурным тоном.
  • Color Contrast Analyser — инструмент для визуального подбора сочетания цвета текста и его фона, удачного с точки зрения контраста.
  • Поддержка защищённого протокола SFTP (SSH File Transfer Protocol) во встроенном FTP-клиенте.
  • File History — встроенный упрощённый аналог системы управлениям версиями, позволяющий сравнивать соседние версии и откатываться на резервную копию одной из предыдущих версий редактируемого файла.
  • Возможность подсветить все упоминания выделенного текста в текущем документе.
  • Улучшенная массовая (сразу во многих файлах) автозамена (Find/Replace), позволяющая, в частности, осуществлять автозамену через FTP/SFTP аналогично автозамене в файлах, расположенных на компьютере пользователя.
  • Улучшенная вставка шаблонов кода (Auto-Replace):
    • поддержка вставки многострочного текста;
    • аналог аргументов: возможность ввести произвольный текст, подставляемый в определённое место подлежащего вставке кода перед его вставкой;
    • возможность использования раздельных таблиц автозамены для CSS- и HTML-кода.
  • Поддержка рабочих сред (Workspaces), позволяющих сохранять и восстанавливать наборы открытых одновременно файлов.
  • Smart Copy and Paste — автоматическое копирование слова, на котором находится каретка и которое было бы выделено при двойном щелчке на нём, при нажатии клавиш Ctrl+C без необходимости предварительного ручного выделения слова (при копировании оно выделяется автоматически). С помощью Ctrl+Shift+V можно вставить содержимое буфера вместо слова, на котором находится каретка.
  • Quick Access Panel — вертикальная панель кнопок, аналогичная таковым в HomeSite и PhpED и позволяющая быстро включать/выключать отображение нумерации строк, переноса по словам, отображение скрытых символов и проч..
  • Drag-and-drop editing — некое редактирование с использованием перетаскивания.
  • Переработанная структура меню: например, меню «Tools» упразднено, а всё, что относится к CSS, теперь расположено в меню «CSS».
  • Подсветка синтаксиса теперь основана на цветовой схеме Solarized.