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

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

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

гениально!

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

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

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

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

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

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

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

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

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

примеры для меня не заработали ( «лебедевский» код хоть и слишком специфичен, зато работает сразу ) ; вот например так отличаются два пункта: один див, другой спан 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 организовать :)

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

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

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

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

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

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

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

Отлично!

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

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

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

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

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

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

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

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

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

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