CSS: посещённые ссылки. Visited links

Всё в интернете связанно между собой гиперссылками. Почти каждый переход с одной страницы на другую страницу подразумевает предварительный щелчок мышью по определенной ссылке. Как дать посетителю сайта сигнал о том, что он уже посещал страницу, на которую ведёт определенная ссылка?

Известно достаточно много методов для того, но какой из них самый подходящий? Цветовое определение ссылок? Подчеркивание? Картинка? Не стоит забывать о дальтониках, о карманных компьютерах, и, конечно же, не стоит забывать о браузерах, вернее браузере — всеми любимом ослике — Internet Explorer. Появившуюся седьмую версию этого браузера можно называть уже посолидней — осёл. Но эта тема для отдельной статьи.

Итак, начнём с Якоба Нильсена — признанного эксперта по удобству и простоте. Краткое изложение его статьи по визуализации ссылок (Guidelines for Visualizing Links):

“Текстовые ссылки должны быть цветными и подчеркнутыми для того, чтобы достигнуть необходимой воспринимаемости этих ссылок, хотя существуют несколько исключений.”

По его словам, можно избегать подчеркиваний в навигационном меню сайта и в списках ссылок. При этом посетителю должно быть предельно ясно, какую роль выполняют эти объекты страницы. Например, если для определения ссылок используются красный и зелёный цвета, то необходимо подчеркивать ссылки из-за наиболее распространённых форм дальтонизма.

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

Примерно 74% всех сайтов используют цветовое определение посещённых и не посещённых ссылок. Это хорошая дизайнерская традиция, к которой все привыкли.

Цвет не посещенных ссылок должен быть более ясным, ярким и насыщенным чем цвет посещённых ссылок, которые должны выглядеть более размытыми и тусклыми. Два цвета, различающие один тип ссылок (которые не открывались) от другого типа ссылок (которые открывались ранее), должны быть оттенком одного и того же цвета. Оттенки голубого цвета больше остальных сигнализируют о том, что это ссылка.

Метод Симона Коллисона был признан как один из самых практичных и оригинальных методов. Идея достаточно проста и хорошо подходит для списков со ссылками. На картинке можно увидеть галочку, которая появляется напротив той ссылки, по которой посетитель уже щёлкал мышью или раньше был на странице, куда ведёт адрес ссылки. Весь эффект полностью создается при помощи CSS, т.е. HTML-код страницы остается нетронутым. Если внести некоторые изменения в CSS-код Симона, то этот метод можно применять к обычным ссылкам, которые не находятся в списках. CSS-код этого метода:

ul {
list-style-type:none;
padding:3px;
}

li a {
display:block;
line-height:150%;
width:239px;
background:URL(ticks_grey.gif);
text-decoration:none;
}

li a:link, a:active {
color:#666;
}

li a:hover {
color:#F33;
background-position: 0 -20px;
}

li a:visited {
background-position: 0 -40px;
}

В написанном выше коде роль галочки играет картинка (ticks_grety.gif), которая поднимается вверх (на 20 или 40 пикселей) в зависимости от действия посетителя (в обычном состоянии не посещённой ссылки картинка невидна).

При этом HTML-код страницы выглядит очень просто:

<ul>
<li>адрес ссылки</li>
<li>еще один адрес ссылки и т.д.</li>
</ul>

Посещённые ссылки и CSS-элементы before и after

Internet Explorer тормозит широкое использование уже давно появившихся псевдо-элементов :before и :after, которые идеально выполняют необходимую функцию определения посещённых ссылок. Почти все современные браузеры поддерживают эти элементы.

Для псевдо-элементов :before и :after Майк Дэйвидсон (и несколько людей до него) предложил вместо текста использовать знак корня (радикал) — своеобразная галочка. Но эта галочка является не картинкой, а unicode-символом ( \221A ), который появляется после ссылки, по адресу которой уже был определенный посетитель. Весь код также находиться в CSS-файле и выглядит следующим образом:

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

\00A0 означает непрерывающееся пустой отступ (вместо пробела).

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

Если более подробно изучить тему посещённых ссылок, то возможно эти ресурсы (на английском языке) помогут:

• Change the Color of Visited Links
• Question Time: Visited Links
• The ways to style visited links
• Visited Links — Your Take
• Visited links revisited

Каждый имеет право создавать свой собственный стиль для ссылок, будь то цвет фона, цвет ссылки, подчеркивание, цвет и стиль подчеркивания, галочка, определенный текст или нечто другое. Главное думать и не забывать о самом главном — посетителях вашего сайта.