Data:URI CSS Sprites — современный подход к генерации CSS спрайтов

[maxshopen]

Название оптимистичное, подняли настроение, спасибо :)
Веселей был бы только «DURIC» (его тоже можно из заданных слов составить), особенно для славянского народа.

А когда ожидается RC? — я бы с удовольствием попробовал интегрировать

[sirus]

тяжело сказать точно когда будет RC, месяц-два.
попробывать в своих проектах можно и сейчас, все что необходимо генерируется автоматически. вы сможете оценить насколько это для вас луше/хуже.

[leMar]

Уж очень много гемороя с этими data:urii

[sirus]

поэтому и сделали автоматическую генерацию

[zencd]

Что-то я не понимаю в чём польза от конкретно такой автоматизации:
— зарядил я туда урл site.ru/
— получил index.html и addon.css

И что мне с ними делать? Положить на сайт? Ну так у меня там динамический скрипт, а получил я, хоть и оптимизированный, но статичный слепок.

Т. е., получается, этот tool годится только для статичных сайтов. Ы?

[zencd]

мдя… предпочитаю конструктивную критику

[ainu]

Получился сверстанный слепок. Сверстанный слепок всегда статичен, таким, кстати, его делают верстальщики, и уже потом он прикручивается к какой-нибудь CMS.

[zencd]

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

но в качестве презентации технологии/возможностей — вполне

[sirus]

сам сайт duris.ru динамический, и как видите в него нормально интегрирована технология.
tool годится как для динамических так и для статических сайтов. вам предоставляется примерный код как это должно быть, что куда вставлять, а в динамику вы уже сами ручками вставляйте в нужные места.

[sunnybear]

textarea с кодом добавления CSS-правил в toDo уже :)

[sirus]

там уже есть textarea, возле download кнопочка show code

[sunnybear]

сорри, не успеваю за всеми обновлениями следить :)

[Wonder]

> 7) другое.

Убило )
Хорошая задумка, интересно будет следить ра завитием.
И даже, возможно, пользоваться в будущем.

[sirus]

>> 7) другое.
>Убило )

чегото еще было, просто из головы вылетело :)

[crocodile2u]

Задумка, действительно, стоящая. К сожалению, пока нет впечатлений от использования в реальной жизни (и не разработчиками, а сторонними пользователями). Ждем-с.

[sirus]

да, конечно, пока нету, хабра-люди это первые люди кто узнал об этом, посмотрим что дальше будет.

[zencd]

Мне видится такая автоматизация:

После того как обновили сайт (css'ы или картинки), запускаем на хостинге скрипт навроде этого:

duris_rebuild_all($htdocs, $css_files, $joined_css_file) {
// Сканируем каждый из $css_files на предмет нахождения кандидатов в data:uri.
// Попутно заменяем ссылки-на-файлы на data:uri.
// Сводный файл копируем в $joined_css_file.
}
duris_rebuild_all("/www", array("/main.css", "/sec.css"), "/joined.css");

А в шапку вставляем:

<link rel="stylesheet" type="text/css" href="/joined.css" />
< !-- ну и джаваскрипт, и всё остальное -- >

Засада в том что надо будет не забывать запускать этот скрипт на хостинге, но может в CVS/SVN есть тулзы для такой автоматизации (делать нечто по апдейту).

Джаву запускать не на всеъ хостингах возможно, но если сайту требуется такая оптимизация, то наверное это решаемо :-)

[kvf77]

Хуками они называются.

[sirus]

честно пока о интеграции вплотную не думали, но это на самом деле не проблема. обязательно сделаем удобно.
думаю будет так как реализован сам сайт: duris.ru и duris.ru/?dev=1 — т.е. на выходе будет боевая версия и версия для разработки

[DmitryBaranovskiy]

Побольше английского описания, подалуйста. Что бы коллегам показать.

[sirus]

эээ, мне помощь нужна в этом вопросе…

[sunnybear]

я скину английский FAQ/Examples на днях

[kvf77]

А в эксплорере 7 насмерть не работает? У меня ничего не показывает — всё пусто, что получается держать два комплекта что ли?

[egrik]

Да, держвать 2 комплекта. В вашем случае изображения будут загружаться, как раньше.

