Иконки, смайлики и т.п. зло: методы борьбы

[beshenov]

<a href="/dir/file.ext"><span id="icon_1"></span>link text</a> — вполне.

А вот <div id="icon_1" onclick="some_event()"></div> — абсолютное отсутствие семантики.

[alkeeper]

Я уже говорил выше:

Фантазия подскажет разработчику, какой вариант удобнее выбрать в том или ином примере

На Яндексе сделано примерно так:

<div id="icons"><a href="some_link"><i id="some_id"></i>link text</a>

italic вообще здесь ни в какую семантику не укладывается, но, в отличие от span, в нем на 6 байт меньше

[alkeeper]

Ой, div забыл закрыть

[ha2bj]

гениально!

[fatal]

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

[evgeny_tech]

Отличная идея и хорошая статья. Всем верстальщикам на заметку :) А также тимлидерам: следите за этим!:)

[Ivanhoe]

Противоречиво. С одной стороны - суперэлегантно и красиво. С другой - fatal уже сказал...

[maq]

Что-то непонятно, чего такого fatal сказал «с другой стороны»

[Ivanhoe]

Пардон, я неправильно понял уважаемого fatal. "а как пользователь, к сожалению, продолжаю страдать от недогруженных иконок" вероятнее всего относилось к стандартному способу.

[napster]

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

[djko]

альт можно заменить текстом внутри спана, а стилями послать текст в космос

[Lipa]

Если без изображения нельзя обойтись - то оно уже выходит за рамки декоративной пиктограммы. Несет самостоятельный смысл и публикуется с помощью тега IMG.

[artemenko]

Это вовсе не ново. Он этом еще 2 июня 2005 года написал Владимир Токмаков в разделе "Техногрет" - Студии Артемия Лебедева.
Тут - http://www.artlebedev.ru/tools/technogrette/html/picture_fragmentation/

[korovkin]

Полность согасен, но вот, 2 июня 2005 года, это уже было не ново.

[Yakor]

http://www.alistapart.com/articles/sprit…
(March 05, 2004)

[amordezomb]

только что хотел об этом написать.

[pho3nix]

> пришлось наспех искать место для размещения иллюстраций
Интересно, по какому поисковому запросу вы выбрали именно этот сервис для хранения картинок ;)

[alkeeper]

А какой в SSH-клиент был вбит, такой и выбрал :)

[romantolkachyov]

В очередной раз удивляюсь докалупливости русского человека) Ну грузятся ведь картинки, ан нет, надо посмотреть куда :)

[rold]

А проблем со скоростью рендеринга страницы не будет?

[evgeny_tech]

нет. Время на обработку одной картинки во много раз меньше времени на несколько.

[Archie]

Ребят, а не подскажете с какой прогой можно спрайты по быстрому клеить?

[sotakone]

Adobe Photoshop

[Archie]

Как функция называется?

[Apostol]

Приблизительно так: Ctrt+N, Ctrt+C, Ctrt+V, [Ctrt+C, Ctrt+V, ...] Alt+Shift+Ctrl+S

[Apostol]

Если уж совсем по-быстрому — http://csssprites.com/

[Archie]

Хех, это разве быстро каждый файл по одиночке вбивать? Что-то поудобней, типа Drag&Drop надо. И не веб-приложение а простую утилиту. Заранее спасибо.

[mas]

ImageMagick:
montage -mode concatenate -tile 4x1 icon1.gif icon2.gif icon3.gif icon4.gif all_icons.png

[Archie]

Спасибо друг.

п.с. Погуглил и нашёл некую GraficsGale. Утилита гуевая и довольно таки простая. Попробуйте. ;)

[beshenov]

ImageMagick лучше, особенно если процесс нужно автоматизировать.

[rossomachin]

Тепхника известная. Вот только не всегда возможно чётко задать фиксированные размеры того окна, через который будет проглядывать фон — банально будут торчать соседние картинки.

[pepelsbey]

Эти наивные ребята опять забыли, что пользователь может увеличивать размер шрифта и их спрайты начнут вылазить.
А ещё они забыли, что наиболее удобный способ выравнивания иконки в такой ситуации — это 0 50%, что с этим спрайтом сделать невозможно.

В общем — спрайты и текст несовместимы.
Сборка картинок в одну оправдана только в ситуации полной замены текста графикой.

[rossomachin]

