Якоря на странице, псевдокласс :target и юзабилити.

10.02.2008 браузеры, usability

Примерно год назад Якоб Нельсон опубликовал статью под названием Avoid Within-Page Links, рекомендующую не использовать якори внутри страницы.

Хотелось бы отметить следующие моменты, которые действительно вызывают неудобства:

1. Переход по такой ссылке ведет к некоторой дезориентации, а соответственно к потере контроля над выполняемым действием. Т.е. переходя по такой ссылке экран меняется, но понять где мы оказались, бывает сложно, особенно, если текст насыщен заголовками и абзацами.
2. Из-за «прыжка» экрана первоначально создается впечатление, что мы перешли на другую страницу, хотя по-прежнему находимся на этой же. Ссылка назад НЕ приведет нас на предыдущую страницу, мы только вернемся в то место, откуда жали на якорь. Проблема здесь в том, что при переходе по такой ссылке мы не наблюдаем скролла страницы (заметен только скачок и смена экрана).

Первое неудобство можно решить визуально обозначив нашу цель (target) при помощи CSS3 и псевдокласса :target

Вторая проблема, связанная со скачком экрана решается с помощью JavaScript. Пользователи, у которых браузеры не поддерживают CSS3 или отключена поддержка JavaScript конечно же не увидят улучшения юзабилити, но и юзабилити в этом случае никак не ухудшится.

Разметка

Когда-то якоря внутри страницы задавались либо просто пустыми ссылками, либо пустыми ссылками внутри семантических элементов:

<a name="about" id="about"></a>

<h2><a name="start" id="start">Заголовок цели </a></h2>

Естественно, подобная разметка вызывает, во-первых неудобства стилизации страницы, например, если вы задали единый стиль для ссылок на странице и во-вторых, в XHTML атрибут name является нежелательным (http://www.w3.org/TR/xhtml1/#C_8)

Если вы хотите идентифицировать заголовок или контейнер (div) лучше воспользоваться атрибутом id:

<h2 id="start">Заголовок цели</h2>

Идентификация якорей

Цели (targets) очень просто обозначить с помощью CSS. В CSS3 существует достаточное количество псевдоэлементов и псевдоклассов, поддерживаемых современными браузерами, в частности псевдокласс :target. поддержка данного псевдокласса реализована в след браузерах: Opera 9.5 Kestrel, Firefox и Safari.

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

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

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

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

В общем, думаю идея понятна. Пробуйте экспериментировать.

Плавный scrolling

Вторая обозначенная проблема — это резкий скачок в пределах нашей страницы. Данная проблема была замечена в 2003 году, тремя годами ранее опубликованной Нельсоном статьи, и Стюарт Лэнгридж (Stuart Langridge) написал скрипт под названием Smoothscroll, распространяемый по лицензии MIT (см. http://www.kryogenix.org/code/browser/licence.html). Скрипт рассчитывает расстояние между ссылкой и целью и скролит страницу со скоростью, зависящей от расстояния.

Следующие примеры, с несколько измененным скриптом работают в Opera, Firefox и IE:
Пример 1 (smooth scrolling demo 1)
Пример 2 (smooth scrolling demo 2)

Кроме этого, плавную прокрутку можно устроить при помощи mootools library (проблема плавного скроллинга страницы не осталась без внимания). Есть и недостатки в данных скриптах, при нажатии на кнопку «назад» url в адресной строке меняется, а экран не возвращается в прежнее положение, что вызывает еще большую путаницу. Хотя работы над решением этой проблемы ведутся.

Пользователям Internet Explorer

IE конечно же не поддерживает :target. Если используется скрипт Smoothscroll, то проблема решается простым добавлением класса:

*:target, .IE-target {
  background-color: pink;
}

Данным скриптом лучше всего пользоваться для создания fadeout эффектов, во всех остальных случаях, с закрашиванием фона, придется добавлять скрипт, который удалит заданный класс со «старых» целей. Браузеры с поддержкой :target автоматически переносят псевдокласс с одного элемента на другой.

И последнее замечание для пользователей IE. Переход по ссылкам-якорям с помощью клавиатуры не работает. Актуально для людей с ограниченными возможностями. Данная проблема и пути ее решения описаны в статье Keyboard Navigation and Internet Explorer.

Источники:

• Stay on :target
• Improving the usability of within-page links