Как сделать отбор нужных элементов из списка <ul> по нескольким признакам и рисование наборов иконок признаков?

Question

[leshik]

Коллега сделала рейтинг продуктов для совместной работы. Хочется добавить функциональность отбирать продукты в соответствии с функциональностью:


<ul id="ranking">
<li class="i p r d"><a href="www.attask.com">@task</a></li>
<li class="i d"><a href="www.alfresco.com">Alfresco</a></li>
<li class="i p r d"><a href="www.assembla.com">Assembla</a></li>
<li class="r d"><a href="basecamphq.com">Basecamp</a></li>
<li class="i s p d"><a href="www.bontq.com">Bontq</a></li>
[...]



Хочется использовать нескольких классов для html элемента — это красиво и есть надежда поиспользовать CSS.


Заодно рисовать в соответствии с классами i, p, r,… соответствующие иконки. Не получается. Если пишем следующий CSS, рисуется только одна иконка из набора — следующий бэкграунд перетирает предыдущий. Как сделать? Была идея подложить общий бэкграунд со всеми иконками, а сверху рисовать белые нашлёпки, но всё равно непонятно как. Отличие от популярных в последнее время вёрсток с наложением бэкграундов — там несколько бэкграундов объединяются запятой в одном background-image; никто не обещал, что это эквивалентно наложению нескольких классов. :-(

#ranking li {
  padding: 0 0 0 144px;
  height: 24px;
  margin: 0;
  background-color: transparent;
  background-repeat: no-repeat;
}

#ranking .i {
  background-image: url(http://lh5.googleusercontent.com/_aUeHSbJneFc/TaWtMRe2sTI/AAAAAAAADN8/lUN_k4d9agU/s800/issue.png);
  background-position: 0 0;
}

</style>

Если мы будем включать/выключать видимость с помощью display: none;, похоже последнее значение тоже будет перетирать прдыдущее. Хочется же, чтобы показывались продукты в соответствии с функциональностью, которую пользователь захотел, вне зависимости от порядка классов в спецификаторе.


Можно, конечно, нагородить большой javascript (сейчас так иконки и рисуются). Но может можно всё же заставить работать CSS?

Comments

[Михаил Крайнов]

А почему вы хотите сделать иконки бэкграундами? Это ведь семантически неверно. Иконки несут информацию и должны быть отражены в основной разметке так, чтобы при отключении стилей пользователь всё равно увидел функциональность продуктов.

[leshik]

На 130 продуктов 250 тэгов громоздко, хоть и семантически верно. Можно ли как-нибудь по другому?

[Михаил Крайнов]

Тогда другой вопрос. А зачем «большой javascript», когда всё решается jQuery и строчкой вида $(#ranking .i).append("<img src='i-src'>");? Или даже лучше $(#ranking .i).append("<span class='i'>This product has the I.</span>"); и далее CSS с text-indent:-9999px; background: url() no-repeat 0 0;
В итоге решаете вопрос семантики и уходите от ручного нагромождения тэгов.
Работать, имхо, должно побыстрее чем то, что сейчас у Вас отрисовывает картинки.

А множественный фон, как Вы хотите, сейчас кроссбраузерно невозможен, насколько я знаю.

Answer 1

[entire]

Используя псевдоэлементы :before и :after вы можете разместить в представленной разметке 6 фоновых изображений и 4 изображения в свойстве content. Комбинация этих псевдоклассов с li.className позволит гибко управлять фоном для каждого элемента.

.p:before {
    content: url(data:image/png;base64,...);
    background: url(data:image/png;base64...);
}

.p a:before {
    content: url(data:image/png;base64,...);
    background: url(data:image/png;base64...);
}

Более подробная информация: http://habrahabr.ru/blogs/css/14827/.

Comments

[leshik]

спасибо!

[leshik]

увы, один :before перетирает другой; один перед другим не вставляется

Answer 2

[VladislavGH]

Можно из без javascript. Правда я представляю как это сделать на PHP.

PS Чем вам javascript не угодил?

Comments

[leshik]

Так как сделано это на блоггер, нет возможности делать на серверной стороне. На javascript можно, но хочется на CSS — так красивее.

Answer 3

[qrazydraqon]

Не самое изящное и не очень удобно расширяемое решение: в каждый li положить пачку div'ов с соответствующими классами, в CSS написать что-то вроде такого:

#ranking li div { float: left; display: none;}
#ranking li div.r {background-image: ...}

И включить им отображение, когда имеется нужный класс у li:

#ranking li.r div.r { display: block; }