Пунктирная рамка вокруг ссылок и навигация с клавиатуры

[olegchir]

просто идея: а если самому обдумать навигацию (в каком порядке именно на этой конкретной страничке должны переключаться по Tab ссылки), и после этого реализовать это на Javascript? Да еще как-нибудь красиво, со специальным выделением, по которому ясно понятно что «это было сделано клавиатурой».

[tenshi]

не надо изобретать велосипедов там где они не нужны

[olegchir]

так автоматический обход по ссылкам не даст выбирать их в правильном порядке (а некоторые не выбирать вообще). Невозможно сделать поведение «как в Опере», не говоря уж о чем-то более интересном.

Если бы это был не веб-интерфейс, а обычный виндовый или линуксовый гуй, то там есть такие понятия как порядок обхода, приоритет, участие-неучастие в обходе, участие в обходе только табом, ну и много всего такого. CSS так явно не умеет.

Интересный вопрос с таб-контролами, что с ними делать. Например, если он рисуется на веб-странице с помощью Dojo/Dijit.

еще варинат: прикольно было бы, чтобы активный элемент выделялся зеленой рамочкой и по табу эта рамочка 1) затемняла всю страницу кроме выделенного элемента (как сейчас модно делать для фоток) 2) плавно скользила между выделяемыми элементами (absolute div? flash? canvas?)

[tenshi]

webew.ru/articles/672.webew

[olegchir]

XHTML Strict — только для элементов A, правильно?

[tenshi]

нет, все активные элементы

[olegchir]

сдаюсь ))

просто у меня интерфейс на div'ах, поэтому и фокуситься должны дивы. Поэтому то, что он умеет переключать этот список (кстати, вот точное определение XHTML) никакой радости не приносит.

[olegchir]

Вау )) Спасибо большое за ссылочки…

По тому же прицнипу, что и: http://www.dojotoolkit.org/reference-guide/dijit/index.html (клацаем, скажем, на ссылку dijit.Editor и потом по любой кнопке Example).

[homm]

Если бы это был не веб-интерфейс, а обычный виндовый или линуксовый гуй, то там есть такие понятия как порядок обхода, приоритет, участие-неучастие в обходе, участие в обходе только табом, ну и много всего такого. CSS так явно не умеет.

Ну вобще-то есть свойство tabindex. Но заморачиваться с каждой ссылкой, ясно дело, никому не хочется.

[Zerkella]

В случае, если ссылка не ведет на другую страницу, можно заменить на с курсором в виде руки и прочими свойствами ссылки (подчеркивание, например)

[dohlik]

Интересно, сколько пользователей действительно «навигируют» по ссылкам с помощью клавиатуры? :) Или это некий мифический процент, который придумали, чтобы жизнь медом не казалась…

[homm]

Дело же не в проценте. Сломал правую руку, к примеру (не дай бог, конечно), вот и здравствуй клавиатура :)

[dohlik]

Для серфинга (ИМХО) всегда было достаточно одной руки — так что я мышку возьму в левую ;)

[commartin]

иногда чудо-баннеры с прозрачным фоном закрывают на айфолдере кнопку скачать, и нажать мышкой невозможно. Именно такой метод перемещения и выручает :)

[olegchir]

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

Другое дело, что клавиатурная навигация на большинстве сайтов сейчас просто ужасна.

[waitekk]

ноутбучники и владельцы сломанных мышей смотрят на этот коммент с некой долей негодования

[benone]

ноутбучники скролят эту страничку тачпадом

[waitekk]

многие операции с браузером на ноуте куда удобней делать клавиатурой ) Ctrl+K -> Ctrl + Arrows, Ctrl+L и так далее

иногда на автомате и по страничке табом ходишь, чего уж там

[benone]

Ну да, бывает. Хотя это когда до этого чего-то делал клавиатурой. Например, писал письмо — отправляешь клавиатурой… Или коммент.

[Lordick]

Ох. Спасибо за Ctrl+K. Постоянно, при обращении к быстрому поиску пытался вспомнить хоткей соответствующий, но в результате оказывалось проще ткнуть мышкой :)

[bagyr]

Vimperator, Vimium, Uzbl и иже с ним по вам плачут.

[Maccimo]

Владельцам сломанных мышей стоит прекратить жмотиться и купить-таки не сломанную ;)

PS За последние лет десять не видел ни одной сломанной мыши, обычно их выбрасывают исправными.

[nobr]

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

[bigdogsru]

самый поверхностный пример — флэш отключен, а слой с флэш-баннером закрывает форму, в которую надо ввести данные. Мышью по форме не кликнешь. А табом добраться можно.

[fenris]

нет, ну если придумывать дествительно уникальные жизненые ситуации…

[bigdogsru]

Это не уникальная ситуация. У меня она возникает каждый раз, когда мне нужно что-нибудь скачать с ifolder. Этот сервис обвешан рекламой просто до отвращения, поэтому я туда без флэшблока просто не захожу. И в 90% случаев заблокированный флэш перекрывает форму ввода капчи.

[elkie]

