CSS Sprites 2: время Javascript

[arestov]

Есть более удачная альтернатива CSS spites- кроссбраузерный data: url
habrahabr.ru/blogs/client_side_optimization/28177/

[Neophyte]

CSS Sprites 2 примерно так же относится к CSS Sprites, как Pixel Perfect — к Firebug…

[arestov]

для чего вы используете CSS Sprites?

[Neophyte]

Если вы про эту статью, то использую не я, а Dave Shea. И, к тому же, в этой статье достаточно подробно написано, для чего именно используется CSS Sprites. Надеюсь вы её прочитали…

Что касается меня, использовал эту технику на одном сайте для кастомизации тем.

[arestov]

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

[Neophyte]

В данном случае CSS Sprites применяется для обеспечения работы меню при отключенном Javascript.

[arestov]

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

[Neophyte]

Я конечно понимаю, что у вас нет времени, чтобы нормально прочитать всю статью, походить по ссылкам, которых там предостаточно. Но у меня сейчас тоже не очень много времени, я 7 часов потратил на перевод. Так что, гугл вам в помощь… или возвращайтесь позже, перечитайте внимательнее.

[arestov]

то есть вы признаёте что css sprites здесь вообще не нужен, потому что могу спокойно вместо этого:

.nav .home a: hover, .nav .home a: focus {
background: url(../i/blue-nav.gif) no-repeat -23px -49px;
}

.nav .home a: active {
background: url(../i/blue-nav.gif) no-repeat -23px -98px;
}

написать это:

.nav .home a: hover, .nav .home a: focus {
background: url(../i/blue-focus.gif) no-repeat 50% 50%;
}

.nav .home a: active {
background: url(../i/blue-active.gif) no-repeat 50% 50%;
}

и что css sprites это прошлый век, камень в огород верстальщика, и надо использовать data: url?

[Neophyte]

Да, безусловно вы во всем правы, и где вы только раньше были…

З.Ы. Обязательно пошлите Dave Shea (Дейву Ши) письмо о своих наблюдениях!

[arestov]

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

[Neophyte]

Обязательно переведу… как-нибудь в следующем веке. Напомните только, ок?

[reinventer]

я так понимаю дело в том, что картинка ../i/blue-nav.gif будет уже загружена, а картинка ../i/blue-active.gif загрузится только при наведении на объект курсора.
И еще делать два запроса к серверу или один — есть разница

[arestov]

совершенно верно, но чем спрайты лучше data: url?

[arestov]

возразить не можете- минусуете?

[Neophyte]

Уважаемый arestov, это не самостоятельная статья, это перевод статьи с сайта alistapart.com. Автор той статьи решил использовать технику CSS Sprites. Он забыл спросить у меня, не спросил он и у вас.

data: url конечно лучше, с этим никто не спорит, но спрайт — слаще… Так что выбирайте сами, что использовать.

Да, и гугл находится по адресу google.com

[arestov]

к сожалению ничем не слаще

[reinventer]

в вашем примере приведено две картинки, соответственно 2 запроса к серверу вместо одного, что для высоконагруженных серверов является роскошью

[Neophyte]

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

[sunnybear]

Разработчики Яндекса так не думают. И я с ними солидарен

[arestov]

в моём примере 1 css файл. всего 1.
поддержка позиционирования как хочешь (background-position) и соответсвенно никаких рисков с заползанием куда не надо
а у вас?

[reinventer]

Ну в этом примере все замечательно, но поддерживать css с url data сложнее, и добавляет лишнего кода в css, если в нескольких разных элементах нужна одна и та же картинка. Во всем нужен разумный компромисс.

Во всяком случае, когда в дизайне сайта встречается сотня разнообразных графических элементов, то это повод задуматься, а уж использовать sprite или все вставлять в один css с url data это на вкус разработчика.

[arestov]

gzip успешно сжимает пофторяющиеся куски.об этом было написано

[Alinaki]

Проще, быстрее, надежнее. И для высоконагруженных серваков надо считать не «1 картинка, 2 картинки» и прирост количества запросов процентов на 30, если элементов много.

[arestov]

м.. тут ктонибудь вообще в курсе того о чём говорит?

[Alinaki]

Да просто понять хотим: ну какого хрена вы НАВЯЗЫВАЕТЕ свое? Ваш пример хорош. Но что-то в нем настораживает.

[arestov]

до сих пор я так и не получил ответа чем спрайты лучше. его я и добиваюсь

а собралась тут стадо баранов которые плюют во все инновационное как в новый логотип яндекса и даже не могут объяснить почему старый лучше

[Alinaki]

Это инновационное имеет столько «но», что…

[DmitryBaranovskiy]

