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

[Mel]

Спасибо, нашел для себя много полезного, хоть с css приходится работать не так часто.

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

[almarz]

Спасибо, нашел для себя много полезного...

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

Так вот кто мои блоги спамит! :)

[Mel]

Простите, вы о чем?

[mad_s]

сейчас один из любимейших камментсов, с которыми заходят русскоязычные спам-боты на платформе Wordpress это именно "Спасибо, нашел для себя много полезного" :)

[dohlik]

«Около 3х лет вплотную работаю над этой проблемой и нахожу ваши идеи немного легкомысленными»

:)

[Mel]

Я бы сказал бывают в жизни веселые случайности, если бы кто-то в карму не плюнул :)

[Ferroman]

Боты на хабре? Нет пути.

[dotzero]

А где ссылка на первоисточник? www.w3avenue.com

[Aldarund]

А ведь всего лишь стоит обратить внимание, что оформлено как перевод. Соответственно и ссылка есть там, где ей положено быть. :)

[dotzero]

да точно, с 5-го прокрута туда-сюда нашел.

[ilyaProphet]

Можно еще добавить:

Формы
JotForm
FormDesk
Цвет — Adobe Kuler
Создание меню — IzzyMenu.com

[Palanteer]

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

[Kudja]

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

[biduin]

Супер!
Однозначно в закладках.

[Gargool]

Добавьте csstemplater.com

[Aldarund]

Спасибо, добавил.

[neurostep]

Спасибо за работу, очень здорово!!! С радостью бы плюсанул, но не могу! =)

[piumosso]

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

[XaBoK]

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

[mongoose]

Советую попробовать FastStone Capture

[Jman]

Линейка есть и в Web Developer, может немного хуже, но зачем лишние плагины?

Странно что про этот плагин (Web Developer) не сказано ни слова, а ещё никто не вспомнил о ColorZilla.

[XaBoK]

Мне Web Developer не нужен, а в Firebug линейки нет. А что уж до ColorZilla, то смотри раздел Цвет…

[creatonio]

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

[N1k1t0ZzZ]

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

[butschster]

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

[lifestyle]

или лучше загружаешь .psd, а на выходе чистый, семантичный, кроссбраузерный шаблон:))

[Aldarund]

Так есть такие сервисы, множество. Например free-lance.ru, rentacoder.com и т.д:))

[sl_bug]

но качество работы данных сервисов не всегда устраивает, приходится загружать .psd заново :)

[Shchvova]

да пожалуйста psd2cssonline.com

[olegkrasnov]

Вротмненоги, сколько вкусного. Забукмарчил.

[DIDJER]

А кто такие разработчики CSS? что разрабатывают на ЯЗЫКЕ CSS, а CSS производительный язык?

[BassEast]

я бы их назвал CSS-дизайнеры, нежели разработчики. Но без их работы, можно слабо себе представить web-дизайнерское будущее и настоящее.

[DIDJER]

А почему бы не назвать комплексно — верстальщики?

[BassEast]

это немного разные вещи: css-дизайнеры и верстальщики.

[DIDJER]

И в чём же разница?

[BassEast]

многие программеры почему-то думают, что CSS это какой-то аппендикс и чего с ним возиться… ошибаются, CSS не менее сложная наука, чем к примеру тот же самый Jscript.

[DIDJER]

Но уж точно не разработчики.

[rotorB]

Вотжешьбл*

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

[dohlik]

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

[Aldarund]

Да, было дело :) Там в комментах кто-то попросил перевести, вот я и перевел…

[dvryltsov]

Добавляю в закладки! Спасибо за перевод.

[boblin]

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

[Shchvova]

да, есть ещё странное, типа psd2cssonline.com
на удивление хорошо работает

[Shchvova]

извините, мисклик…

[Aldarund]

Интересно, нада будет поглядеть на досуге. Добавил в список.

[MaxChe]

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

[Aldarund]

Заменил ссылку на обзор таких сервисов на хабре. Там он есть :)

[Shchvova]

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

[Aldarund]

Хм, интересно. Добавил.

[Tbird]

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

[Aldarund]

Спасибо, не знал такого. Добавил.

[karamba]

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

[Aldarund]

Чем-то пользуюсь, чем-то нет. О многих позициях узнал только из этого обзора.
А в чем смысл вопроса?

[karamba]

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

[Wolfherz]

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

[Octane]

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

[DVF]

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

[ionicman]

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

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

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

[katremer]

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

[JN0iZzze]

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

[semper]

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

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

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

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

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

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

[sunnybear]

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