Украшаем списки

В 2002 году Марк Ньюхаус (Mark Newhouse) опубликовал статью «Укрощение списков» ("Taming Lists"), довольно-таки интересную часть которой он посвятил объяснению того, как создавать собственные списки, украшенные псевдо-элементами. Почти десять лет спустя Николас Галлахер (Nicolas Gallagher) изобрел технику, которая использует псевдо-элементы из спрайтов, для создания фоновых изображений.
Сегондя, основываясь на опыте гигантов, мы постараемся развить эту тему. Мы обсудим, как можно украсить элементы без дополнительной разметки, используя только технику CSS-спрайтов. Результат будет работать также в Internet Explorer 6 и 7 версии.

Начнём со спецсимволов

Существует множество символов, которые бы мы могли использовать в качестве изображений для создания различных маркеров. Что может получиться:

Пример

Эти маркеры (, , , ) в списке выше созданы следующим образом:
HTML:

<ul class="glyphs">
<li class="one">performance</li>
<li class="two">usability</li>
<li class="three red">maintenance </li>
<li class="four red">accessibility</li>
</ul>

CSS:

.glyphs {
list-style-type: none;
}

.glyphs li:before,
.glyphs b {
display: inline-block;
width: 1.5em;
font-size: 1.5em;
text-align: center;
}

.one,

.one:before {
content: "\2660"; /*  */
background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '<b>♠</b>'+this.innerHTML);
}

.two,
.two:before {
content: "\2663"; /*  */
background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '<b>♣</b>'+this.innerHTML);
}

.three,
.three:before {
content: "\2665"; /*  */
background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '<b>♥</b>'+this.innerHTML);
}

.four,
.four:before {
content: "\2666"; /*  */
background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '<b>♦</b>'+this.innerHTML);
}

.red b,
.red:before {
color: red;
}

Как это работает

• Значение свойства content должно указывать на Unicode-символ в шестнадцатеричном формате (для IE мы используем HTML-сущности).
• Internet Explorer 6 и 7 версии не поддерживает ни ::before, ни :before, поэтому символы мы подключаем через CSS-выражения.
• Internet Explorer 8 не поддерживает ::before, но поддерживает запись с одним двоеточием.
• Обратите внимание, что игнорируя совместимость с различными браузерами "нет никакой разницы как между :before и ::before, так и между :after и ::after. Синтаксис с одним двоеточием (т.е. :before или :after-child) используется для описания как псевдо-классов, так и псевдо-селекторов во всех версиях CSS до CSS3. С введением CSS3, чтобы отличать псевдо-классы от псевдо-элементов, первые записываются, используя одинарное двоеточие, последние же, используя двойное двоеточие".
• В Internet Explorer символы заворачиваются в элементах <b>, следовательно у нас есть возможность как-то указать на них и стилизовать (вам скорее всего захочется использовать классы для этих целей).

Заметьте, что CSS-выражения, которые мы здесь используем не хуже тех, которые мы используем для имитации min-width и подобных. Она вычисляются один раз, что впоследствии должно привести к небольшому увеличению производительности.

Выводим изображения через псевдо-элементы

Основное преимущество использования псевдо-элемента с целью отображения картинок заключается в том, что позволяет использовать спрайты. Вообще-то в этом нет ничего нового, и многие сайты уже используют дополнительную (так называемую «мусорную») разметку для достижения этой цели. Например, Yahoo! Search использует пустой тег <s>, а Facebook — <i>. Следуя этим путем, можно создавать компактные CSS-спрайты, без каких-либо пустых областей.
Следующие два примера не используют дополнительной разметки, основываясь на одном и том же спрайте:



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

Метод Николаса Галлохера

Стилизация псевдо-элемента, используя фоновое изображение:

#first:before {
content: "";
float: left;
width: 15px;
height: 15px;
margin: 4px 5px 0 0;
background: url(sprite.png) -15px 0;
}

Новый метод с использованием url() / clip

Используем свойство content для вставки спрайта, который потом режется в clip:

#second {
position: relative;
padding-left: 20px;
background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '<img alt="" src="sprite.png">'+this.innerHTML);
}

#second:before,
#second img {
content: url(sprite.png);
position: absolute;
top: 3px;
clip: rect(0 30px 15px 15px);
left: -15px; /* to offset the clip value */
_left: -35px; /* some massaging for IE 6 */
}

Если вам вдруг интересно, почему я выше использую position: absolute, объясняю: потому что свойство clip применимо только к элементам, который позиционируется абсолютно.

Новый способ: как оно всё работает?

• Вместо того, чтобы украшать псевдо-элемент каким-либо фоном, мы используем его, чтобы вставить изображение (через свойство content)
• Используя свойство clip мы «вырезаем» из изображения только ту часть, которую хотим отобразить. Это означает, что нет необходимости добавлять в картинку пустое пространство с целью избежать отображение других её частей (обычно использовалось как фоновое изображения для больших элементов).
• Мы компенсируем значения clip, используя свойства left и/или top

В случае, если не требуется обрезать изображения, изображения в спрайте должны выравниваться по правому или левому краю для размещения, удовлетворяя RTL/LTR-контексту (background-position: [left][right][vertical value]). Еще одним ограничением будет создание спрайтов с изображениями, следующими друг за другом (другие части изображения могут также отображаться). В процессе «разрезания» спрайта эти нюансы не играют никакой роли, следовательно, картинки можно стыковать друг с другом.
Пример смотрите ниже:

Преимущества данного метода перед другими

Стиль, который используется при печати
В отличие от фоновых изображений эти изображения печатаются вместе с документом (они отправляются на принтер).

Стиль, который является доступным
В отличие от фоновых изображений эти изображения не исчезнут в режиме высокой контрастности в Windows или в высоко контрастных таблицах стилей.

Стиль, который работает в Internet Explorer 8
Этот метод также работает и в Internet Explorer версии 6 и 7.

Обратите внимание, чтобы лишнего HTTP-запроса может быть использована схема data: URI. Internet Explorer не поддерживает схемы data: URI, но мы можем использовать MHTML для Internet Explorer 6/7, что позволит старым браузерам их понять.

Украшаем ссылки псевдо-элементами

Николас Галлахер показывает много интересных фишек, которые можно сделать, используя псевдо-элементы. Единственное, что я здесь добавил, это использование ::after в стилях ссылок, как на примере ниже:
CSS:

.more,
.more:after {
white-space: nowrap;
content: " \00BB"; /* » */
background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = this.innerHTML+' »');
}

Пара слов об удобстве использования

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

Дополнительный материал

Возможно, вам захочется посетить следующие ресурсы:

• CSS3 module: Lists – The ::marker pseudo-element
• Generated content, automatic numbering, and lists
• The clip property
• Colour Contrast and CSS Sprite Maps
• High Contrast Proof CSS Sprites

Иконки от FatCow Web Hosting

p.s. Замечания по поводу перевода и приветы :) принимаются в личку.
p.p.s. В паре мест подменил текст рисунком, живой пример можно посмотреть в оригинале.