Верстка иконок с помощью псевдо-элементов и css свойства clip

[@steelcat]

Спасибо, интересный способ. А как у него с поддержкой в браузерах?

[@konclave]

Firefox, Opera, Webkit, IE8, IE7 — нужно писать expression, IE6 — тоже нужен expression и небольшая коррекция позции img.

[@steelcat]

… Вот только пустой альт (или его отсутствие) — не есть хорошо. Хотя, с другой стороны, таким образом вставляется, как правило, мелкая малозначимая графика.

[@konclave]

Пустой аттрибут alt, мне кажется, в этом случае не страшно, по-скольку картинка является графическим отображением надписи, которая рядом с ней же и находится. При желании можно в alt дописать содержимое тэга.

[@steelcat]

Согласен, можно и дописать на лету, но тогда красота и изящность метода теряется.

[@MAXH0]

Категорически поддерживаю. Надписи при отключенной графике типа «Заголовок»/«Заголовок» ужасно раздражают.

[@bolk]

Странно, когда я экспериментировал с clip, в IE6/7 он работал. Вы уверены, что expression нужен? К сожалению, у меня нет доступа к IE сейчас.

[@konclave]

expression нужне не для clip, а для обеспечения работы псевдо-класса :before

[@404]

Есть ещё несколько способов размещения маркеров и иконок. Вот перевод статьи со Smashing Magazine.

[@konclave]

Это прекрасно. Надо было его опубликовать.

[@konclave]

И, кстати, способ с заданием псевдо-элементу бэкграунда, описаный в этой статье, не работает в IE версии < 8

[@404]

Конечно, ведь в нём нет поддержки :before. Нужно писать экспрешн.

[@raduzhka]

Если я не ошибаюсь, то вот тут написано подробнее и больше

[@konclave]

Не ошибаетесь. Это, видимо, альтернативный перевод статьи, ссылку на другой перевод которой дал 404 выше. С моей точки зрения там слишком много не нужного.
Символы из таблицы utf никогда не использовал, потому что дизайнеры никогда их не рисуют, а иконку с помощью бэкграунда можно сделать и без псевдоэлементов. Хотя можно и с.

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

[@raduzhka]

С точки зрения «надо быстро сделать и забыть» — согласен.
С точки зрения «надо понять, как это и почему так» — та статья много лучше.

P.S. имхо

[@konclave]

Ну как бы метод не претендует на универсальность. Как и большинство остальных.

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

У меня там где я его применял все отлично работает.

[@konclave]

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

[@ElaSTiC]

Картинкой поставить иконку можно и более простым способом. Например в DOM, что тоже позволит напечатать этот ваш плюсик у заголовка. А если написать у картинки position:relative и порулить свойством top, то и позиция отлично выровняется.

Expression — вообще зло.

[@konclave]

В DOM это уже javascript применять надо. Можно все сделать с помощью javascript — колонки одинаковой высоты, выпадающие меню… Так ведь нет, мучаются же люди зачем-то. А expression не такое уж и зло. По крайней мере в этой ситуации. Зло — пользователи, у которых стоит браузер древний как дерьмо мамонта.

[@40in]

>В DOM это уже javascript применять надо
Простите, а expression это не тот же JS? Поправьте если не прав…

[@konclave]

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

Не вижу смысла в дальнейшем обсуждении — хотите делать все на JS — делайте. Я предпочитаю другие методы.

[@ElaSTiC]

Javascript не нужно использовать для верстки. Для этого есть css. Если не получается сделать через css — читайте, учитесь, переверстайте внешние элементы, все получится. Верстка на js — костыль.

[@konclave]

Знаете способ сделать без костылей min-width для IE6? Хотя нет, такой способ есть, но он адски неудобен.
А, например, способ сделать без костылей для IE 6,7 запятые после элементов списка, растянутого в линию?

Вот такого вот: первый элемент, второй элемент, третий элемент

Не для всего есть решение на чистом CSS для чего-то приходтися задвинуть гордость и честолюбие и применить костыли.