Пока explorer не будет этого поддерживать я не буду этого применять. Невыгодно. Плюс, увеличивая размер CSS вы увеличиваете вероятность того, что он не загрузится и клиент увидит нестилизированную страницу.
Пока что спрайты более отказоустойчивая техника.

[sunnybear]

видимо, мысль оказалась недостаточно понятна: сейчас data: URL является реальной альтернативой для CSS Sprites. Со своими плюсами и минусами (уже статьи 3-4 на эту тему на Хабре было). arestov попытался сделать акцент именно на это. Т.е. автор заметки, скорее всего, не имеет представления об использовании последней техники (либо усиленно замалчивает свое знание).

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

[Neophyte]

Уважаемый sunnybear, я уже упоминал здесь, что моя статья всего лишь перевод. Причем перевод статьи не о том, как оптимизировать что-то, и называется она в оригинале «CSS Sprites2 — It's Javascript Time», а не, например, «CSS Sprites2 — It's Optimization Time». Большая её часть посвящена реализации техники с помощью jQuery, и автор статьи не настаивает на использовании именно этой JS-библиотеки. А CSS Sprites идет как backend, ему посвящены всего несколько абзацев. Ничто не мешает использовать вместо него data: url в данном случае.

Согласитесь, было бы нехорошо, если бы, например, обсуждения статей о реализации чего-либо на PHP, начинались с коммента «Есть более удачная альтернатива PHP — Python» или «В Ruby on Rails это реализуется парой строк». Начало обсуждения статьи было, на мой взгляд, из той же серии. arestov начал обсуждение именно с какого-то утверждения, приведя в доказательство ссылку на вашу статью. Но он, во-первых, по сути не прочитал мой топик (!!) (если бы он прочитал, то не задал бы некоторых своих вопросов), во-вторых, не понял, что это перевод (и я не автор), и, в-третьих, стал ждать того, что я ему буду что-то объяснять по статье, хотя в ней очень подробно все расписано. Говорить о том, что чувствуешь, только что потратив солидное время на перевод, общаясь с человеком, нормально не прочитавшим статью и задающим вопросы имеющие довольно отдаленное отношение к её сути, думаю не стоит. Но мы с ним уже закрыли этот вопрос в личной переписке.

Оптимизация — это огромная тема (в которой вы очень хорошо разбираетесь, судя по профайлу). Я не занимаюсь вопросами оптимизации, но в той фирме, где я работаю, естественно затрагиваются эти вопросы. У нас, почему-то, бОльшую прибавку в скорости дают оптимизации на сервере, запросов к базе данных и программного кода (Ruby). Разница в скорости по сравнению с неоптимизированным кодом получаются чуть ли не на порядок, и этого вполне хватает. До вопросов оптимизации картинок, Javascript и СSS мы почти никогда не добирались, может из-за того, что не было крупных проектов.

[vovanbo]

Отличная статья, но странно видеть типографские кавычки («, ») в коде. =)

[Neophyte]

Спасибо, постараюсь исправить кавычки. У меня были небольшие проблемы с форматированием кода, особенно с расставлением отступов.

[Neophyte]

Исправил

[vovanbo]

Спасибо!

[Massive]

Много минусов. Пора плюсовать.

[silverwind]

Да тут плюсуй не плюсуй, все никак не выходит вытянуть в «+»… :-(

[maxshopen]

Итоговая функция конечно врядли кому пригодиться, но общие подходы расписаны неплохо.
Отдельное спасибо за решение бага с мерцанием (opacity 0.9999)

[bobrob]

Размер шрифта не масштабируестя(одна из причин не использовать sprites)… А это большой пропуск в юзабилити — так делать не надо! В общем… работа новичка-непрофесионалла :)

[Neophyte]

Чтобы все отлично масштабировалось, нужно вообще отказаться от графического текста на сайте.

А то, что на alistapart.com печатают новичков-непрофессионалов — это фраза дня… :)

[bobrob]

nobody's perfect… alistapart.com too :)

[mocksoul]

не масштабируется-ли? ) опера, ff — никаких проблем. Сафари и IE — не работает. Так или иначе но в IE это тоже будет. Потом +)

[bobrob]

правда никаких проблем… у 50% процентов пользователей интернета IE… никаких проблем!

[Aux]

Я несколько лет назад сделал клон Battle City на JS+CSS… Где он сейчас — не знаю, надо будет поискать.

[croatian]

Все понравилось, статья хорошая. Только в пятом примере, если быстро нажать на кнопку и убрать курсор, то кнопка остается со стилем, как при наведении.

Использовал FireFox 3.0, IE 6.0, Opera 9.23, Google Chrome =))

[amduscias]

Отличная статейка. Очень понравилось. Можно было б наверное даже jQuery-плагин оформить, вдруг пригодится ;-)