Комментарии 46
Есть более удачная альтернатива CSS spites- кроссбраузерный data: url
habrahabr.ru/blogs/client_side_optimization/28177/
habrahabr.ru/blogs/client_side_optimization/28177/
CSS Sprites 2 примерно так же относится к CSS Sprites, как Pixel Perfect — к Firebug…
для чего вы используете CSS Sprites?
Если вы про эту статью, то использую не я, а Dave Shea. И, к тому же, в этой статье достаточно подробно написано, для чего именно используется CSS Sprites. Надеюсь вы её прочитали…
Что касается меня, использовал эту технику на одном сайте для кастомизации тем.
Что касается меня, использовал эту технику на одном сайте для кастомизации тем.
я слышал что они используются для сокращения количества запросов серверу, в статье к сожалению я не нашёл упоминания зачем они используются в данном случае (прочитал бегло), не могли бы вы процитировать?
В данном случае CSS Sprites применяется для обеспечения работы меню при отключенном Javascript.
почему оно не будет работать если это будет не спрайт а разные рисунки?
Я конечно понимаю, что у вас нет времени, чтобы нормально прочитать всю статью, походить по ссылкам, которых там предостаточно. Но у меня сейчас тоже не очень много времени, я 7 часов потратил на перевод. Так что, гугл вам в помощь… или возвращайтесь позже, перечитайте внимательнее.
то есть вы признаёте что css sprites здесь вообще не нужен, потому что могу спокойно вместо этого:
написать это:
и что css sprites это прошлый век, камень в огород верстальщика, и надо использовать data: url?
.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?
Да, безусловно вы во всем правы, и где вы только раньше были…
З.Ы. Обязательно пошлите Dave Shea (Дейву Ши) письмо о своих наблюдениях!
З.Ы. Обязательно пошлите Dave Shea (Дейву Ши) письмо о своих наблюдениях!
раз вы со мной слогласны вы могли бы ему и написать, или даже перевести!
я так понимаю дело в том, что картинка ../i/blue-nav.gif будет уже загружена, а картинка ../i/blue-active.gif загрузится только при наведении на объект курсора.
И еще делать два запроса к серверу или один — есть разница
И еще делать два запроса к серверу или один — есть разница
совершенно верно, но чем спрайты лучше data: url?
возразить не можете- минусуете?
Уважаемый arestov, это не самостоятельная статья, это перевод статьи с сайта alistapart.com. Автор той статьи решил использовать технику CSS Sprites. Он забыл спросить у меня, не спросил он и у вас.
data: url конечно лучше, с этим никто не спорит, но спрайт — слаще… Так что выбирайте сами, что использовать.
Да, и гугл находится по адресу google.com
data: url конечно лучше, с этим никто не спорит, но спрайт — слаще… Так что выбирайте сами, что использовать.
Да, и гугл находится по адресу google.com
в вашем примере приведено две картинки, соответственно 2 запроса к серверу вместо одного, что для высоконагруженных серверов является роскошью
Не думаю, что из-за одной лишней картинки, которую сервер обязательно закэширует, могут возникнуть какие-либо проблемы с нагрузкой. :)
в моём примере 1 css файл. всего 1.
поддержка позиционирования как хочешь (background-position) и соответсвенно никаких рисков с заползанием куда не надо
а у вас?
поддержка позиционирования как хочешь (background-position) и соответсвенно никаких рисков с заползанием куда не надо
а у вас?
Ну в этом примере все замечательно, но поддерживать css с url data сложнее, и добавляет лишнего кода в css, если в нескольких разных элементах нужна одна и та же картинка. Во всем нужен разумный компромисс.
Во всяком случае, когда в дизайне сайта встречается сотня разнообразных графических элементов, то это повод задуматься, а уж использовать sprite или все вставлять в один css с url data это на вкус разработчика.
Во всяком случае, когда в дизайне сайта встречается сотня разнообразных графических элементов, то это повод задуматься, а уж использовать sprite или все вставлять в один css с url data это на вкус разработчика.
Проще, быстрее, надежнее. И для высоконагруженных серваков надо считать не «1 картинка, 2 картинки» и прирост количества запросов процентов на 30, если элементов много.
м.. тут ктонибудь вообще в курсе того о чём говорит?
Да просто понять хотим: ну какого хрена вы НАВЯЗЫВАЕТЕ свое? Ваш пример хорош. Но что-то в нем настораживает.
видимо, мысль оказалась недостаточно понятна: сейчас data: URL является реальной альтернативой для CSS Sprites. Со своими плюсами и минусами (уже статьи 3-4 на эту тему на Хабре было). arestov попытался сделать акцент именно на это. Т.е. автор заметки, скорее всего, не имеет представления об использовании последней техники (либо усиленно замалчивает свое знание).
Хотя, имхо, будущее именно за ней. Ибо технологически реализовывать ее несколько проще, а бонусов чуток больше (минус 1 запрос к серверу). Что и указано в приведенной статье
Хотя, имхо, будущее именно за ней. Ибо технологически реализовывать ее несколько проще, а бонусов чуток больше (минус 1 запрос к серверу). Что и указано в приведенной статье
Уважаемый 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 мы почти никогда не добирались, может из-за того, что не было крупных проектов.
Согласитесь, было бы нехорошо, если бы, например, обсуждения статей о реализации чего-либо на PHP, начинались с коммента «Есть более удачная альтернатива PHP — Python» или «В Ruby on Rails это реализуется парой строк». Начало обсуждения статьи было, на мой взгляд, из той же серии. arestov начал обсуждение именно с какого-то утверждения, приведя в доказательство ссылку на вашу статью. Но он, во-первых, по сути не прочитал мой топик (!!) (если бы он прочитал, то не задал бы некоторых своих вопросов), во-вторых, не понял, что это перевод (и я не автор), и, в-третьих, стал ждать того, что я ему буду что-то объяснять по статье, хотя в ней очень подробно все расписано. Говорить о том, что чувствуешь, только что потратив солидное время на перевод, общаясь с человеком, нормально не прочитавшим статью и задающим вопросы имеющие довольно отдаленное отношение к её сути, думаю не стоит. Но мы с ним уже закрыли этот вопрос в личной переписке.
Оптимизация — это огромная тема (в которой вы очень хорошо разбираетесь, судя по профайлу). Я не занимаюсь вопросами оптимизации, но в той фирме, где я работаю, естественно затрагиваются эти вопросы. У нас, почему-то, бОльшую прибавку в скорости дают оптимизации на сервере, запросов к базе данных и программного кода (Ruby). Разница в скорости по сравнению с неоптимизированным кодом получаются чуть ли не на порядок, и этого вполне хватает. До вопросов оптимизации картинок, Javascript и СSS мы почти никогда не добирались, может из-за того, что не было крупных проектов.
Отличная статья, но странно видеть типографские кавычки («, ») в коде. =)
Много минусов. Пора плюсовать.
Итоговая функция конечно врядли кому пригодиться, но общие подходы расписаны неплохо.
Отдельное спасибо за решение бага с мерцанием (opacity 0.9999)
Отдельное спасибо за решение бага с мерцанием (opacity 0.9999)
Размер шрифта не масштабируестя(одна из причин не использовать sprites)… А это большой пропуск в юзабилити — так делать не надо! В общем… работа новичка-непрофесионалла :)
Чтобы все отлично масштабировалось, нужно вообще отказаться от графического текста на сайте.
А то, что на alistapart.com печатают новичков-непрофессионалов — это фраза дня… :)
А то, что на alistapart.com печатают новичков-непрофессионалов — это фраза дня… :)
не масштабируется-ли? ) опера, ff — никаких проблем. Сафари и IE — не работает. Так или иначе но в IE это тоже будет. Потом +)
Я несколько лет назад сделал клон Battle City на JS+CSS… Где он сейчас — не знаю, надо будет поискать.
Все понравилось, статья хорошая. Только в пятом примере, если быстро нажать на кнопку и убрать курсор, то кнопка остается со стилем, как при наведении.
Использовал FireFox 3.0, IE 6.0, Opera 9.23, Google Chrome =))
Использовал FireFox 3.0, IE 6.0, Opera 9.23, Google Chrome =))
Отличная статейка. Очень понравилось. Можно было б наверное даже jQuery-плагин оформить, вдруг пригодится ;-)
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
CSS Sprites 2: время Javascript