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

http://www.w3avenue.com/2009/05/04/list-of-really-useful-tools-for-css-developers/
  • Перевод
Это не попытка создать список всех существующих инструментов для CSS разработки. Только некоторые, наиболее полезные были отобраны и размещены в соответствующих категориях.


Чтобы инструмент был по-настоящему полезен, у него должна быть хорошая документация и дружелюбный интерфейс. К сожалению, некоторые инструменты в списке не полностью попадают под данные критерии. Если кто-то знает лучшие альтернативы с более дружелюбным интерфейсом и большей функциональностью, пишите в комментариях.

Макеты


CSS Layout Generator
Этот генератор может создать трехколоночный (одно-, двух-) макет с плавающей или фиксированной разметкой, содержащий header и footer. Размеры можно задавать в px, em или %.

Grid Designer
Позволяет создать модульную сетку макета, с учетом таких параметров как: количество колонок, расстояние между колонками, размер полей, кегль основного шрифта, кегль заголовков, отступы и т.д. А также можно посмотреть, как будут выглядеть основные элементы форматирования текста в данной сетке.

Layout Generators
Позволяет создавать резиновую многоколоночную или сеточную разметку. Позволяет задавать ширину и цвет. CSS код генерируется автоматически.

Генератор HTML+CSS шаблонов
Сервис позволяет в несколько кликов мыши получить готовый дивовый каркас с нужными параметрами. После выбора параметров будет предложено скачать архив, в котором находится 2 файла с HTML и CSS.

PSD2CSS
Cервис, для конвертирования PSD макетов в cверстанную страницу. Быстро, бесплатно и относительно качественно.

CSS Фреймворки


Boks
Boks это визуальный редактор для CSS фреймворка Blueprint, сделанный в виде приложения Adobe AIR. С помощь этого редактора можно визуально создавать и заполнять разметочную сетку, задавать вертикальный ритм, и экспортировать результат в HTML и CSS.

Полезные инструменты и ссылки для CSS фреймворка Blueprint.

YAML Builder
YAML Builder это онлайновый сервис для визуального создания шаблонов основанных на HTML/CSS фреймворке YAML.

YUI CSS Grid Builder
Простой веб интерфейс, используемый для быстрого создания кроссбраузерных шаблонов на основе YUI grid.

960 Grid System – Variable Grid System
Variable Grid System – это быстрый способ создать CSS сетку, на основе CSS фреймоврка 960 Grid System.

Grid System Generator
Grid System Generator позволяет создавать шаблоны с фиксированной разметкой и валидным CSS / XHTML. Шаблоны могут быть основаны на одном из четырех CSS фреймворков: 960 Grid System, Golden grid, 1kb grid, Simple grid system. В дополнение к каждому шаблону также создается png файл для дизайна в Fireworks, Illustrator, OmniGraffle, Photoshop или Visio.

Шрифты


Typetester
Typetester – это весьма удачное веб-приложение, предназначенное для сравнения шрифтов между собой. По словам разработчиков, основная задача — облегчить жизнь веб-дизайнера. Одновременно можно сравнивать три шрифта.

CSS Type Set
Это сервис позволяющий применить к тексту CSS свойства и посмотреть, как это будет выглядеть.
Все изменения моментально отражаются на примере, а сгенерированный CSS код можно скопировать и использовать в дальнейшем.

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

Texster
Texster — сервис для подбора «безопасных» шрифтов для вашего сайта. Не смотря на то, что существует множество аналогичных и в основном зарубежных ресурсов, texster отличается тем, что результаты отображаются сразу для всех шрифтов, что позволяет сравнить их и выбрать нужный.

CSS-Typoset Matrix and Code Generator

CSStxt
Несложный веб-инструмент создания CSS стилей шрифта.

EM Calculator AIR Application
Калькулятор вертикального ритма в XHTML & CSS; легко конвертирует px в em; padding и margins вычисляются автоматически.

Em Calculator
Em Calculator это небольшой JavaScript инструмент который преобразовывает определенное значение px в соответствующее значение в em.

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

Цвет


CSS Color Editor
CSS Color Editor позволяет заменить цветовую схему вебсайта. На сервис локальный CSS файл, выбираются новые цвета, а затем сервис генерирует CSS файл с уже замененными цветами.

Color Palette Generator
По заданному рисунку генерируют цветовую палитру состоящую из ключевых цветов.

