|
Всем знакома точечная рамка, которой IE обводит периметр графических ссылок при клике? Точно такую же отображает Firefox (в том числе вокруг обычных текстовых линков). У этой рамки два есть два предназначения. Первое состоит в том, чтобы продемонстрировать реакцию интерфейса на пользовательское действие, обеспечив визуальную обратную связь. Второе — в том, чтобы выделить активный в данный момент элемент страницы. Это востребовано, если навигация осуществляется не мышью, а с клавиатуры, и старательный пользователь выбирает ссылку для перехода многократными нажатиями Tab.
Не смотря на эту функциональность, иногда возникают ситуации, когда отображение рамки остается нежелательным по эстетическим причинам. Например, вокруг логотипа сайта, или иных крупных элементов веб-страницы.
В такой ситуации рамку можно отключить. Раньше я использовал для этого функцию JavaScript blur():
<h1><a href="/" onclick="this.blur();"><img ... /></a></h1>
А сегодня нашел еще один более лаконичный вариант, основанный на CSS2. А именно, на свойстве ouline, которое как раз предназначено для настройки деталей отображения рамки вокруг ссылок. Код очень простой:
a:active, a:focus, img { outline: 0; }
Проверено в актуальных версиях IE и Firefox. Есть некоторые подозрения на счет IE6, т.к. в нем традиционно ничего не работает как должно. Но под рукой этого браузера сечас нет. Такие дела.
Написать комментарий
| 
# Артём Курапов: (27 марта, 2008 @ 15:15)
Спасибо, как раз раздражало что прозрачная картинка поверх фонового div’а обводится этим пунктиром.
# Павел Димитриев: (28 марта, 2008 @ 06:30)
Мне наоборот, эта обводка картинок и ссылок очень кстати, т.к. я в основном перехожу по нужным (интересным) ссылкам с помощью right-click -> open in a new tab, и старый таб остается. скажем, я открыл 10 ссылок (читай – табов) с одной страницы, перечитал их и вернулся на первую ту страницу и уже не помню, по какой ссылке я переходил в последний раз. А так – ссылка обведена и сразу понятно, что открывалось последним.
# admin: (28 марта, 2008 @ 06:46)
Павел Димитриев: Разумно. Но я и не призывал прятать обводку для всех ссылок без исключения. Хотя, вероятно, так можно было подумать по CSS коду из примера. На самом деле я сам применяю такие селекторы только с уточнение по классу или ID. Например, для крупных графических элементов типа логотипа сайта, где рамка выглядит неуместно. Кстати, быстрее открывать новые окна по Ctrl-RClick (или Ctrl-Shift-RClick – в зависимости от браузера).
# Мрконич: (22 мая, 2008 @ 15:46)
Подозрения насчет ИЕ6 были правильные ….
# Octane: (13 июня, 2008 @ 20:53)
>> outline: 0; Мне кажется правильнее писать:
outline: none;, т.к. outline может содержать группу параметров.# Евгений Младший: (14 августа, 2008 @ 19:34)
Огромная благодарность в Ваш адрес, долго искал, как избавиться от выделения в Firefox’е!!!! Спасибо!!!
# Kotomka: (21 августа, 2008 @ 21:15)
Люди, помогите – а куда код писать (a:active, a:focus, img { outline: 0; }?
# admin: (21 августа, 2008 @ 21:33)
Kotomka: Писать можно, например, внутри элемента style. Вот здесь все описано: http://www.w3.org/TR/REC-html40/present/styles.html
# Kotomka: (21 августа, 2008 @ 21:42)
Там – на английском, а я ничего не понимаю в CSS2. Не могли бы Вы подробней написать, а то я человек – не знающий… Мне нравится Firefox, но “все” портит эта рамка…
# admin: (22 августа, 2008 @ 09:00)
Kotomka: Русский перевод спецификации довльно несложно найти: http://loc.stack.ru/projects/CSS2/cover.html А вообще, стоит начать с английского языка. После его изучения, понимание CSS придет само (:
# Kotomka: (22 августа, 2008 @ 13:39)
Нужна какая то программа, чтбы написать a:active, a:focus, img { outline: 0; }? Или скачать дополнение для Firefox?
# Kotomka: (25 августа, 2008 @ 00:05)
Спасибо, помогли :( – ничего не понял!
# Дархан: (8 июня, 2009 @ 16:47)
Спасибо! в огненном лисе все прекрасно, в ишаках как всегда осталось
# девятый: (7 июля, 2009 @ 14:59)
Долго искал, нашёл тут, без излишеств и фсякой ерунды. очень помогло, спасибо. кстати можно использовать с фоном и подсветить сам линк.
# девятый: (7 июля, 2009 @ 15:02)
a:focus, a:active { outline: 0px; color: #00FF00; background-color: #000000; }
# Mihas: (24 июля, 2009 @ 13:04)
Kotomka: это для веб-разработчиков, а не в настройках браузера..
# киря: (27 мая, 2010 @ 08:29)
спс)
# Гена: (26 июня, 2011 @ 20:40)
есть ещё одно решение: к элементу img поствить параметр border=0 :)
# всю_ночь_верстаю: (3 февраля, 2012 @ 05:11)
гена ты бог!