Посещенные ссылки

26 October, 2005

XHTML/CSS, Дизайн

Долго не писал в блог – очень мало времени – потом понял, что все время искал нечто глобальное и большое. Теперь стратегию решил изменить, буду теперь писать чаще и мельчее. )

Маленький трик с посещенными ссылками для “хороших” броузеров.
Update: дал маху – об этом уже написали Посещенные ссылки. Visited links – на Юмэйд. Ничего не воровал – просто дал маху :(.

Ставим галочки

Один из способов красиво выделить посещенные ссылки не используя картинки. Ближе к делу:

  1. a:visited:after {
  2. content:”\00A0\2713″;
  3. }

Или так (так делает Майк Дэвидсон у себя на сайте – разницу будет трудно увидеть ):

  1. a:visited:after {
  2. content: “\00A0\221A”;
  3. font-size: 75%;
  4. }

Псевдокласс :after работает уже практически везде (кроме сами знаете кого ;)). Таким образом во всех(!ИЕ) броузерах посещенные линки выделятся примерно таким образом(картинки в порядке CSSов):

Roger Johansson методMike Davidson метод

Вот такие красивые радикальчики-галочки. Среди символов есть и настоящая “галочка” (check mark) – но она, к сожалению, отображается далеко не во всех броузерах..
Если указывать символы не в юникоде, возникают проблемы c броузерами – посему все в таком неочевидном на первый взгляд виде. Однако же работает. А ИЕ… это его проблемы ;)

Вот такой маленький прием – вид конечно на любителя – но я думаю применение не настолько надуманное. Мне лично, очень даже нравится. Если в свободное время я выиграю “бой с ленью” то и себе такие сделаю :).

Ссылки по теме

XHTML/CSS, Дизайн

9 комментариев к “Посещенные ссылки”

Flightsnormal | 1. 27 October, 2005

то же можно сделать видным и в ie
просто использовать

background: url(“galka.gif”) no-repeat right;
padding-right: 1em;

Возникает другой вопрос – как юзеру понять что ссылки с галками – это посещенные ссылки?

kost | 2. 27 October, 2005

Поймут юзеры.

А если не поймут, то и дефолтные фиолетовые ссылки им не помогут.

akella | 3. 27 October, 2005

Мне честно говоря больше нравится именно то что эта галочка сделана честным шрифтом – и где она ни появись на странице, подстроится под окружающий шрифт.

А насчет понимания – никто ж не говорил что посещенные будем выделять только галочкой – цвет и подчеркивания к нашим услугам…

Sly | 4. 28 October, 2005

Какая разница между a:visited и a:visited:after?

ganges | 5. 31 October, 2005

В
:after
ты сможешь “сгенерировать” нужное тебе содержимое после ссылки. в то время как в просто :visited – ты можешь работать только непосредственно с самой (посещенной) ссылкой

Псевдокласс :after не поддерживается даже в ИЕ 6.0

Никита | 6. 3 November, 2005

Интересно получается :)

Посещенные ссылки. Visited links

akella | 7. 5 November, 2005

Пардон, коллега, – так увлекся зарубежными блогами, что про своих стал забывать…. (. Извини – за всеми не уследил… :(

Vadim | 8. 24 May, 2006

Пост оставлен 26 октября, 2005 года в 5:42 pm в категории XHTML/CSS, Дизайн – akella сказал(а):

quote—–
Вот такие красивые радикальчики-галочки. Среди символов есть и настоящая “галочка” (check mark) – ***он она***, к сожалению, отображается далеко не во всех броузерах..
quote—–

мне кажется имелось ввиду “но она”, нелепая опечатка…
это в качестве направления к достижению 8)

akella | 9. 24 May, 2006

Спасибо исправил.

Оставить комментарий