[sirus]

как не показывает? сайт duris.ru в ИЕ7 показывает? он сам является примером применения технологии

[kvf77]

не показывает, они для ИЕ видать выводят обычным способом

[kvf77]

гм, не увидел, что вы автор топика. просто у меня ваш пример из файла открылся нормально везде кроме 7 ИЕ

[sirus]

пример из файла? вы на ИЕ7 ХР? почитайте внимательно фаг. Если вы запускаете копию сайта лебедева, для нормального отображения в ИЕ, вам надо залить все на домен artlebedev.ru. Посмотрите в исходный код
addon.ie.css.js там везде абсолютные урлы mhtml:http://www.artlebedev.ru/;-)/svalka/addon.ie.css.js!1

[kvf77]

я свой сайтик смотрел, сори, до фака не добрался

[sirus]

> всё пусто, что получается держать два комплекта что ли?
конечно исходные изображения удалять ненадо :)

[chessk]

Первой строкой после генерации идет

а причем тут собствено ФП?

[chessk]

Извиняюсь, не вставилось

[chessk]

meta name=«GENERATOR» content=«Microsoft FrontPage 1.0»

[sirus]

что с сайта приходит, то и выдается

[chessk]

эмм… артлебедев пользуется FrontPage при создании сайтов???
выдалось именно на примере лебедевского сайта

[sirus]

прочитай что написано внизу страницы в исходном коде :)

[chessk]

все, понял, был неправ:)
в армии идиотов +1)

[crwin]

пока что-то стрёмно проверять в боевых условиях. не плохо бы на реализацию подобного взглянуть, и не ровен час высыпания ещё каких-нибудь ошибок и подводных камней.
в остальном верной дорогой идёте, товарисчи! :)

[sirus]

duris.ru это и есть пример реализации, гляньте в исходный код
а если зайти так duris.ru/?dev=1 — тогда видно то что изначально было, без применения DURIS

в боевых условиях проверять ненадо :), у вас ведь наверно есть рабочая версия? ну или тестовая площадка? там и проверяйте

[sunnybear]

webo.in, webo.name — примеры реализации
баз с IE7 Vista пока на них не пофикшен.

[rdk]

У вас в FAQе: «Предназначен автоматизировать процесс». Думаю, все же «предназначен, чтобы…» (:

[sunnybear]

о, черт, па-русски писать савсэм разучилсо :)

[Aux]

data uri для сайтов редко полезны, лучше компилять картинки в одну — тогда работать с ними будет проще. а данный подход полезен для всяких виджетов и букмарклетов. собстно так я дата ури использовал ещё лет пять назад.

[sirus]

> data uri для сайтов редко полезны, лучше компилять картинки в одну
вы наверно большой специалист в этом вопросе? особенно в умении собрать все картинки разных размеров и разного позиционирования в одну итоговую, ну хоть поделитесь опытом с нами.

[Aux]

Необязательно всё собирать в одну картинку. Главное — не зацикливаться на чём-то одном, а использовать разные технологии и техники по мере нужды.

Я не говорю, что ваша штука есть фигня. О нет, очень даже интересная штука! И полезная. Но сайты далеко не всегда вписываются в подобную концепцию.

[sirus]

если внимательно изучить как построен сам сайт duris.ru, то можно увидеть что у нас применяется смесь технологий — мелкие картинки запакованы в data:uri, а большие (лого, фото) подключаются обычным способом с применением привычных CSS спрайтов. Соответственно мы применяем разные технологии. И вам того же советую. Кстати в faq это описано.
Вы разработчик и вы решаете что лучше вам применять по мере нужды. Мы даем вам еще одну технологию, в общий набор. Т.е. арсенал инструментов увеличивается. Видели сколько инструментов у зубного врача? Представьте если бы он работал только одним каким то инструментом, вы бы тогда сами лечили себе зубы. В противовес существуют современные стоматологические кабинеты, в которых очень большой набор очень хороших инструментов. Аналог можно провести и в веб-разработке.

[Garrett]

data:uri в windows используется в msc шаблонах с первого их появления =) (microsoft management console)

