ПОЛЕЗНЫЕ ИНСТРУМЕНТЫ ДЛЯ CSS РАЗРАБОТЧИКА

Для тех, кто работает и интересуется CSS разработками, будет полезно взглянуть на подборку полезных инструментов для CSS.

В подборку вошли инструменты по работе с макетами, CSS Фреймворками, шрифтами, цветами, спрайтами, формами, Компоненты UI, обертка текста, анализ и отладка, сопровождение, оптимизация, форматирование, браузерозависимость, селекторы и т.д

СПРАЙТЫ

CSS Sprite Generator

Этот инструмент позволяет автоматизировать процесс создания CSS спрайтов. Просто дайте ему ZIP файл, содержащий 2 и более изображений (GIF, PNG или JPG), и он будет генерировать спрайт-изображение и соответствующие правила CSS для ориентации и отображения каждого элемента изображения.

YASC (Yet Another Sprite Creator)
Еще один генератор. Процесс создания спрайта представляет собой следующее: загружается картинка, затем визуально отмечаются необходимые области и им назначается CSS id. Когда выбраны все участки происходит генерация CSS для этих спрайтов.

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

ФОРМЫ

Quick Form Builder
Генерирует XHTML /HTML -совместимые и доступные формы с CSS разметкой. Вводим имена полей, затем выбираем типа каждого поля, формат( HTML или XHTML ) и получаем готовый HTML и CSS код формы.

Wufoo

Wufoo – это бесплатный онлайновый сервис, позволяющий с легкостью создавать хорошо выглядящие, валидные CSS/XHTML формы.

КОМПОНЕНТЫ UI

List-o-Matic
Генерирует навигационные меню ( до 2 уровней), позволяя выбрать одно из нескольких доступных оформлений.

CSS Menu Generator
Генерирует горизонтальные, вертикальные, выпадающие CSS меню.


ThemeRoller
Позволяет создавать собственные темы для jQuery UI.

ОБЕРТКА ТЕКСТА

CSS Text Wrapper

Сервис CSS Text Wrapper позволяет легко придать тексту любую форму и вставить к себе на страницу. Линиями задаем форму. Узловые точки добавляются по нажатию на линию в том месте где необходимо добавить. Можно настроить размеры блока, выравнивание, шрифт и т.д.

The Box Office
Этот инструмент который позволит создать обтекание текста для картинок с различной неправильной формой. Просто вводите ссылку на любую картинку произвольной формы, задаете основное выравнивание изображения, цвет фона, который нужно игнорировать, высоту строки дополнительные отступы и цвет текста, а далее — идем за результатом.

АНАЛИЗ И ОТЛАДКА

W3C CSS Validation Service
Проверка CSS на валидность.

CSS Analyzer

CSS Analyser сочетает W3C CSS Validation Service и дополнительную проверку цветов на контрастность (полезен для улучшения юзабилити) и единиц измерения, используемых в исходном коде. Результатом является очень подробное описание ошибок и предупреждений, точно так же как в W3C CSS Validation Service.

Firebug
Firebug — расширение для браузера Firefox, являющееся консолью, отладчиком, и DOM-инспектором javascript, DHTML, CSS, XMLHttpRequest. Firebug показывает в консоли вызвавшую ошибку функцию, стек вызовов функций, вызвавших эту ошибку. Он предупреждает, что CSS-правило или javascript-метод/свойство, которое вы пытаетесь использовать, не существует.

СОПРОВОЖДЕНИЕ

Dust-Me Selectors
Позволяет проанализировать страницу и показать, сколько и какие стили не используются на странице сайта, а также укажет в каком файле стилей, в какой строке они прописаны.

CssCleaner
Приложение Windows для удаления неиспользуемых CSS классов.

ОПТИМИЗАЦИЯ

CSS Drive CSS Compressor
CSS компрессор с опциями компрессии «Слабая», «Нормальная» и «Сверхкомпактная».

Robson CSS Compressor
Еще один хороший инструмент для компрессии CSS файлов — Robson CSS Compressor. Пока он в стадии разработки, и возможны неточности в его работе.

MinifyMe – AIR Application

Небольшое AIR-приложение, которое позволит собрать несколько css-файлов в один.

ФОРМАТИРОВАНИЕ

CleanCSS – CSS Formatter and Optimizer
Clean CSS является популярным онлайн-инструментом для форматирования и оптимизации CSS. Содержит группы настроек для баланса между оптимизацией и читабельностью. Одна из важных возможностей – это автоматическое соединение одинаковых селекторов и свойств.

Styleneat
Styleneat преобразовывает код CSS в стандартизированный, удобный для чтения формат, структурирует таким образом, что становится легко понять где какие области и как они связаны друг с другом.

CSS Toolbox
Бесплатный CSS Toolbox включает множество инструментальных средств для быстрой и эффективной разработки CSS –валидатор, форматтер, оптимизатор.

БРАУЗЕРОЗАВИСИМОСТЬ

 

Conditional-CSS

Парсер CSS файлов на строне сервера с проверкой на тип и версию браузера. Позволяет сформировать специальные условные комментарии для различных групп браузеров. Доступны версии на PHP, C# и С.

Litmus
Litmus обеспечивает проверку во всех основных браузерах, а также представляет отчет об ошибках, чтобы помочь вам идентифицировать и исправить любые ошибки. По завершении проверки, вы можете составить отчет о совместимости, чтобы представить его клиентам. Для бесплатного использования Litmus предлагается ограниченная версия.

Web Browser CSS Support
Подробная таблица поддержки CSS-стандарта популярными браузерами.

When Can I Use
Даёт возможность сравнить поддержку браузерами различных новейших технологий, а именно — HTML 5, CSS 3, SVG и т.д. Можно выбрать как определённые браузеры, временные периоды, статусы, так и определённые технологии.


IE7.js
IE7-js это javascript библиотека, которая исправляет множество багов в HTML и CSS для версий Internet Explorer седьмой и ниже. К примеру, она исправляет поддержку прозрачности в PNG, фиксированное позиционирование элементов и фоновых изображений (position: fixed), поддержку псевдо класса: hover для всех тэгов и др.


Modernizr
Modernizr это небольшая простая javascript-библиотека, которая поможет использовать такие технологии, как CSS3, HTML5 в браузерах которые еще не поддерживают это технологии.

СЕЛЕКТОРЫ

Sizzle javascript Selector Library
Быстрый javascript движок выбора CSS селекторов. Sizzle поддерживает практически все CSS3 селекторы – даже такие редко используемые, как экранированные селекторы (”.foo\+bar”), юникодные селекторы и т.д.

SelectORacle
Сервис дает описание на человеческом языке сложных селекторов CSS и может быть очень полезен при изучении оных.

YUI Selector Utility
YUI Selector Utility позволяет использовать синтаксис CSS3 селекторов на javascript, упрощая сбор, фильтрацию и тестирование HTML элементов.

YUI StyleSheet Utility
С помощью StyleSheet Utility на лету создавать и модифицировать CSS стили.