Мы продолжаем рассматривать текст и источник editors для дизайнеров и веб-разработчиков.

После тщательного рассмотрения WYSIWIG — и исходный код editors Сейчас it’ пора присмотреться в приложениях для продвинутых CSS-кодирование.Причина: в то время как многочисленные HTML-редакторы предлагают более или менее продвинутый CSS-поддержки есть также всестороннее-CSS-редакторы, которые предлагают сложную интегрированную среду разработки для CSS-coding.

Конечно, реальные ниндзя CSS принимать ничего, кроме минималистичный блокноте или некоторые сложные исходный код-редактор.В самом деле, CSS-редакторы зачастую считаются ненужными и superflous — В конце концов, вы можете сделать то же самое в вашем любимом текстовом редакторе.И иногда это верно — в то время как есть некоторые really плохие HTML-редакторы есть и еще хуже CSS-редакторов.Особенно инструмента автозавершения кода очень хорошо вздутие живота код в крайности, заставляя результате стилей ненужные сложные и трудно поддерживать.Зачем кому-то покупать CSS-редактор, чтобы поднять расходы на техническое обслуживание после

Но CSS-редакторы могут быть полезными, кроме того, вы можете эффективно использовать их в различных условиях разработчики с разными навыками.Веб-профессионалы могут использовать CSS-редактор, чтобы улучшить рабочий процесс и получить все полезные CSS-инструменты, предоставляемые одной application.Новички могут легко узнать по analzying CSS стилей и использованием живых редактирование, чтобы понять как дизайн построен, и что на самом деле происходит за кулисами.В любом случае вы должны убедиться, что вы знаете, что вы делаете, и не до конца производстве quick’ n’dirty stylesheet.

Почему, черт возьми, мне нужен CSS-редактор

Ну, на самом деле вы don’ т need один.Но вы можете использовать от одного до сделать рабочий процесс более effective.Основное преимущество CSS-редактора заключается в интегрированной Окружающая развития, которые они предлагают для веб-разработчиков.Основная задача CSS-редактора заключается в объединении функции редактирования CSS-стилей, HTML-исходный код и макет сайта эффективно в рамках компактного интерфейса.Однако, зачастую CSS-редакторы идут еще further.

Помимо кодирующих функциональные хороший CSS-редакторы предлагают оказание помощи tools для отладки и тестирования, а также полезные функции, такие как живые редактирование, просмотр в различных браузерах, расширенный просмотр кода, форматирования кода, Beautifier и компрессора, проверка, построенныхв CSS-ссылки и инструменты управления проектами.Сочетание этих возможностей вместе, вы получите целый арсенал полезных инструментов, все под рукой перед you.

Некоторые редакторы также позволяют организовать части кода в папки и фильтровать стилей легко, что упрощает обслуживание и делаетисходный код проще для сканирования.Еще одна полезная функция мгновенного предварительного просмотра таблиц стилей с Internet Explorer или FireFox, которую трудно найти в любом “ стандартные HTML-редактор.Кроме того, с CSS-редакторы it’ легко анализировать код проблемы с использованием кода инспектор и разложить стилей с помощью так называемых “ X-Ray” function.

Говоря коротко: главное преимущество CSS-редактора, что он предлагает интегрированные, компактные environment для CSS-дизайном и обеспечивает быстрый и эффективный рабочий процесс кодирования которая потребует десятков внешних инструментов в противном случае.Так какие CSS-редакторы имеются

Xyle

Xyle (Mac)
Этот продвинутый редактор позволяет разработчикам редактировать веб-сайты на лету с использованием встроенных стилей.Точно также на веб-Developer’ с панели инструментов можно изменить CSS-кодом и изменения будут отображаться immediately в окне браузера.По сравнению с веб-Developer’ с панели инструментов, с Xyle у вас есть дополнительные полезные функции, такие как селекторы дерево, подсветка синтаксиса и продвинутый файл management.

Большой preview

В режиме браузера можно просматривать в Интернете с помощью Safari’ S оказания engine.В режиме выбора, при нажатии в любую часть веб-страницы, отображаемой покажет exact часть HTML и CSS источников, которые несут ответственность за содержание и форматирование, что part.

