Полезные инструменты для CSS разработчика. Часть 2.

Июнь 29th, 2012 Рубрики: CSS, Вкусняшки coubertin.cz www.colvillewoodworking.com


Итак вторая часть ссылок на полезные инструменты для css разработки.

Формы

Quick Form Builder — генерирует формы с css разметкой, нам нужно лишь указать имена и тип полей, стандарт (HTML / XHTML) и получить на выходе готовый код html и css.

Wufoo — простой и бесплатный сервис, который позволяет создавать красивые и валидные формы на CSS и XHTML

Компоненты UI (User interface)

List-o-Matic — простой генератор меню, до двух уровней вложенности, несколько оформлений на выбор.

CSS Menu Generator — генератор меню с css, горизонтальные, вертикальные, выпадающие, на ваш выбор.

ThemeRoller — позволяет создавать свои темы для JQuery UI.

Обертка текста

CSS Text Wrapper — данный сервис позволяет придать тексту любую форму и легко вставить его на страницу. Настраиваемый размер блока, выравнивание текста, цвет, шрифт и т.д.

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

Анализ и отладка

— Валидатор CSS.

CSS Analyzer — этот сервис сочетает W3C CSS Validation Service и проверку цветов на контрастность, это особенно полезно для улучшения юзабилити. И многое другое. В результате вы получите очень подробное описание ошибок и предупреждений.

Firebug — расширение для браузера Firefox (есть версии под Chrome). Сочетает в себе отладчик, DOM-инспектор, JS, DHTML, CS, XMLHttpRequest и многое другое. Расширение показывает функцию которая вызвала ошибку, стек вызовов и другую отладочную информацию.

Сопровождение

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

CSS Redundancy Checker — еще один сервис для проверки использования правил. После проверки выводит список не используемых на странице ( или нескольких страницах ) стилей.

Оптимизация

CSS Drive CSS Compressor — инструмент для сжатия стилей. Имеет несколько видов компрессии: слабая, нормальная и сверхкомпактная.

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

MinifyMe – AIR Application — Маленькая утелитка AIR, она позволит вам быстро собрать несколько css файлов в один.

Форматирование

CleanCSS – CSS Formatter and Optimizer — Онлайн сервис для форматирования и оптимизации. Позволяет настраивать баланс читабельности и оптимизации. Очень полезная опция автоматически объединяет одинаковые свойства и селекторы.

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

CSS Toolbox — Бесплатная программа, включающая в себя множество средств для быстрой и эффективной разработки CSS кода. Валидатор, форматтер, оптимизатор и прочее.

Браузерозависимость

Статья о способах тестирования на кроссбраузерную совместимость — статья на хабре содержащая 7 способов проверки на кроссбраузерность.

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

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

IE7-js — очень полезная JS библиотека, которая позволяет исправить множество багов в HTML и CSS для Internt Explorer версии 7 и более младших. Рекомендую подключать ко всем своим сайтам. Так же есть версии для более старших версий браузера, а именно 8 и 9.

Modernizr — еще одна очень полезная JS библиотека. Позволяет использовать такие вещи как CSS 3, HTML 5 в старых браузерах, которые еще не поддерживают такие функции.

Теги: , , , , , , ,

3 комментария к “Полезные инструменты для CSS разработчика. Часть 2.”

  1. Октябрь 25th, 2012 at 20:54
    1

    Еще до кучи:

    CSS 3 Animation Generator
    http://www.css3maker.com/css3-animation.html

    SS3 Please! The Cross-Browser CSS3 Rule Generator
    http://css3please.com/

    Ultimate CSS Gradient Generator
    http://www.colorzilla.com/gradient-editor/

    CSS3 Gradient Generator
    http://gradients.glrzad.com/

    CSS gradient generator
    http://www.display-inline.fr/projects/css-gradient

    CSS arrows generator
    http://cssarrowplease.com/

    OnlineGenerator.net
    http://onlinegenerator.net/

    CSS3 Generator
    http://css3generator.com/

    CSS3 Generator — By Peter Funk & Eric Hoffman
    http://www.css3.me/

    Layer Styles
    http://layerstyles.org/builder.html

    Dabblet.com
    http://dabblet.com/

    Nettuts+ Prefixr
    http://prefixr.com/

    prefixMyCSS
    http://prefixmycss.com/

    CSSPrefixer
    https://cssprefixer.appspot.com/

    cssFx.js — CSS3 property polyfill — It’s So Futuristic, Baby!
    http://imsky.github.com/cssFx/

    CSS Border Radius Generator
    http://border-radius.com/

    CSS3 Patterns Gallery
    http://lea.verou.me/css3patterns/

    Yamldebug bookmarklet tool for web developers
    http://debug.yaml.de/

    Wirify bookmarklet lets you turn any web page into a wireframe in one click
    http://wirify.com/

    CSS Lint
    http://csslint.net/

    CSS optimizer
    http://dataurl.net/#cssoptimizer

    Devoth’s HEX 2 RGBA Color Calculator
    http://hex2rgba.devoth.com/

    Css2Less
    http://css2less.cc/

    Tabifier (HTML and CSS code beautifier) — Arantius.com
    http://tools.arantius.com/tabifier

    Detect mobile browsers
    http://detectmobilebrowsers.com/

    [Ответить]

    ZekMan Reply:

    Спасибо, разберу и добавлю в статью.

    [Ответить]

  2. Октябрь 25th, 2012 at 21:05
    2

Написать комментарий