Максимизация области для нажатия на cсылках

В данном уроке мы рассмотрим небольшой трюк, который поможет увеличить область для нажатия для ссылок. Зачем? Большая область существенно упрощает пользователям переход по ссылкам, что повышает уровень удобства использования интерфейса веб проекта.

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

demosourse

Обычная ссылка в тексте выглядит так:

<элемент>
  Для получения подробных сведений, пожалуйста, <ссылка>свяжитесь с нами</ссылка>.
</элемент>

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

<ссылка>
  Для получения подробных сведений, пожалуйста, <элемент>свяжитесь с нами</элемент>.
</ссылка>

И действительно, код в демонстрации выглядит так:

<a href="#" id="large-hit">
	Для получения подробных сведений, пожалуйста, <span>свяжитесь с нами</span>
</a>

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

/* Стиль для ссылки и выделенной части большой области */
a,
#large-hit span{
	color:#c00;
	text-decoration:none;
	font-weight:bold;
}

/* Изменения при наведении курсора мыши на ссылку и на большую область */
/* В большой области изменения касаются только выделенной части */ 
a:hover,
#large-hit:hover span{
	text-decoration:underline;
}

/* Стиль для параграфа и большой области (общие правила)*/
p,
#large-hit{
	font-size:3em;
	line-height:1em;
	padding:10px;
	background:#e4e4e4;
}

/* Стиль для большой области, чтобы сделать ее похожей на обычный текст*/
#large-hit{
	text-decoration:none;
	color:#333;
	font-weight:normal;
	display:block;
}

Теперь наша ссылка выглядит так же, как и обычный текст, а выделенная с помощью элемента span часть - как ссылка в тексте. При наведении курсора выделенная часть реагирует как обычная ссылка, а переход осуществляется по нажатия в любой части большой области.

Вот так несколько строк на CSS и небольшое изменение разметки может существенно изменить уровень удобства использования интерфейса. Такой трюк может особенно пригодиться при разработке варианта дизайна  для мобильных устройств с их маленькими дисплеями. 

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: csswizardry.com/2011/01/maximising-hit-area-for-usability/
Перевел: Сергей Фастунов
Урок создан: 19 Января 2011
Просмотров: 21479
Правила перепечатки


5 последних уроков рубрики "CSS"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 19 Января 2011 14:41
    MopuC
    Не знаю как вам, а мне стало неуютно от такого трюка :)
  • 19 Января 2011 14:45
    eko24ive
    Был уже такой урок
    • 19 Января 2011 17:35
      ???_Pyinto_??
      Ну для рекламы подойдёт
      • 23 Января 2011 11:35
        eko24ive
        )
  • 19 Января 2011 15:21
    HitMax
    Смысл? В чем смысл? Неудобно, некрасиво, непривычно - в общем бред. ИМХО. Это ж кем надо быть, или в каком состоянии, что бы промахнуться по нормальной ссылке, которая даже дефолтно выделяется довольно ярко? Оо
  • 19 Января 2011 17:46
    p0staltomsk
    нелепость. в топку адскую
  • 19 Января 2011 18:21
    grifin
    Незнание к чему применить не означает, что урок плохой. Очень даже удобно, а если есть смекалка то и применить можно удачно.
  • 19 Января 2011 18:50
    budzin
    Брееееед!
  • 19 Января 2011 21:09
    Overlord888
    я даже смысла не понял...
  • 19 Января 2011 21:33
    handscreative
    Если не шарите, не говорите. Иногда очень полезно... эргономика...
  • 19 Января 2011 21:47
    Kilo
    Например можно использовать в слайдере. Или какие-нибудь блоки\контейнеры.
  • 19 Января 2011 21:59
    da_lamber
    А Мне нравится
  • 20 Января 2011 01:26
    CURT
    Для чего етот урок? для кого?? ето всем известно.. елементарно... полный бред! еще б зделали урок как текст зделать жирным или курсивом
  • 20 Января 2011 01:43
    gigeldaniel
    handscreative, +1
  • 20 Января 2011 17:51
    Александр Головизнин
    HitMax и другие! юзеры разные бывают! не нужно? думаете на вашем только школота меткая сидит?
  • 25 Января 2011 23:26
    gigeldaniel
    вот, был ещё вариант: http://ruseller.com/lessons.php?rub=32&id=360
  • 26 Января 2011 14:58
    notbot
    - был - элементарно просто
  • 26 Января 2011 16:11
    genixxx
    Есть в сети «дятлы», если хочешь чтобы «дятел» гарантированно перешел по ссылке — вот решение :)
  • 17 Февраля 2011 08:48
    Наталья Митрофанова
    Спасибо! Интересный сайт, любопытный способ авторизоваться
  • 18 Мая 2011 16:50
    makdoom
    Мне вот очень понравился урок спасибо. т.к. для меня это урок т.к. специального образования у меня нет и с большой благодарностью читаю чем делиться человек чего я не знаю и совершенно бесплатно. Еще раз спасибо за ваш труд.
^ Наверх ^