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

26 Oct, 2005

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

Маленький трик с посещенными ссылками для "хороших" броузеров.
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 броузерами - посему все в таком неочевидном на первый взгляд виде. Однако же работает. А ИЕ... это его проблемы ;)

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

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

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

1.Flightsnormal | 27 Oct, 2005
то же можно сделать видным и в ie просто использовать background: url("galka.gif") no-repeat right; padding-right: 1em; Возникает другой вопрос - как юзеру понять что ссылки с галками - это посещенные ссылки?
2.kost | 27 Oct, 2005
Поймут юзеры. А если не поймут, то и дефолтные фиолетовые ссылки им не помогут.
3.akella | 27 Oct, 2005
Мне честно говоря больше нравится именно то что эта галочка сделана честным шрифтом - и где она ни появись на странице, подстроится под окружающий шрифт. А насчет понимания - никто ж не говорил что посещенные будем выделять только галочкой - цвет и подчеркивания к нашим услугам...
4.Sly | 28 Oct, 2005
Какая разница между a:visited и a:visited:after?
5.ganges | 31 Oct, 2005
В :after ты сможешь "сгенерировать" нужное тебе содержимое после ссылки. в то время как в просто :visited - ты можешь работать только непосредственно с самой (посещенной) ссылкой Псевдокласс :after не поддерживается даже в ИЕ 6.0
6.Никита | 03 Nov, 2005
Интересно получается :) Посещенные ссылки. Visited links
7.akella | 05 Nov, 2005
Пардон, коллега, - так увлекся зарубежными блогами, что про своих стал забывать.... (. Извини - за всеми не уследил... :(
8.Vadim | 24 May, 2006
Пост оставлен 26 октября, 2005 года в 5:42 pm в категории XHTML/CSS, Дизайн - akella сказал(а): quote----- Вот такие красивые радикальчики-галочки. Среди символов есть и настоящая “галочка” (check mark) - ***он она***, к сожалению, отображается далеко не во всех броузерах.. quote----- мне кажется имелось ввиду "но она", нелепая опечатка... это в качестве направления к достижению 8)
9.akella | 24 May, 2006
Спасибо исправил.