Так же удобно использовать для файлов ошибок http т.к. часто там не удобно использовать прямые линки на изображения, а не прямые будут не везде отображаться (IIS)

[y0ga]

> На сегодняшний день мы имеем стабильную бета версию

Абсурд!

[sirus]

ух как исчерпывающе вы высказались!, круче было бы иконку влепить какую-то или просто смайл ляпнуть, максимальная оптимизация речи :).

[y0ga]

зачем обзывать версию бетой, если продукт работает стабильно?

[sirus]

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

[Garrett]

По теме data:uri
отличная онлайн утилита The data: URI kitchen
software.hixie.ch/utilities/cgi/data/data

[sirus]

вот еще одна www.scalora.org/projects/uriencoder/

[Garrett]

А ещё вместо всего этого можно использовать svg+xml
жалко только что браузеры очень неохотно поддерживают этот формат =\

[Garrett]

Извеняюсь, забыл суть дискуссии, svg только для отрисовывания годиться =)

[Delka]

вот это вы молодцы!

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

[Delka]

2-ой багрепорт: игнорируются СС-стили для IE.

[sirus]

да условные комментарии для ИЕ игнорируются, даже и не знаю стоит ли их обрабатывать

[Delka]

обрабатывать наверно не стоит, а вот просто скопировать в папку с выходящим css думаю нужно

[sirus]

вам еще плюс :)
по вашей инициативе уже доработано media, + сделаю копирование стилей в условных комментариях для ИЕ

[sirus]

это вариант, учтем, спасибо!

[Delka]

вопрос: а почему data-uri кодированная графика для IE хранится в отдельном файле, а не включается в общий css, как в вашей статье webo.in/articles/habrahabr/46-cross-browser-data-url/?

[sirus]

1) чтобы отделить графику от стилей
2) что бы нормальные браузеры не качали то что надо ИЕ, и наоборот, если совместить css для нормальных браузеров и ИЕ — получится больше размер загружаемого файла и ктото (браузер) будет грузить то что ему вообще не надо, а так все четко.

[Delka]

не, это понятно, я чуть другое спрашиваю — почему mhtml-background для ie подключать через js, а не через conditional comments для IE?

[Delka]

блин не туда ответил, и вообще не то, не спал всю ночь, сорри.

[Kudrik]

По-моему офигительная тулза:
Верстаешь себе по-нормальному в css не заморачиваешься со спрайтами, а после генерации на выходе получаешь:
1. Оптимизация запросов к серверу (адын «тэкставы» спрайт)
2. Минимизация кода и GZипование
3. Никаких проблем с кэшированием.

Ахринительно — дайте две =)

[sirus]

верно! верстаешь себе по нормальному, нажимаешь кнопочку — получаешь оптимизированную версию.

[sunnybear]

да, собственно, ради этого и трудились :)

[Kudrik]

Есть много вопросов по поводу вашей дальнейшей работы над проектом — можно будет на конференции поприставать?

[sunnybear]

наверное, даже нужно :)

[Delka]

а почему mhtml задётся через js, а не в ie-css?

[sirus]

ИЕ останавливает рендеринг страницы (она как бы замерзает) пока ИЕ докачивает файл стилей (addon) с background-image если подключать через <link>, поэтому изначально мы подключаем динамически через скрипт — это устраняетcя замерзание, ну а если скрипты запрещены — тогда уже через <link>

[Delka]

ага, понял, спасибо!

[sirus]

ниже еще ответ

[sirus]

> не, это понятно, я чуть другое спрашиваю — почему mhtml-background для ie подключать через js, а не через conditional comments для IE?

гляньте внимательнее, подключается через conditional comments

[sirus]

обрезало ответ, продолжаю —

а в conditional comments идет разделение с ЖС и без ЖС
если нету ЖС = мы не можем определить ОС, соответственно можем нарваться на Vista IE, поэтому если нет ЖС подключаем сразу стиль со стандартными background-image

[Delka]

всего-лишь 37↑ расстраивают(

[sirus]

да ну, просто плюсуют только те кто шарит :), реально народу понравилось, и уже активно юзают

[DjOnline]

base64 увеличивает размер на 30%, разве не так?

[sirus]

так, но при использовании base64 + gzip размеры практически идентичны