Color Contrast Check
Действительно интуитивный онлайн инструмент для проверки цвета, который позволяет внести цвет переднего и заднего фона в шестнадцетиричном формате или при помощи ползунков. Инструмент даёт моментальный результат — показывает, как выглядит эта комбинация и обладает ли она достаточной контрастностью при просмотре людьми, у которых нарушено цветовосприятие, или при просмотре на черно-белом экране (тест WCAG 2).

ColorZilla
ColorZilla расширение для Firefox. В ColorZilla можно получить цвет, кликнув в любом месте сайта и после перенести этот цвет в любую другую программу (имеется 5 вариантов описания цвета). Можно изменять масштаб изображения страницы(20% – 1000%). Так же есть встроенный просмотрщик палитры, избранное, DOM инспектор и поддержка firebug.

Конвертор HSL в RGB

Спрайты


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 Redundancy Checker
Проверяет, все ли правила из CSS используются в HTML. После проверки выводит список не использованных на данной странице или группе страниц.

Оптимизация


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# и С.

7 простых способов протестировать кроссбраузерную совместимость

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”), юникодные селекторы и т.д.

YASS: Yet Another cSS selector
Самая быстрая JavaScript-библиотека для выбора элементов по CSS-селектору.

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

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

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

Разное


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

Cheat Sheets


CSS Cheat Sheet
Одностраничный CSS cheat sheet перечисляющий все селекторы (CSS 2.1) и свойства. Включает картинку box-модели, единицы измерения CSS.

CSS Shorthand Cheat Sheet

YUI Library: CSS Reset, Base, Fonts, и Grids

Blueprint CSS Cheat Sheet

За пределами CSS


MoreCSS
MoreCSS это ориентированная на дизайнеров JavaScript библиотека, которая позволяет писать код в CSS стиле для создания всплывающих окон, тултипов, меню на табах, таблиц «зебра», расширинных стилей списков и применения кросс-браузерной прозрачности.

LESS – Leaner CSS
Less это Ruby gem, который расширяет CSS добавляя следующими возможностями: переменные, миксины, операции и вложенные правила. Достаточно переименовать .css файлы .less для получения всех этих возможностей.

DtCSS
DtCSS – это PHP скрипт, который обрабатывает CSS файлы, позволяя использовать в них вложенные селекторы, цветовое смешение и т.д. DtCSS читает CSS файл со специальными инструкциями написанными для DtCSS, и выдает наружу обычный CSS. Имеется умная кэширующая система.

Sass + Compass
SASS — компилятор в стайлшиты. Очень удобно — форматирование отступами, как в питоне, миксины с параметрами (почти функции), переменные и операции над ними.
  • +161
  • 56,1k
  • 65