Совершенно с тобой согласен.
Кстати, вот ещё кое-что по наши души: http://mihazimin.habrahabr.ru/blog/24383…,
http://rossomachin.livejournal.com/87135…

[altmind]

хм. применение слова спрайт тут уместно? не надо только тыкать меня носом в определение, поясните что это так, как вы это понимаете.

[zencd]

примеры для меня не заработали ( «лебедевский» код хоть и слишком специфичен, зато работает сразу ) ; вот например так отличаются два пункта: один див, другой спан o_o

[ div id="icon_1" onclick="some_event()" ][ /div ]
vs
[ a href="/dir/file.ext" ][ span id="icon_1" ][ /span ]link text[ /a ]

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

[miha_ha]

Идея отличная. Раньше я использовал эту идею для пунктов меню, которые сделаны в виде меняющихся картинок при наведении.

Только, думаю, может возникнуть проблема с mate. Если иконки в сете будут размещены на разных беках, то придется с этим бороться и это вызовет некторые сложности, а png24 не всегда удобен (нужно еще ie учить их отображать)

[miha_ha]

Кстати, по поводу alt. Можно же положить вместо этой иконки в div однопиксельный gif и растянуть его по размеру иконки (саму иконку на background). Вот на этот gif и ставить alt

[alkeeper]

В результате чего благополучно теряем прелести второго преимущества.

[oxff]

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

[alkeeper]

Действительно, что-то протупил :)

[romantolkachyov]

>Иконки замечательно оседают в кэше и в дальнейшем уже не запрашиваются (если все правильно настроено, конечно).
Могу заверить, что IFModified всё так же отправляется. (если это среднестатистический пользователь, "несреднестатистический" даже первый раз не загружает)

[trinko]

ужос...
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> тут лишние.

Примерно так. Статья с тех. точки ужасно не точная =( Однако, надеюсь будет многим отправной точкой для изучения данной техники, раз так популярна. Лишь бы код у автора тупо не копировали...

[gunkin]

Вещь хорошая, но... Мне вот как правило приходится вставлять иконки в PNG с прозрачностью и на не однотонный фон - самизнаетепроIE6.

[alkeeper]

Разумеется, для IE приходится совершать исправляющие телодвижения типа таких:

<!--[if IE]><link href="http://www.habrahabr.ru/css/ie_only.css" rel="stylesheet" type="text/css"><![endif]-->

[gunkin]

И что там будет прописано про background?

[trinko]

background:0;
filter:....
не помню точно но это не проблема.

[alkeeper]

http://msdn2.microsoft.com/en-us/library…

[gunkin]

Ммм, пардон, оказывается прошли времена PNG Behavior, и прозрачность фона не проблема: http://alistapart.com/stories/pngopacity…

[Scream]

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

[Sam_des]

Отлично!

[rybnadzorro]

Черезжопье дикое :). Начиная с того, что прийдётся запихивать кучу каритинок в общую палитру (вы ведь не забыли ;)), продолжая тем, что откажемся от анимации (или будем с ней долго или высокотехнологично страдать).

ГОСПОДА! ЦСС ЭТО ПРОСТО ЗАШИБИСЬ! но не нужно пихать его прогрессивные средства в любую первую попавшуюся опу. как и дваноль. как и градиенты. и скруглённости. и ажакс. и персонализацию. и юзергенерейтедконтент....

[gunkin]

Да, это опять похоже на дикую оптимизацию не особо нужную в наше время.

[alexbig]

статья, как воспоминание давно описанной техники - отличная, единственное, что я бы посоветовал поменьше использовать атибут id, пользуйтесь class или селекторами чтобы не "мешать" потом работать (тормозить) всяким getElementById()...

<style>
.icon { background-image: url(/img/icons.png); }
.home { background-position: xpos ypos; }
</style>

<body>
<div class="icon home"></div>
</body>

[conturov]

Представим себе вариант что иконок у меня на весь сайт порядком 150 штук
Я их загоняю в один большой рисунок и делаю такой же большой css.

Возникает проблема загрузки этой большой картинки и еще css
Если эта картинка не прогрузилась, тогда не показываются вообще все иконки.

А если они разного размера? тоже проблема в нахождении координат каждой из картинок.

На гугле и яндексе - понятно, там немного иконок с этим проще.

[umnik]

Хаа =)) Всегда так и делал.
Про это есть в Техногрете Лебедева, а первое использование было еще в fckeditor, помоему