Думаю, все знают, что это такое. Некоторые браузеры, в частности, Фаерфокс и Интернет Эксплорер 8 рисуют однопиксельную пунктирную рамку вокруг ссылок и внутри кнопок, когда пользователь нажимает на них. Если сайт состоит из голого html, скорее всего, дискомфорта они не доставят. Но если все ссылки как-то стилизованны, вам (или вашему дизайнеру), скорее всего захочется избавиться от этого. Тем более, что эта рамка может отобразиться в неподходящем месте:
Эта рамка есть ни что иное, как css-свойство outline, поэтому самый первый и чаще всего рекомендуемый способ, позволяющий отключить эту рамку у ссылок — указать нехитрое css-правило:
Но, как можно догадаться, просто взять и убрать её нельзя, потому что эта рамка обозначает фокус на активном элементе. Когда вы работаете мышкой, эта функция может показаться совершенно бесполезной — и так понятно, что активный элемент тот, что под курсором. Но при навигации с клавиатуры, эта рамка позволяет узнать, какой элемент сейчас имеет фокус. При применении указанных выше правил в Фаерфоксе и ие8, ссылки по-прежнему будут участвовать в обходе по клавише tab, но понять, какая ссылка выделена, будет невозможно.
В других системах реализованы другие модели поведения. Самый первый подход, который бы хотелось отметить — это стандартное поведение виндовс ХП и выше — по умолчанию фокус на контроллах не рисуется. Но, при первом нажатии клавиши tab фокус появляется и уже не пропадает. Такое же поведение свойственно браузерам Интернет Эксплорер 6 и 7. Другой подход у Оперы. Она не считает, что по ссылкам нужно перемещаться с помощью клавиши tab, переводя фокус только на контроллы форм. А по ссылкам позволяя делать навигацию при помощи других механизмов — шифт + стрелки или контрол + стрелки. При таком подходе css-свойство outline для ссылок не имеет значения.
Понятно, что добиться поведения Оперы врядли возможно, да и не нужно, оно будет непривычно пользователям этих браузеров. А вот попробовать эмулировать поведение Интернет Эксплорера 6 и 7 можно. Для этого можно убирать рамку не просто на фокус, а непосредственно во время нажатия. Как известно, помимо псевдокласса :focus существует еще один — :active. Он отвечает за состояние ссылки между событиями mousedown и mouseup. Если повесить на него то же outline: none, то рамка не будет появляться в момент нажатия с помощью мыши. Зато будет появляться сразу после отпускания, потому что ссылка будет в фокусе. Это можно решить, убрав рамку и для наведенного элемента, т.е. код будет таким:
Этот способ советует применять Patrick H. Lauke, веб-евангелист Оперы софтвер (Пепелсбей, привет!). Но это все равно оставит два неприятных момента: фокус по прежнему никуда не денется, и после отвода мышки снова появится. Поэтому, если ссылка обрабатывается джаваскриптом, а не ведет на другую страницу, следует сбрасывать с нее фокус после нажатия. Второй момент — при навигации с клавиатуры фокус будет пропадать, как не сложно догадаться, при наведении мыши.
Все сведения по поведению фокуса можно свести в одну таблицу:
Отсутствие зеленых кружочков в последнем столбце — хороший результат.
Возможный вариант решения проблемы — полностью отказаться от пунктирной рамки фокуса и сделать изменение цвета фона или что-то еще. Такой вариант может не так плохо смотреться при взаимодействии с помощью мыши. Минус решения — при недостаточном выделении беглого взгляда будет недостаточно, чтобы определить ссылку в фокусе.
Когда ищешь решение подобных проблем, все время возникает ощущение, что борешься с ветряными мельницами. Браузеры уже давно стали целой экосистемой своих особенностей и уникальных мелочей. И пользователи, выбирая браузер, выбирают все эти мелочи поведения. Возможно, лучшим решением был бы отказ от попыток изменить то, что выбрали пользователи. А если, вдруг, какая-то из таких мелочей не нравится большинству пользователей браузера, возможно стоит изменить это именно в браузере? Картинка от xkcd в тему.
Эта рамка есть ни что иное, как css-свойство outline, поэтому самый первый и чаще всего рекомендуемый способ, позволяющий отключить эту рамку у ссылок — указать нехитрое css-правило:
a:focus {
outline: none;
}Или даже такое:a {
outline: none;
}Но, как можно догадаться, просто взять и убрать её нельзя, потому что эта рамка обозначает фокус на активном элементе. Когда вы работаете мышкой, эта функция может показаться совершенно бесполезной — и так понятно, что активный элемент тот, что под курсором. Но при навигации с клавиатуры, эта рамка позволяет узнать, какой элемент сейчас имеет фокус. При применении указанных выше правил в Фаерфоксе и ие8, ссылки по-прежнему будут участвовать в обходе по клавише tab, но понять, какая ссылка выделена, будет невозможно.
В других системах реализованы другие модели поведения. Самый первый подход, который бы хотелось отметить — это стандартное поведение виндовс ХП и выше — по умолчанию фокус на контроллах не рисуется. Но, при первом нажатии клавиши tab фокус появляется и уже не пропадает. Такое же поведение свойственно браузерам Интернет Эксплорер 6 и 7. Другой подход у Оперы. Она не считает, что по ссылкам нужно перемещаться с помощью клавиши tab, переводя фокус только на контроллы форм. А по ссылкам позволяя делать навигацию при помощи других механизмов — шифт + стрелки или контрол + стрелки. При таком подходе css-свойство outline для ссылок не имеет значения.
Понятно, что добиться поведения Оперы врядли возможно, да и не нужно, оно будет непривычно пользователям этих браузеров. А вот попробовать эмулировать поведение Интернет Эксплорера 6 и 7 можно. Для этого можно убирать рамку не просто на фокус, а непосредственно во время нажатия. Как известно, помимо псевдокласса :focus существует еще один — :active. Он отвечает за состояние ссылки между событиями mousedown и mouseup. Если повесить на него то же outline: none, то рамка не будет появляться в момент нажатия с помощью мыши. Зато будет появляться сразу после отпускания, потому что ссылка будет в фокусе. Это можно решить, убрав рамку и для наведенного элемента, т.е. код будет таким:
a:active, a:hover {
outline: none;
}Этот способ советует применять Patrick H. Lauke, веб-евангелист Оперы софтвер (Пепелсбей, привет!). Но это все равно оставит два неприятных момента: фокус по прежнему никуда не денется, и после отвода мышки снова появится. Поэтому, если ссылка обрабатывается джаваскриптом, а не ведет на другую страницу, следует сбрасывать с нее фокус после нажатия. Второй момент — при навигации с клавиатуры фокус будет пропадать, как не сложно догадаться, при наведении мыши.
Все сведения по поведению фокуса можно свести в одну таблицу:
Отсутствие зеленых кружочков в последнем столбце — хороший результат.
Что еще можно сделать
Возможный вариант решения проблемы — полностью отказаться от пунктирной рамки фокуса и сделать изменение цвета фона или что-то еще. Такой вариант может не так плохо смотреться при взаимодействии с помощью мыши. Минус решения — при недостаточном выделении беглого взгляда будет недостаточно, чтобы определить ссылку в фокусе.
Небольшое лирическое отступление
Когда ищешь решение подобных проблем, все время возникает ощущение, что борешься с ветряными мельницами. Браузеры уже давно стали целой экосистемой своих особенностей и уникальных мелочей. И пользователи, выбирая браузер, выбирают все эти мелочи поведения. Возможно, лучшим решением был бы отказ от попыток изменить то, что выбрали пользователи. А если, вдруг, какая-то из таких мелочей не нравится большинству пользователей браузера, возможно стоит изменить это именно в браузере? Картинка от xkcd в тему.