Поделиться публикацией
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама
Комментарии 65
  • –3
    Спасибо, нашел для себя много полезного, хоть с css приходится работать не так часто.

    В закладки, однозначно!
    • +17
      Спасибо, нашел для себя много полезного...

      В закладки, однозначно!

      Так вот кто мои блоги спамит! :)
      • 0
        Простите, вы о чем?
        • +3
          сейчас один из любимейших камментсов, с которыми заходят русскоязычные спам-боты на платформе Wordpress это именно "Спасибо, нашел для себя много полезного" :)
          • +5
            «Около 3х лет вплотную работаю над этой проблемой и нахожу ваши идеи немного легкомысленными»

            :)
        • +2
          Я бы сказал бывают в жизни веселые случайности, если бы кто-то в карму не плюнул :)
      • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          Боты на хабре? Нет пути.
          • НЛО прилетело и опубликовало эту надпись здесь
        • –12
          А где ссылка на первоисточник? www.w3avenue.com
          • +10
            А ведь всего лишь стоит обратить внимание, что оформлено как перевод. Соответственно и ссылка есть там, где ей положено быть. :)
        • 0
          Огромное спасибо, действительно список полезностей и вкусностей!
          • 0
            хорошая подборочка — спасибо
            • –2
              Супер!
              Однозначно в закладках.
              • +6
                Добавьте csstemplater.com
              • –17
                Спасибо за работу, очень здорово!!! С радостью бы плюсанул, но не могу! =)
                • 0
                  прямо подборка для ленивцев)))
                  • 0
                    Ещё одним полезным плагином для Firefox — MeasureIt. Как не трудно догадаться — это линейка для замеров в пикселях.
                    Найти можно здесь: www.kevinfreitas.net/extensions/

                    • 0
                      Советую попробовать FastStone Capture
                      • 0
                        Линейка есть и в Web Developer, может немного хуже, но зачем лишние плагины?

                        Странно что про этот плагин (Web Developer) не сказано ни слова, а ещё никто не вспомнил о ColorZilla.
                        • 0
                          Мне Web Developer не нужен, а в Firebug линейки нет. А что уж до ColorZilla, то смотри раздел Цвет…
                      • 0
                        Полезно, хотя на практике, крайне редко использую подобные сервисы, но поиграться подобными штуками, люблю:)
                        • 0
                          Огромное спасибо — хорошее собрание полезных ссылок в одном месте. Думаю, что обязательно пригодится =)
                          • +2
                            жаль еще не придумали сервис, в котором загружаешь сверстанный шаблон (в любом браузере), а он тебе выдает фиксы для остальных браузеров, чтоб все одинаково выглядело :)
                            • +3
                              или лучше загружаешь .psd, а на выходе чистый, семантичный, кроссбраузерный шаблон:))
                              • +4
                                Так есть такие сервисы, множество. Например free-lance.ru, rentacoder.com и т.д:))
                                • 0
                                  но качество работы данных сервисов не всегда устраивает, приходится загружать .psd заново :)
                                • +1
                                  да пожалуйста psd2cssonline.com
                              • –1
                                Вротмненоги, сколько вкусного. Забукмарчил.
                                • –10
                                  А кто такие разработчики CSS? что разрабатывают на ЯЗЫКЕ CSS, а CSS производительный язык?
                                  • 0
                                    я бы их назвал CSS-дизайнеры, нежели разработчики. Но без их работы, можно слабо себе представить web-дизайнерское будущее и настоящее.
                                    • +1
                                      А почему бы не назвать комплексно — верстальщики?
                                      • 0
                                        это немного разные вещи: css-дизайнеры и верстальщики.
                                        • 0
                                          И в чём же разница?
                                    • 0
                                      многие программеры почему-то думают, что CSS это какой-то аппендикс и чего с ним возиться… ошибаются, CSS не менее сложная наука, чем к примеру тот же самый Jscript.
                                      • –1
                                        Но уж точно не разработчики.
                                    • 0
                                      Вотжешьбл*

                                      Пользуюсь только файрбагом.
                                      • +3
                                        Блин, дежавю :) Думаю, где я это все видел. А вы неделю назад переводили список для PHP с этого же сайта…
                                        • +2
                                          Да, было дело :) Там в комментах кто-то попросил перевести, вот я и перевел…
                                        • –1
                                          Добавляю в закладки! Спасибо за перевод.
                                          • 0
                                            еще хочу посоветовать sass — компилятор в стайлшиты. Очень удобно — форматирование отступами, как в питоне, миксины с параметрами (почти функции), переменные и операции над ними типа 10px+2pt или #00ff00 + #ff0000. Создатели называют тулзу «css haiku». Подробнее можно почитать на haml-lang.com/, мануал — haml-lang.com/docs/yardoc/SASS_REFERENCE.md.html, песочница для поиграться — на lab.hamptoncatlin.com/play/with/sass

                                            написан на руби, есть порты на php, c# и куда-то еще
                                            • 0
                                              да, есть ещё странное, типа psd2cssonline.com
                                              на удивление хорошо работает
                                            • 0
                                              Интересно, нада будет поглядеть на досуге. Добавил в список.
                                            • 0
                                              вот еще- spoon.net/browsers
                                              не нашел у Вас в списке.
                                              можно загрузить любой браузер из веб и проверить свой сайт на кроссбраузерность.
                                              • 0
                                                Заменил ссылку на обзор таких сервисов на хабре. Там он есть :)
                                              • +2
                                                есть ещё странное — генерация CSS и шаблона по PSD, правильно оформленному. На удивление хорошо работает, на ютубе есть несколько скринкастов. psd2cssonline.com
                                                • 0
                                                  Хм, интересно. Добавил.
                                                • +2
                                                  А как же YASS разработка хабрапользователя sunnybear? Sizzle года через два до его скорости дойдет.
                                                  • 0
                                                    Спасибо, не знал такого. Добавил.
                                                  • 0
                                                    Вы этим пользуетесь?
                                                    • 0
                                                      Чем-то пользуюсь, чем-то нет. О многих позициях узнал только из этого обзора.
                                                      А в чем смысл вопроса?
                                                    • 0
                                                      Интерес подлинный. Спасибо за ответ.
                                                      • 0
                                                        Большое спасибо за подборку
                                                        • 0
                                                          Есть еще ExtCSS, тоже позволяет использовать вложенные конструкции и константы в CSS. Написан на PHP. Только автор никак не расшевелится написать документацию.

                                                          Использование переменных:
                                                          $vars {
                                                          	$bgcolor = #efefef;
                                                          	$alink = #414141;
                                                          	$avisited = #999;
                                                          	$ahover = #01a5e4;
                                                          }

                                                          Вложенные конструкции:
                                                          .post {
                                                                  font-size: 0.875em;
                                                                  p, ul, ol {
                                                                          margin: 0 0 14px;
                                                                  }
                                                                  ul, ol {
                                                                          padding: 0;
                                                                          li {
                                                                                  display: list-item;
                                                                          }
                                                                  }
                                                          }

                                                          Описание псевдоэлементов во вложенных конструкциях:
                                                          .nav a.current {
                                                          	&:link {…}
                                                          	&:visited {…}
                                                          }


                                                          Есть еще аналог PHPшного include, а так же корректная работа с @media.
                                                          • +2
                                                            + Ещё один фрэймворк css-framework.ru/
                                                            • 0
                                                              Кому нужно — для импорта в закладки замечательного браузера FireFox файлик тут.

                                                              Там немного передлано — убрана лишняя разгруппированность, а также ссылки на extensions FireFox-а и раздел «за пределами CSS».

                                                              Пользуйтесь кому нужно :)
                                                              • 0
                                                                Товарищи, а подскажите, я туплю или Blueprint рассчитан на Doctype HTML 4? Это же значит, что им в IE толком нельзя пользоваться, если есть таблицы в контенте — с размером шрифтов намучаешься.
                                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                                • 0
                                                                  Посмотрев этот добрый список, почуствовал просветление… буду знать и пользоваться )
                                                                  • 0
                                                                    Из существенного я бы добавил

                                                                    OOCSS — CSS-фреймворк для «объектно ориентированного» CSS. По духу чем-то напоминает вёрстку независимыми блоками, позволяет красиво организовать front-end архитектуру, особенно полезен для больших проектов.

                                                                    Для работы со шрифтами сегодня как раз наткнулся на чудесный сервис Kernest, предлгающий шрифты (как платные, так и бесплатные) для вставки через @font-face. Удобный функционал по сравниванию шрифтов, жаль только, их нельзя посмотреть все сразу, только по категориям, но категорий, с другой стороны, там множество — по тэгам, по типу лицензии, по автору и т.д.

                                                                    В категории «анализ и отладка» не хватает MODIv2 — кроссбраузерной библиотеки, доступной через букмарклет, которая позволяет при помощи клавиатуры творить с DOMом всё что заблагорассудится. Менять стили на лету напрямую он не позволяет, только через атрибут style, но для того, чтобы отловить баги, его бывает более чем достаточно. Документация только на английском, но она простая :)

                                                                    В тему спрайтов, хоть это и не совсем про CSS, хотелось бы добавить punypng — милый, но мощный сервис для сжатия png. Подробнее про него (на русском) — тут.

                                                                    Ещё большая (во многом пересекающаяся с этой) подборка инструментов для расширения возможностей CSS (а ля переменные, вложенные селекторы и т. п.) была опубликована недавно на SM.
                                                                    • 0
                                                                      не упомянут CSS Tidy ( csstidy.sourceforge.net/ ) — библиотека для форматирования и минимизации CSS-кода
                                                                      + можно упомянуть про Auto Sprites ( sprites.in/ ) — инструмент для полностью автоматического создания спрайтов
                                                                      + SpriteMe ( spriteme.org ) — также инструмент для автоматических спрайтов, только работает на стороне пользователя.
                                                                      + Minify ( code.google.com/p/minify/ ) — автоматическое объединение файлов стилей
                                                                      + Web Optimizer ( code.google.com/p/web-optimizator/ ) — автоматическая клиентская оптимизация

                                                                      Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.