В каскадном режиме, Xylescope отображает не только стиль правила, которые применяются к выбранному элементу, но и все правила, применяемые к ancestors выбранного элемента.При отладке сXylescope вы можете просто выбрать “ problematic” элемента в каскадном режиме, чтобы увидеть, какие правила действительно применяются и какие из них переопределен, в том числе те, которые применяются к предкамданный элемент!Xylescope отображает специфику селекторы указать, почему правила имеют приоритет и тускнеет переопределения свойств CSS для улучшения понимания.Xylescope также предлагает интеграцию с внешними текстовыми редакторами, таких как BBEdit.

Цена: $ 19,95.Пробная версия доступна.Хорошее решение без дополнительных функций, таких как проверка, компрессор или красивая предложение оптимальных price.

Некоторые из Xyle’ S features

• Автоматическая formatting
• Selector matching
• Фильтр большие файлы CSS с использованием смарт-groups
• Встроенный DTD зрителя

Stylizer

Stylizer (Windows)
Две вещи делают Stylizer несколько иной менталитет, чем у других: он использует сеткуинтерфейс вместо текстового редактора, и он имеет Firefox и IE встроенный, поэтому, когда пользователь меняет CSS, it’ S распространяться сразу в браузере.Подвесная система позволяет CSS почувствовать себя “ CSS на rails”, потому что это делает невозможным есть какие-то ошибки CSS.Это позволяет Stylizer делать вещи, такие как Firebug, как элемент инспектор, который позволяет пользователю диагностировать и редактировать в том же месте, и редактируемых, фары в стиле фильтрации system.

В Stylizer размеры могут быть скорректированы на fly.Чтобы изменить высоту, края, или второстепенное положение, пользователь может в буквальном смысле нажмите на значение, переместите мышь вокруг, и смотреть элемент манипулировать в реальном времени.Цвета те же.Пользователь может нажать на них, перетащите мышью, и посмотреть, цвет текста, фона или границы изменения в браузере, в режиме реального времени, создавая “ Photoshop для web” Тип чувство.Stylizer Basic является бесплатным.Полная версия (Цена: $ 69.95) isn’ т, что разные, но в бесплатной версии it’ невозможно отфильтровать таблицу стилей, чтобы показывать только правила с указанным content.

Rapid CSS Editor

Rapid CSS Editor (Win)
Этот редактор поддерживает разработчиков с подсветкой синтаксиса, Autocompleter и код инспектор, который обеспечивает производятся код является правильным.Вы можете использовать встроенные в CSS и HTML-ссылки для быстрого поиска синтаксис и атрибуты данного селектор или тег.Цвет инструмент позволяет разработчикам выбрать правильные цвета без переключения в цвете приложения и наблюдать результат живут помощью просмотра таблиц стилей с Internet Explorer и Firefox.Файловый менеджер может также позаботиться о загрузке CSS-файлов через FTP.Кроме того, вы можете использовать расширенный буфер обмена, чтобы хранить несколько фрагментов кода под рукой.Редактор стоит $ 29,85.Триал-версию available.

Некоторые из быстрого CSS’ S features

• Подсветка синтаксиса для CSS и HTML documents
• CSS Checker и Validator
• CSS код Explorer
• Код Inspector
• Код автоматическое заполнение для CSS и HTML
• Мгновенный предпросмотр таблицы стилей с Internet Explorer или FireFox
• X-Ray для HTML preview
• Соответствие стандартам CSS и различных browsers
• Интеграция с W3C CSS и HTML validators
• Встроенный CSS Reference
• CSS Code Formatter и Beautifier
• CSS код Compressor
• Поиск и замена с использованием регулярных выражений support
• Поиск и замена в files
• Multi Пункт Clipboard
• Встроенный файловыйExplorer
• Сохранить и открывать файлы непосредственно из FTP
• Проект и управление сайтом и FTP publishing
• Полностью настраиваемый interface
• Код collapse

TopStyle

TopStyle (Win)
CSS-HTML-редактора TopStyle доступен в ее Lite-версии в HTML-редакторе Homesite — Однако, есть и сложные полная версия для профессиональных веб-разработчиков.С TopStyle разработчики получают ряд особенностей, которые aren’ T доступна в других редакторах.Например, со встроенным HTML-опрятным вы можете легко конвертировать depricated HTML-теги действительным XHTML.Интегрированный Стиль update заменяет устаревшие теги, такие как < font>-тег с соответствующими действительным CSS-правил.Клип библиотека содержит часто используемые фрагменты кода.Разделенном окне позволяет прямое сравнение браузеров дисплеев сайт презентацию в Internet Explorer и Mozilla.Вы также можете изменять Doctype-определение выяснить, как разные DTD, влияющие на размещение в различных browsers.

