Комментарии 58
<a href="/dir/file.ext"><span id="icon_1"></span>link text</a>
— вполне.А вот
<div id="icon_1" onclick="some_event()"></div>
— абсолютное отсутствие семантики.+4
Я уже говорил выше:
На Яндексе сделано примерно так:
italic вообще здесь ни в какую семантику не укладывается, но, в отличие от span, в нем на 6 байт меньше
Фантазия подскажет разработчику, какой вариант удобнее выбрать в том или ином примере
На Яндексе сделано примерно так:
<div id="icons"><a href="some_link"><i id="some_id"></i>link text</a>
italic вообще здесь ни в какую семантику не укладывается, но, в отличие от span, в нем на 6 байт меньше
0
гениально!
0
Как разработчик, уже давно этот метод использую, а как пользователь, к сожалению, продолжаю страдать от недогруженных иконок.
+4
Отличная идея и хорошая статья. Всем верстальщикам на заметку :) А также тимлидерам: следите за этим!:)
0
Противоречиво. С одной стороны - суперэлегантно и красиво. С другой - fatal уже сказал...
-2
Еще один пример, один из наиболее «впечатляющих» по количеству иконок в одном файле — Yahoo, а здесь его иконки. Кстати таким способом (CSS-спрайты, об этом уже писал уважаемый sunnybear в своем топике «Оптимизируем загрузку веб-страницы») они оторбражают не только иконки, а и всяческие градиенты и другую графику.
+1
НЛО прилетело и опубликовало эту надпись здесь
Это вовсе не ново. Он этом еще 2 июня 2005 года написал Владимир Токмаков в разделе "Техногрет" - Студии Артемия Лебедева.
Тут - http://www.artlebedev.ru/tools/technogrette/html/picture_fragmentation/
Тут - http://www.artlebedev.ru/tools/technogrette/html/picture_fragmentation/
+3
Полность согасен, но вот, 2 июня 2005 года, это уже было не ново.
0
http://www.alistapart.com/articles/sprit…
(March 05, 2004)
(March 05, 2004)
0
только что хотел об этом написать.
-3
> пришлось наспех искать место для размещения иллюстраций
Интересно, по какому поисковому запросу вы выбрали именно этот сервис для хранения картинок ;)
Интересно, по какому поисковому запросу вы выбрали именно этот сервис для хранения картинок ;)
+1
А проблем со скоростью рендеринга страницы не будет?
0
Ребят, а не подскажете с какой прогой можно спрайты по быстрому клеить?
0
Adobe Photoshop
0
Если уж совсем по-быстрому — http://csssprites.com/
+1
Тепхника известная. Вот только не всегда возможно чётко задать фиксированные размеры того окна, через который будет проглядывать фон — банально будут торчать соседние картинки.
+3
Эти наивные ребята опять забыли, что пользователь может увеличивать размер шрифта и их спрайты начнут вылазить.
А ещё они забыли, что наиболее удобный способ выравнивания иконки в такой ситуации — это 0 50%, что с этим спрайтом сделать невозможно.
В общем — спрайты и текст несовместимы.
Сборка картинок в одну оправдана только в ситуации полной замены текста графикой.
А ещё они забыли, что наиболее удобный способ выравнивания иконки в такой ситуации — это 0 50%, что с этим спрайтом сделать невозможно.
В общем — спрайты и текст несовместимы.
Сборка картинок в одну оправдана только в ситуации полной замены текста графикой.
+2
Совершенно с тобой согласен.
Кстати, вот ещё кое-что по наши души: http://mihazimin.habrahabr.ru/blog/24383…,
http://rossomachin.livejournal.com/87135…
Кстати, вот ещё кое-что по наши души: http://mihazimin.habrahabr.ru/blog/24383…,
http://rossomachin.livejournal.com/87135…
0
хм. применение слова спрайт тут уместно? не надо только тыкать меня носом в определение, поясните что это так, как вы это понимаете.
0
примеры для меня не заработали ( «лебедевский» код хоть и слишком специфичен, зато работает сразу ) ; вот например так отличаются два пункта: один див, другой спан o_o
вообще техника полезная, хотя лучше было бы это посредством HTML IMG организовать :)
[ div id="icon_1" onclick="some_event()" ][ /div ]
vs
[ a href="/dir/file.ext" ][ span id="icon_1" ][ /span ]link text[ /a ]
вообще техника полезная, хотя лучше было бы это посредством HTML IMG организовать :)
0
Идея отличная. Раньше я использовал эту идею для пунктов меню, которые сделаны в виде меняющихся картинок при наведении.
Только, думаю, может возникнуть проблема с mate. Если иконки в сете будут размещены на разных беках, то придется с этим бороться и это вызовет некторые сложности, а png24 не всегда удобен (нужно еще ie учить их отображать)
Только, думаю, может возникнуть проблема с mate. Если иконки в сете будут размещены на разных беках, то придется с этим бороться и это вызовет некторые сложности, а png24 не всегда удобен (нужно еще ie учить их отображать)
+1
Кстати, по поводу alt. Можно же положить вместо этой иконки в div однопиксельный gif и растянуть его по размеру иконки (саму иконку на background). Вот на этот gif и ставить alt
+3
НЛО прилетело и опубликовало эту надпись здесь
ужос...
http://www.simplebits.com/notebook/2003/…
техника 4 года назад описана, кстати.
http://www.artlebedev.ru/tools/technogre…
лебедевцы ее описывали 2 года назад.
И сегодня на индексе хабра =)
Далее по коду...
<div id="icon_1" onclick="some_event();"></div>
Во-первых, отключаем javascript и получаем бездействующий интерфейс.
Во-вторых, JS спецификация меняет пробел не на подчеркивание, а на заглавную последующую. Типа семантика и все такое %)) на самом деле JS просто так проще читается.
Примерно так бы сделал я...
<a id="icon_1" href="/some_event.html" onclick="someEvent();return false;"></a>
Хранить весь набор иконок в одном файле конечно круто, но если появляются они на страницы силами CSS, то уже пофиг, один там бэк или куча мелких, ибо все равно кешируется все. А значит смысла особого склеивать иконки - нет.
Склеенные иконки хуже поддаются редактированию. Если у тебя стартап, который ты обновляешь каждый день, через неделю тебе надоест постоянно открывать весь набор иконок, чтобы отредактировать одну.
Да и потом склеенные иконки все же сложнее позиционировать. Если к одной я могу задать
background-position:5px 50%;
чтобы иконка была смещена на 5 пикселей слева и центровалась по вертикали, то с кучей иконок в одном файле так легко уже не сделать.
Ну и на последок пример с тем же яндексом. Вот код яндекса:
и вот возможная альтернатива:
Ну и в каком месте кода меньше? Помойму бездействующие ненужные и (бля буду!) не семантические %)))) <i></i> тут лишние.
Примерно так. Статья с тех. точки ужасно не точная =( Однако, надеюсь будет многим отправной точкой для изучения данной техники, раз так популярна. Лишь бы код у автора тупо не копировали...
http://www.simplebits.com/notebook/2003/…
техника 4 года назад описана, кстати.
http://www.artlebedev.ru/tools/technogre…
лебедевцы ее описывали 2 года назад.
И сегодня на индексе хабра =)
Далее по коду...
<div id="icon_1" onclick="some_event();"></div>
Во-первых, отключаем javascript и получаем бездействующий интерфейс.
Во-вторых, JS спецификация меняет пробел не на подчеркивание, а на заглавную последующую. Типа семантика и все такое %)) на самом деле JS просто так проще читается.
Примерно так бы сделал я...
<a id="icon_1" href="/some_event.html" onclick="someEvent();return false;"></a>
Хранить весь набор иконок в одном файле конечно круто, но если появляются они на страницы силами CSS, то уже пофиг, один там бэк или куча мелких, ибо все равно кешируется все. А значит смысла особого склеивать иконки - нет.
Склеенные иконки хуже поддаются редактированию. Если у тебя стартап, который ты обновляешь каждый день, через неделю тебе надоест постоянно открывать весь набор иконок, чтобы отредактировать одну.
Да и потом склеенные иконки все же сложнее позиционировать. Если к одной я могу задать
background-position:5px 50%;
чтобы иконка была смещена на 5 пикселей слева и центровалась по вертикали, то с кучей иконок в одном файле так легко уже не сделать.
Ну и на последок пример с тем же яндексом. Вот код яндекса:
<div id=services class=r>
<div id=market>
<h2>
<a href="http://market.yandex.ru"onclick="p('next.market.title')">
<i></i>
Маркет
</a>
</h2>
</div>
<div id=moikrug>
<h2>
<a href="http://moikrug.ru/mates/school/russia/?from=yandex_main&geo=213"onclick="p('next.moikrug.title')">
<i></i>
Мой Круг
</a>
</h2>
</div>
...
</div>
и вот возможная альтернатива:
<ul class="iconmenu" id="services">
<li id="market">
<a href="http://market.yandex.ru" onclick="p('next.market.title')">
Маркет
</a>
</li>
<li id="moikrug">
<a href="http://moikrug.ru/mates/school/russia/?from=yandex_main&geo=213" onclick="p('next.moikrug.title')">
Мой Круг
</a>
</li>
...
</ul>
Ну и в каком месте кода меньше? Помойму бездействующие ненужные и (бля буду!) не семантические %)))) <i></i> тут лишние.
Примерно так. Статья с тех. точки ужасно не точная =( Однако, надеюсь будет многим отправной точкой для изучения данной техники, раз так популярна. Лишь бы код у автора тупо не копировали...
+2
Вещь хорошая, но... Мне вот как правило приходится вставлять иконки в PNG с прозрачностью и на не однотонный фон - самизнаетепроIE6.
0
Разумеется, для IE приходится совершать исправляющие телодвижения типа таких:
<!--[if IE]><link href="http://www.habrahabr.ru/css/ie_only.css" rel="stylesheet" type="text/css"><![endif]-->
0
И что там будет прописано про background?
0
background:0;
filter:....
не помню точно но это не проблема.
filter:....
не помню точно но это не проблема.
0
Ммм, пардон, оказывается прошли времена PNG Behavior, и прозрачность фона не проблема: http://alistapart.com/stories/pngopacity…
0
Большое спасибо за статью!
Как раз сейчас занимаюсь проектом, в котором будет много иконок :)
Как раз сейчас занимаюсь проектом, в котором будет много иконок :)
0
Отлично!
0
Черезжопье дикое :). Начиная с того, что прийдётся запихивать кучу каритинок в общую палитру (вы ведь не забыли ;)), продолжая тем, что откажемся от анимации (или будем с ней долго или высокотехнологично страдать).
ГОСПОДА! ЦСС ЭТО ПРОСТО ЗАШИБИСЬ! но не нужно пихать его прогрессивные средства в любую первую попавшуюся опу. как и дваноль. как и градиенты. и скруглённости. и ажакс. и персонализацию. и юзергенерейтедконтент....
ГОСПОДА! ЦСС ЭТО ПРОСТО ЗАШИБИСЬ! но не нужно пихать его прогрессивные средства в любую первую попавшуюся опу. как и дваноль. как и градиенты. и скруглённости. и ажакс. и персонализацию. и юзергенерейтедконтент....
+2
статья, как воспоминание давно описанной техники - отличная, единственное, что я бы посоветовал поменьше использовать атибут id, пользуйтесь class или селекторами чтобы не "мешать" потом работать (тормозить) всяким getElementById()...
<style>
.icon { background-image: url(/img/icons.png); }
.home { background-position: xpos ypos; }
</style>
<body>
<div class="icon home"></div>
</body>
<style>
.icon { background-image: url(/img/icons.png); }
.home { background-position: xpos ypos; }
</style>
<body>
<div class="icon home"></div>
</body>
0
Представим себе вариант что иконок у меня на весь сайт порядком 150 штук
Я их загоняю в один большой рисунок и делаю такой же большой css.
Возникает проблема загрузки этой большой картинки и еще css
Если эта картинка не прогрузилась, тогда не показываются вообще все иконки.
А если они разного размера? тоже проблема в нахождении координат каждой из картинок.
На гугле и яндексе - понятно, там немного иконок с этим проще.
Я их загоняю в один большой рисунок и делаю такой же большой css.
Возникает проблема загрузки этой большой картинки и еще css
Если эта картинка не прогрузилась, тогда не показываются вообще все иконки.
А если они разного размера? тоже проблема в нахождении координат каждой из картинок.
На гугле и яндексе - понятно, там немного иконок с этим проще.
0
Хаа =)) Всегда так и делал.
Про это есть в Техногрете Лебедева, а первое использование было еще в fckeditor, помоему
Про это есть в Техногрете Лебедева, а первое использование было еще в fckeditor, помоему
0
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Иконки, смайлики и т.п. зло: методы борьбы