среда, 12 ноября 2008 г.

CSS: удаление обводки активной ссылки в Firefox

У Firefox есть такая забавная черта -- в дополнение ко всему подсвечивать активную ссылку пунктиром. Не то, чтобы это сильно напрягало, но смотрится неаккуратно.
Активная ссылка в Firefox подсвечивается пунктиром
Удалить подсветку активных ссылок поможет небольшое CSS-правило:
a:active {
outline: none;
}

И еще стоит можно создать такое же правило для псевдокласса :focus. В итоге у меня CSS для удаления пунктирной обводки в Firefox выглядел так:
a:active, a:focus {
outline: none;
}

Upd: Тем не менее не рекомендую вам задавать это правило для псевдокласса :focus. Как верно заметил анонимный комментатор, судя по всему – знаток «основ юзабилити интерфейсов» и владелец поломанной мыши: это сделано для того, чтобы можно было ходить по странице без мышки - с помощью клавиши Tab. Например, если у пользователя поломалась мышка, или (не дай бог конечно) правая рука.

Если вам все-таки хочется избавиться от рамки, позаботьтесь о пользователях, обозначив выделенные ссылки каким-нибудь другим способом. Например – цветом фона:

a:focus {
outline: none;
background-color: #FEFF9F;
}

Лично я это правило просто исключил. Но окончательный выбор по-прежнему за вами.


5 Комментариев :

Анонимный комментирует...

А вы задумались хоть на секунду - зачем сделана эта "забавная черта"? Это сделано для того, чтобы можно было ходить по странице без мышки - с помощью клавиши Tab. Зачем это нужно - например, у пользователя поломалась мышка, или поломалась правая рука - такое тоже бывает. Попробуйте походить по ссылкам этого сайта пользуясь только клавиатурой - и сравните, например, с яндексом. Если вы скажете "это никому не нужно" - значит вы не понимаете основ юзабилити интерфейсов. Очень советую не выкладывать в сеть рекомендаций по вопросам, в которых вы не разобрались.

Croaker комментирует...

Вот еще одна причина, почему стоит по возможности разрешать анонимные комментарии.

Спасибо, Анонимный, за совет. Я действительно не учел этот момент при создании стилей для блога. Что же касается рекомендаций, то почему бы им не быть? Опять же, обратил бы я внимание на эту особенность, если бы вы мне не подсказали?

«Проблема сломаной мыши» решится, если не задавать это правило для псевдокласса :focus. Тогда при выделении мышью рамки не будет, а при Tab-переходах рамка вокруг ссылки будет отображаться.

Анонимный комментирует...

Спасибо за адекватную реакцию на критику и стремление к истине. Ваше решение отлично подходит. Я не являюсь таким уж знатоком юзабилити, тем не менее с некоторых пор интересуюсь этим вопросом. Могу посоветовать всем желающим ознакомится с работами "гуру юзабилити" Якоба Нильсена - в сети много его материалов. P.S. Мой комментарий был резкий - прошу прощения если вас задел. Просто не раз уже сталкивался с похожими ситуациями. Удачи!

Croaker комментирует...

Часто не получается учесть все детали, так что конструктивная критика оказывается весьма кстати. Спасибо.

fitless.ru комментирует...

Спасибо, совет полезный, а то у меня дизайн едет при нажатии на ссылку-картинку в ФФ :)

Отправить комментарий

Жги!