CSS Sprites: все, что вы знали, но боялись спросить

[@niksite]

Спасибо за обзор. Сам я впервые с этой техникой столкнулся, анализируя код digg`а. Весьма удобно, да.

[@gigimon]

да, поддерживаю. Большое спасибо! прояснил некоторые вещи ;) Извините, карму добавить не могу :(
/me пошел переделывать верстку.

[@zencd]

вообще, эта технология - изврат по сравнению с тегом IMG

к тому же существует опция в HTTP, позволяющая объединять несколько запросов в одном

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

[@snow_wons]

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

[@zencd]

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

мне видится, правильнее было бы ненавязчиво проинструктировать браузер о том что серию картинок можно загрузить одним блоком (внутри одной коннекции), и всё потом сделать "по-тихому", через TCP/IP с HTTPой

[@zencd]

Ну неужели нельзя добиться того же эффекта ... если, положим, все ссылки с одной страницы грузить в рамках одного соединения с сервером?! Хотя, возможно это и неэффективно - но тогда можно по 20 запрсов объединять. С другой стороны, что-то здесь не так, иначе давно бы уже решение было :-)

[@snow_wons]

Может быть потому что это от сервера сильно зависит?
Решение со спрайтами никакой настройки сервера не требует, и будет работать на любом хостинге.

[@3MEu]

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

[@lusever]

Это что за опция?

[@zencd]

Persistent Connections

Prior to persistent connections, a separate TCP connection was established to fetch each URL, increasing the load on HTTP servers and causing congestion on the Internet. The use of inline images and other associated data often require a client to make multiple requests of the same server in a short amount of time. Analysis of these performance problems and results from a prototype implementation are available. Implementation experience and measurements of actual HTTP/1.1 (RFC 2068) implementations show good results.

http://www.w3.org/Protocols/rfc2616/rfc2…

[@lusever]

Это где-то используется? И кем-то поддерживается?

[@webmechanics]

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

[@frst]

исходя из идеологии w3c, тег img предназначен для разметки изображений
спрайты же используются для хранения оформительских штук, тоесть не контента, поэтому должны быть вынесены из html в css

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

[@printf]

Не лишним будет также упомянуть, что существуют утилиты, позволяющие генерировать простые карты CSS sprites не отходя от браузера. Вот эта хотя бы.

[@printf]

Сорри, до конца не дочитал, сам дурак.

[@diagn0z]

С ІЕ (и вообще совместимостью) порядок?

[@absolvo]

Всё нормально там.

[@rold]

Проблема только с прозрачностью PNG спрайтов в IE6.
Фильтром не решается из-за отсутствия у него background-position.

[@absolvo]

Вы правы, я позабыл. Никогда не юзал PNG с прозрачностью для sprites.

[@absolvo]

Метода известна, но за обзор спасибо.

[@3MEu]

Присоединяюсь :)
Иногда такие вещи надо вспоминать, потому что забываются, и очень зря!

[@Spunk]

Не знал. Спасибо, пригодится.

[@artyfarty]

надо же, не знал. Спасибо, очень интересно. И обзор helpful.

[@ganzer]

в IE6 часть неработает, часть сильно мигает. в Опере и FF все ок.

[@mustangostang]

чтобы не мигало, нужно настроить на картинках заголовок Expires на пару лет вперед ;-)

[@lahmatiy]

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

[@sunnybear]

в статье этот пример упоминается (на счет мигания)
http://wellstyled.com/files/css-nopreloa…
посмотрите его

[@geospot]

Спасибо, весьма грамотная статья.

[@wixus]

ещё надо учесть, что в IE не работает конструкция из вложенных в a:hover элементов

[@tapazukk]

для больного брата есть костыли. Но можно ему и так поковылять, в основном rollover только для кликабельных-ссылкоподобных элементов применяется.

[@slavik]

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

никаких вложенных элементов.

я делал - ссылка-блок с фиксированными размерами, text-indent - чтобы текст ссылки остался, но не был виден, фон - картинкой с position - top при наведении - center, при переходе на пункт - ссылка становится >b< с тем же фоном background-position:bottom

background(url(i/1.jpg) no-repeat top center) и т.п.

[@sunnybear]

мне кажется, стоило попробовать фиксированный background-position, а не center.

[@Smerig]

а как мне самое вкусное съесть?

[@MOVe]

Использую данный метод во всех своих разработках. Но!

Очень мешает отсутствие background-position-x: и background-position-y: которые присутствуют только в IE. С этими свойствами можно описать сложную карту при помощи 3 строк, в противном случае нужно писать стили для каждого элемента. Для закладок это ещё куда ни шло, а когда элементов становится достаточно много, например, более 50 и вы планируете использовать не фиксированный размер иконок (более того, не фиксированное их количество), а меняющийся в зависимости от настроек (в котором разная ширина полей изображений), то такое использование становится проблематичным.

Только по этой причине пришлось использовать всё тот же JS, о чём жалею.

[@lusever]

Генирируйте карту на сервере

[@MOVe]

С этим хорошо справляется JS. Но даже генерация на сервере мне кажется менее разумным, чем добавление в CSS свойств: background-position-x и y.
Согласен, выход всегда можно найти. Тут скорее речь об удобстве.

[@shafto]

Никогда не мог понять любовь дизайнеров к onmouseover, всегда решая проблему ролловеров через css. Отличная статья, thx).

[@aratak]

респект! Отличная статья.
Вроде ничего криминального, но все собрано в одну кучу, и обосновано. Спасибо.

[@k0t_igrun]

отличная статья...
спасибо

[@skifs]

очень к месту пришлась, спасибо! Как раз сейчас осваиваю этот метод

[@olegi]

Может ретро, но ещё в 2005 году было написано — http://www.artlebedev.ru/tools/technogre…

[@Proxmiff]

И мне сразу вспомнилось :)

[@sunnybear]

написано-то написано, только почти никто нигде не использует. В основном, из-за того, что не знают, что так вообще можно, и в частности, из-за того, что не знают, КАК это можно сделать.

[@olegi]

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

[@Mourner]

Вообще-то еще в 2004 - http://www.alistapart.com/articles/sprit…

[@varyen]

Совершенно логично.
Меньше обращений к серверу, меньше задержек.

[@Glook]

не знаю... я почему-то не очень этот приём пользую... скорее всего мне просто лень с фотошопом возиться, копируя-вставляя-склеивая кнопки. чтобы не было задержек при rollover делаю просто
a {background: url('i/button-hover.jpg'; background: url('i/button.jpg'; )
a:hover {background: url( background: url('i/button-hover.jpg'; )
и никаких задержек и интерактивность наглядная - мигнут кнопки при загрузке, показывая бестолковому юзеру, что туда можно ткнуть мышкой.

[@sr_perm]

Почитал комментариии. ИНогда я радуюсь, что мои сайты всё же чем-то да лучше чем у других =)

[@4g3n7]

Давно использую эту технику, и даже статью сейчас пишу по CSS, и там эта техника упоминается...

[@Sabiko]

Первый раз напоролась, разглядывая эппловское меню на сайте. Сначала была в ахуе, потом прониклась)
Спасибо за обзор, один из самых интересных и увлекательных %) матералов на хабре за последнее время.

[@boom]

эх ... усложняется веб разработка :/
кому это разбирать? я - программист :) а у верстальщика не хватит мозгов такое осознать и пользоваться :)

[@soider]

Хех, у нас обычно наоборот — у программиста не хватает мозгов, а точней банального запаса знаний, осознать что я там с ксс наверстал и почему не таблицами %)

[@ego_generation]

посидел над меню Apple.
В конце концов разобрался, сделал аналог.
Может пригодиться.

[@bruha]

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

[@sunnybear]

для начала стоит определиться, зачем эта самая accessibility нужна.

Если дать пользователю понять, что на этом месте какая-то картина, которая несет смысловую нагрузку, — то ее и нужно делать картинкой. Если же это другой функциональный элемент (например, ссылка меню или кнопка отправки формы), то при отключенных картинках он должен выглядеть максимально к этому приближенно. Обычно для этого используют title'ы.

В общем, при отключенных картинках пользователь должен понимать, что он на этой странице делает :)

[@bruha]

решил путем добавления пустого img внутрь :