А вот лично я использую эту фокусную рамку для того, чтобы после открытия некоторой ссылки в новом окне и возврата через некоторое время в окно исходное увидеть, на какую ссылку я нажимал последней. Когда ссылок на странице очень много, это может быть проблемой, и рамка реально помогает. Я десять лет пользовался IE 5/6 и привык именно к такой навигации. Перейти на IE 7/8 я так и не смог — не понравились. Firefox/Opera — тоже оказались «не моими». А вот Chrome — неожиданно понравился. И единственная вещь, которая не давала мне перейти на Chrome окончательно, — это отсутствие показа рамка вокруг кликнутой мышью ссылки. Только с релизом Chrome 4 и возможностью написать расширение в три строчки, которое реализует такой функционал на большинстве сайтов (искать в галерее расширений по названию «Visible Clicks»), я смог полностью «переехать». К чему это я?.. Да! Рамка вокруг ссылок — вещь очень полезная не только при навигации с помощью клавиатуры!

[homm]

Обычно для этой цели служит посещенный цвет ссылок. Но вам большое спасибо, отличный пример.

[elkie]

Один и тот же цвет ссылок link и vlink используется на несопоставимо большем числе сайтов, чем отключение фокусной рамки. В разного рода меню ссылки часто бывают другого цвета (например, белые на темном фоне), ссылки также могут оформляться в виде изображений. Кроме того, сама навигация может быть хаотичной, то есть непосещенные и посещенные ссылки могут располагаться в непредсказуемом порядке, ну и рамку часто проще увидеть, чем разницу между, например, #0000ff и #000080… Я не исключаю, что это просто моя личная и редкая привычка, но если я наглядно не вижу, на что кликаю, меня это раздражает. :)

[hybridcattt]

Не только Ваша :)

[ixside]

Я так и не понял, что вы хотите сделать?

[q0p]

впервые в интернете? всем интересующимся это уже давно известно, вы отстали лет на 10

[homm]

А вы попробуйте поискать в гугле, посмотрите, какой способ чаще всего предлагается.
Ну и замечание в стиле зануды: 10 лет назад даже фаерфокса не было, не то что ие8.

[tenshi]

«return !!this.blur()»

[Ag47]

На хабре недавно был плагинчик джиквери небольшой, как раз для случая когда хотим оставить outline при перемещении мышью

darkwire.habrahabr.ru/blog/91341/

На чистом css было бы, конечно, лучше, но…

[Stepuk]

Обратите внимание на то, каким образом автор данной статьи пишет названия веб-браузеров. Названия Firefox'а и Internet Explorer'а он пишет со строчной буквы, а название Opera — с заглавной. Это не только режет глаз, но и даёт основания утверждать, что автор неуважительно и наплевательски относится к разработчикам браузеров, отличных от им (автором) предпочитаемого. Я хоть и сам поклонник Opera, но советую именовать браузеры единым образом в рамках одной статьи. Ну а саму статью оценивать не берусь, так как дальше четвёртого абзаца не читал.

[pepelsbey]

Не снобите, думаю всё гораздо проще.

[Mutyonok]

всемирный заговор! ZOG не дремлет

[homm]

Меня подсознательно останавливает, написать оперу с маленькой буквы, наличие такого слова в русской языке :) Так и быть, исправил.

[proxor]

Такая же проблема возникает с Flash, при клике на нём Fx обводит рамкой. В результате, если флеш на всё окно браузера, то вылезают полосы прокрутки. Решается так же.

[aishek]

Если бороться конкретно с проблемой text-indent, то лучше всего текст ссылки обернуть в еще один элемент с display:none

[homm]

Я даже не знаю, text-indent ли там. Это просто картинка для демонстрации.

[tenshi]

надо просто заверстать нормально и пунктир не будет доставлять неудобств…

[homm]

overflow: hidden, в свою очередь делает невозможным выделение текста за пределами такого элемента в фаерфоксе.

[glazs]

Не люблю людей, уберающих focus. Особнно бесов, делающих это с помощью blur(), повешенного на onfocus. Если он вам не подходит — замените стандартный на что-то вписывающееся в ваш дизайн, что-ли, лично я часто использую для навигации по соседним ссылкам TAB, при возврате на страницу определяю последнюю кликнутую ссылку, определаю, что кликнул ее вообще — мышка есть с нечетким кликом. Еще есть засранцы, создающие элементы управления чем-либо динамическим не с помощью ссылки, а с помощью span, например, получаем те же проблемы.

А еще не люблю людей, заменяющих стандартные select'ы на какую-то разукрашенную ерунду, особенно, если она не фокусится, не управляется с клавиатуры. А выбор пункта по вводу? И сильно-сильно не люблю, когда указывают цвет текста инпута, и не указывают цвет фона, при использовании темной темы, получается нечитаемо. Не даром валидатор ругается на указание цвета текста без указания цвета фона, и наоборот.

Ну что, эта «красота» стоит того?

[homm]

А еще не люблю людей, заменяющих стандартные select'ы на какую-то разукрашенную ерунду

Часто так делают не от хорошей жизни. ИЕ6 не способен располагать элементы над селектом.

[glazs]

Нормальные пацаны знают, что их можно перекрыть iframe'ом.

[homm]

А нормальный пацаны знают, как сделать ифрейм непрямоугольной формы и с полупрозрачными частями?

[glazs]

В ситуациях, когда нужно сверху наложить что-то полупрозрачное, я их просто скрывал. Небольшая потеря для ослофагов, правда?

[homm]

Прозрачность — filter(alpha=0)

полупрозрачными частями

непрямоугольность — комбинация нескольких прямоугольников…

Ну а картинка — комбинация пикселей. Это сколько нужно ифреймов на скругленные уголки и тень в 20 пикселей. Ты же это прекрасно понимаешь, просто поспорить охото.