Посещенные ссылки
Долго не писал в блог - очень мало времени - потом понял, что все время искал нечто глобальное и большое. Теперь стратегию решил изменить, буду теперь писать чаще и мельчее. )
Маленький трик с посещенными ссылками для “хороших” броузеров.
Update: дал маху - об этом уже написали Посещенные ссылки. Visited links - на Юмэйд. Ничего не воровал - просто дал маху :(.
Ставим галочки
Один из способов красиво выделить посещенные ссылки не используя картинки. Ближе к делу:
- a:visited:after {
- content:”\00A0\2713″;
- }
Или так (так делает Майк Дэвидсон у себя на сайте - разницу будет трудно увидеть ):
- a:visited:after {
- content: “\00A0\221A”;
- font-size: 75%;
- }
Псевдокласс :after работает уже практически везде (кроме сами знаете кого ;)). Таким образом во всех(!ИЕ) броузерах посещенные линки выделятся примерно таким образом(картинки в порядке CSSов):
Вот такие красивые радикальчики-галочки. Среди символов есть и настоящая “галочка” (check mark) - но она, к сожалению, отображается далеко не во всех броузерах..
Если указывать символы не в юникоде, возникают проблемы c броузерами - посему все в таком неочевидном на первый взгляд виде. Однако же работает. А ИЕ… это его проблемы ;)
Вот такой маленький прием - вид конечно на любителя - но я думаю применение не настолько надуманное. Мне лично, очень даже нравится. Если в свободное время я выиграю “бой с ленью” то и себе такие сделаю :).
Ссылки по теме
- Check marking visited links - собственно эту заметку я перевел
- Пример первого CSS кусочка
- Майк Дэвидсон про этот же маленький прием - у него на сайте живой пример второго кусочка CSS
- Символы юникода
- XHTML символы - красиво и удобно
- Более “продвинутый” вариант - с картинками, а не радикалами
то же можно сделать видным и в ie
просто использовать
background: url(”galka.gif”) no-repeat right;
padding-right: 1em;
Возникает другой вопрос - как юзеру понять что ссылки с галками - это посещенные ссылки?
Поймут юзеры.
А если не поймут, то и дефолтные фиолетовые ссылки им не помогут.
Мне честно говоря больше нравится именно то что эта галочка сделана честным шрифтом - и где она ни появись на странице, подстроится под окружающий шрифт.
А насчет понимания - никто ж не говорил что посещенные будем выделять только галочкой - цвет и подчеркивания к нашим услугам…
Какая разница между a:visited и a:visited:after?
В
:after
ты сможешь “сгенерировать” нужное тебе содержимое после ссылки. в то время как в просто :visited - ты можешь работать только непосредственно с самой (посещенной) ссылкой
Псевдокласс :after не поддерживается даже в ИЕ 6.0
Интересно получается :)
Посещенные ссылки. Visited links
Пардон, коллега, - так увлекся зарубежными блогами, что про своих стал забывать…. (. Извини - за всеми не уследил… :(
Пост оставлен 26 октября, 2005 года в 5:42 pm в категории XHTML/CSS, Дизайн - akella сказал(а):
quote—–
Вот такие красивые радикальчики-галочки. Среди символов есть и настоящая “галочка” (check mark) - ***он она***, к сожалению, отображается далеко не во всех броузерах..
quote—–
мне кажется имелось ввиду “но она”, нелепая опечатка…
это в качестве направления к достижению 8)
Спасибо исправил.