Комментарии 57
Спасибо за обзор. Сам я впервые с этой техникой столкнулся, анализируя код digg`а. Весьма удобно, да.
да, поддерживаю. Большое спасибо! прояснил некоторые вещи ;) Извините, карму добавить не могу :(
/me пошел переделывать верстку.
/me пошел переделывать верстку.
вообще, эта технология - изврат по сравнению с тегом IMG
к тому же существует опция в HTTP, позволяющая объединять несколько запросов в одном
исходя их всего этого интересно было бы узнать кто быстрее (в тестах) и, главное, насколько и почему
к тому же существует опция в HTTP, позволяющая объединять несколько запросов в одном
исходя их всего этого интересно было бы узнать кто быстрее (в тестах) и, главное, насколько и почему
Не так это страшно как кажется. Нужно только помнить где-какая картинка стоит :-)
А выйгрыш в скорости даёт приличный. Особенно в IE. Сотня иконок грузятся около минуты, а карта - несколько секунд.
А выйгрыш в скорости даёт приличный. Особенно в IE. Сотня иконок грузятся около минуты, а карта - несколько секунд.
выигрыш есть, я не сомневаюсь, я о том что путь не слишком "правильный" :-)
мне видится, правильнее было бы ненавязчиво проинструктировать браузер о том что серию картинок можно загрузить одним блоком (внутри одной коннекции), и всё потом сделать "по-тихому", через TCP/IP с HTTPой
мне видится, правильнее было бы ненавязчиво проинструктировать браузер о том что серию картинок можно загрузить одним блоком (внутри одной коннекции), и всё потом сделать "по-тихому", через TCP/IP с HTTPой
Ну неужели нельзя добиться того же эффекта ... если, положим, все ссылки с одной страницы грузить в рамках одного соединения с сервером?! Хотя, возможно это и неэффективно - но тогда можно по 20 запрсов объединять. С другой стороны, что-то здесь не так, иначе давно бы уже решение было :-)
А могли бы вы описать подробно для тех кто это не знает, например для меня, если не сложно? Если немного описывать - можно и в комментариях, если много - то отличный пост может получится, ну а если лень, я лично был бы рад и ссылкам. Спасибо.
Это что за опция?
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…
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…
исходя из идеологии w3c, тег img предназначен для разметки изображений
спрайты же используются для хранения оформительских штук, тоесть не контента, поэтому должны быть вынесены из html в css
ну и в большинстве случаев, лично для меня, спрайты просто более удобны чем набор отдельных картинок, меньше кода - меньше головной боли
спрайты же используются для хранения оформительских штук, тоесть не контента, поэтому должны быть вынесены из html в css
ну и в большинстве случаев, лично для меня, спрайты просто более удобны чем набор отдельных картинок, меньше кода - меньше головной боли
Не лишним будет также упомянуть, что существуют утилиты, позволяющие генерировать простые карты CSS sprites не отходя от браузера. Вот эта хотя бы.
С ІЕ (и вообще совместимостью) порядок?
Метода известна, но за обзор спасибо.
Не знал. Спасибо, пригодится.
надо же, не знал. Спасибо, очень интересно. И обзор helpful.
в IE6 часть неработает, часть сильно мигает. в Опере и FF все ок.
чтобы не мигало, нужно настроить на картинках заголовок Expires на пару лет вперед ;-)
Недавно это уже обсуждали на хабре, конечно костыль, но без вмешательства в заголовки.
в статье этот пример упоминается (на счет мигания)
http://wellstyled.com/files/css-nopreloa…
посмотрите его
http://wellstyled.com/files/css-nopreloa…
посмотрите его
Спасибо, весьма грамотная статья.
ещё надо учесть, что в IE не работает конструкция из вложенных в a:hover элементов
для больного брата есть костыли. Но можно ему и так поковылять, в основном rollover только для кликабельных-ссылкоподобных элементов применяется.
самостоятельно когда то пытался сделать, получился только вертикальный набор, на горизонтальном в ие черт знает что - при наведении какой-то непонятный эффект - картинки убегали влево, причем на разное расстояние 8).
никаких вложенных элементов.
я делал - ссылка-блок с фиксированными размерами, text-indent - чтобы текст ссылки остался, но не был виден, фон - картинкой с position - top при наведении - center, при переходе на пункт - ссылка становится >b< с тем же фоном background-position:bottom
background(url(i/1.jpg) no-repeat top center) и т.п.
никаких вложенных элементов.
я делал - ссылка-блок с фиксированными размерами, text-indent - чтобы текст ссылки остался, но не был виден, фон - картинкой с position - top при наведении - center, при переходе на пункт - ссылка становится >b< с тем же фоном background-position:bottom
background(url(i/1.jpg) no-repeat top center) и т.п.
а как мне самое вкусное съесть?
Использую данный метод во всех своих разработках. Но!
Очень мешает отсутствие background-position-x: и background-position-y: которые присутствуют только в IE. С этими свойствами можно описать сложную карту при помощи 3 строк, в противном случае нужно писать стили для каждого элемента. Для закладок это ещё куда ни шло, а когда элементов становится достаточно много, например, более 50 и вы планируете использовать не фиксированный размер иконок (более того, не фиксированное их количество), а меняющийся в зависимости от настроек (в котором разная ширина полей изображений), то такое использование становится проблематичным.
Только по этой причине пришлось использовать всё тот же JS, о чём жалею.
Очень мешает отсутствие background-position-x: и background-position-y: которые присутствуют только в IE. С этими свойствами можно описать сложную карту при помощи 3 строк, в противном случае нужно писать стили для каждого элемента. Для закладок это ещё куда ни шло, а когда элементов становится достаточно много, например, более 50 и вы планируете использовать не фиксированный размер иконок (более того, не фиксированное их количество), а меняющийся в зависимости от настроек (в котором разная ширина полей изображений), то такое использование становится проблематичным.
Только по этой причине пришлось использовать всё тот же JS, о чём жалею.
Никогда не мог понять любовь дизайнеров к onmouseover, всегда решая проблему ролловеров через css. Отличная статья, thx).
респект! Отличная статья.
Вроде ничего криминального, но все собрано в одну кучу, и обосновано. Спасибо.
Вроде ничего криминального, но все собрано в одну кучу, и обосновано. Спасибо.
отличная статья...
спасибо
спасибо
очень к месту пришлась, спасибо! Как раз сейчас осваиваю этот метод
Может ретро, но ещё в 2005 году было написано http://www.artlebedev.ru/tools/technogre…
И мне сразу вспомнилось :)
написано-то написано, только почти никто нигде не использует. В основном, из-за того, что не знают, что так вообще можно, и в частности, из-за того, что не знают, КАК это можно сделать.
Вообще-то еще в 2004 - http://www.alistapart.com/articles/sprit…
Совершенно логично.
Меньше обращений к серверу, меньше задержек.
Меньше обращений к серверу, меньше задержек.
не знаю... я почему-то не очень этот приём пользую... скорее всего мне просто лень с фотошопом возиться, копируя-вставляя-склеивая кнопки. чтобы не было задержек при rollover делаю просто
a {background: url('i/button-hover.jpg'; background: url('i/button.jpg'; )
a:hover {background: url( background: url('i/button-hover.jpg'; )
и никаких задержек и интерактивность наглядная - мигнут кнопки при загрузке, показывая бестолковому юзеру, что туда можно ткнуть мышкой.
a {background: url('i/button-hover.jpg'; background: url('i/button.jpg'; )
a:hover {background: url( background: url('i/button-hover.jpg'; )
и никаких задержек и интерактивность наглядная - мигнут кнопки при загрузке, показывая бестолковому юзеру, что туда можно ткнуть мышкой.
Почитал комментариии. ИНогда я радуюсь, что мои сайты всё же чем-то да лучше чем у других =)
Давно использую эту технику, и даже статью сейчас пишу по CSS, и там эта техника упоминается...
Первый раз напоролась, разглядывая эппловское меню на сайте. Сначала была в ахуе, потом прониклась)
Спасибо за обзор, один из самых интересных и увлекательных %) матералов на хабре за последнее время.
Спасибо за обзор, один из самых интересных и увлекательных %) матералов на хабре за последнее время.
эх ... усложняется веб разработка :/
кому это разбирать? я - программист :) а у верстальщика не хватит мозгов такое осознать и пользоваться :)
кому это разбирать? я - программист :) а у верстальщика не хватит мозгов такое осознать и пользоваться :)
Если использовать эту технику на ссылках-картинках, то какой аналог существует для img alt?
Т.е. как в данном случае быть с аксесабилити при выключенной загрузке картинок?
Т.е. как в данном случае быть с аксесабилити при выключенной загрузке картинок?
для начала стоит определиться, зачем эта самая accessibility нужна.
Если дать пользователю понять, что на этом месте какая-то картина, которая несет смысловую нагрузку, то ее и нужно делать картинкой. Если же это другой функциональный элемент (например, ссылка меню или кнопка отправки формы), то при отключенных картинках он должен выглядеть максимально к этому приближенно. Обычно для этого используют title'ы.
В общем, при отключенных картинках пользователь должен понимать, что он на этой странице делает :)
Если дать пользователю понять, что на этом месте какая-то картина, которая несет смысловую нагрузку, то ее и нужно делать картинкой. Если же это другой функциональный элемент (например, ссылка меню или кнопка отправки формы), то при отключенных картинках он должен выглядеть максимально к этому приближенно. Обычно для этого используют title'ы.
В общем, при отключенных картинках пользователь должен понимать, что он на этой странице делает :)
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
CSS Sprites: все, что вы знали, но боялись спросить