Наверное, самым мощным инструментом в TopStyle является Стиль checker.Не только он может проверить таблицы стилей и, следовательно, обеспечить правильную презентацию макета в разных браузерах.Он может также прогнозируют bugs в популярных браузерах, которые могут появиться, несмотря на действующий CSS-кодом.Вы также можете направить CSS-стилей с W3C Сервис проверки, чтобы исправить проблемы, которые haven’ T были найдены TopStyle.Полная версия стоит $ 79,95.Внимание: Lite-версия can’ т быть обновлены.Windows-only.

Некоторые из Top Style’ S features

• HTML, XHTML и CSS редактирование в одной программе: HTML атрибуты относятся к категории так что вы можете быстро узнать, какие требуются, и он генерирует XHTML-совместимый разметки с простого переключателя.
• Легкая навигация между документами: Нажмите HTML атрибут класса, чтобы перейти к определению этого класса во внешней таблице стилей или нажмите теги якоря или CSS ссылке, чтобы открыть связанный файл для редактирования.Вы даже можете нажать на < IMG > тег, чтобы открыть графический файл в вашем любимом редакторе изображений.
• Элементов и атрибутов проверки при вводе: Все классы определены в вашем стиле блоки и внешние таблицы стилей, поэтому присвоение класса для HTML тега очень простая задача.
• Style Checker: проверка ваших стилей с несколькими браузерами, выбор любых недействительных свойства или значения он находит.Вы также можете передавать ваши таблицы стилей непосредственно в W3C’ S служба проверки CSS, так что вы можете быстро проверить против официальной спецификации CSS.
• Style Upgrade: быстрый, надежный способ заменить все устаревшие (устаревшее) HTML разметки – в том числе долгосрочные злоупотреблялиHTML < шрифт > теги – с эквивалентным CSS.
• HTML Tidy Integration: Сделать переход на XHTML безболезненным с встроенным Tidy конфигурации, который преобразует HTML к XHTML одним щелчком мыши!
• Отчеты сайта: сразу увидеть, где используются стили на вашем сайте.Узнайте, где you’ ве применяются классы стиля, который aren’ T определена в любых таблиц стилей, или увидеть, какой стиль классы you’ ве определено, что aren’ T используется.
• Полноэкранного просмотра: Сплит просмотр между Internet Explorer и Mozilla для непосредственного взгляд на различия между браузерами.Вы даже можете изменить! DOCTYPE каждой панели предварительного просмотра на лету, чтобы увидеть, как различные объявления типа документа повлиять на ваш макет.
• Интеграция с W3C HTML проверки: Результаты проверки отображаются в TopStyle, с гиперссылкой номеров строк, которые синхронизируются с TopStyle’ редактор с.

CSSEdit

MacRabbit CSSEdit (Mac)
Аналогично XyleScope, CSSEdit предлагает в режиме реального времени стиль стилей.Даже тогда, когда динамическое веб-приложение работает на сложных баз данных или использует AJAX, вы можете стиль и проанализировать ее без хлопот загрузке или обновлении (онлайн и оффлайн — этого не происходит в веб-Developer’ с панели инструментов).Selector Builder позволяет описать то, что элементы стиля в простом английском языке. Интеллектуальный CodeSense анализирует CSS и CSS поведение предложить умный, контекстно-зависимая suggestions.

Большой preview

Рентгеновский инспектор показывает вам, какие стили применяются к HTML-документ.Вы также можете проверить свои листы в соответствии со стандартами W3C и использовать средства управления проектами (этапы и т.д.) для улучшения рабочего процесса.Среди прочего CSSEdit автоматически добавляются скобки, (полу-) двоеточия и соответствующие расстояния для вас.Если вы столкнулись с таблицей стилей от кого-то, кто didn’ T имеют такой роскоши, вы всегда можете сделать Re-отступ, чтобы применить настройки расстояния.Кроме того, он имеет живой просмотр feature и в буфер обмена библиотека для часто используемых фрагментов кода.

Существует EditCSS плагин для Firefox, а также CSSEdit букмарклеты.Вы можете начать редактирование любых site’ листы стиль с помощью одного клика в browser’ баре с закладки, а затем использовать передовые CSSEdit’ S редактирования.Инструмент имеет красивый, интуитивно interface которая является очень компактным, но очень хорошо организована и хорошо работать.EditCSS стоит 29,95 евро ($ 47).Существует также триал-версию � …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров