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

Огромное спасибо, действительно список полезностей и вкусностей!

хорошая подборочка — спасибо

Добавьте csstemplater.com

прямо подборка для ленивцев)))

Ещё одним полезным плагином для Firefox — MeasureIt. Как не трудно догадаться — это линейка для замеров в пикселях.
Найти можно здесь: www.kevinfreitas.net/extensions/

Полезно, хотя на практике, крайне редко использую подобные сервисы, но поиграться подобными штуками, люблю:)

Огромное спасибо — хорошее собрание полезных ссылок в одном месте. Думаю, что обязательно пригодится =)

жаль еще не придумали сервис, в котором загружаешь сверстанный шаблон (в любом браузере), а он тебе выдает фиксы для остальных браузеров, чтоб все одинаково выглядело :)

Вотжешьбл*

Пользуюсь только файрбагом.

Блин, дежавю :) Думаю, где я это все видел. А вы неделю назад переводили список для PHP с этого же сайта…

еще хочу посоветовать 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# и куда-то еще

вот еще- spoon.net/browsers
не нашел у Вас в списке.
можно загрузить любой браузер из веб и проверить свой сайт на кроссбраузерность.

есть ещё странное — генерация CSS и шаблона по PSD, правильно оформленному. На удивление хорошо работает, на ютубе есть несколько скринкастов. psd2cssonline.com

А как же YASS разработка хабрапользователя sunnybear? Sizzle года через два до его скорости дойдет.

Вы этим пользуетесь?

Интерес подлинный. Спасибо за ответ.

Большое спасибо за подборку

Есть еще 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.

+ Ещё один фрэймворк css-framework.ru/

Кому нужно — для импорта в закладки замечательного браузера FireFox файлик тут.

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

Пользуйтесь кому нужно :)

Товарищи, а подскажите, я туплю или Blueprint рассчитан на Doctype HTML 4? Это же значит, что им в IE толком нельзя пользоваться, если есть таблицы в контенте — с размером шрифтов намучаешься.

Посмотрев этот добрый список, почуствовал просветление… буду знать и пользоваться )

Из существенного я бы добавил

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

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

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

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

Ещё большая (во многом пересекающаяся с этой) подборка инструментов для расширения возможностей CSS (а ля переменные, вложенные селекторы и т. п.) была опубликована недавно на SM.

не упомянут 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/ ) — автоматическая клиентская оптимизация