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

26 Oct, 2005

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

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

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

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

a:visited:after {
content:"\00A0\2713";
}

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

a:visited:after {
content: "\00A0\221A";
font-size: 75%;
}

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

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

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

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

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

Check marking visited links - собственно эту заметку я перевел
Пример первого CSS кусочка
Майк Дэвидсон про этот же маленький прием - у него на сайте живой пример второго кусочка CSS
Символы юникода
XHTML символы - красиво и удобно
Более "продвинутый" вариант - с картинками, а не радикалами

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: Спасибо исправил.