Расширение области, реагирующей на щелчок мыши

Оцените материал
(0 голосов)

Проблема

Если вы интересуетесь вопросами взаимодействия с пользователем, то наверняка слышали о законе Фиттса. Впервые предложенный американским психологом Полом Фиттсом (Paul Fitts) еще в 1954 году, закон Фиттса гласит, что время, необходимое для быстрого перемещения в целевую область, представляет собой логарифмическую функцию отношения между расстоянием до цели и шириной цели. Его наиболее часто используемая математическая формули ровка выражается как

, где T — затраченное время, D — расстояние до центра цели, W — ширина цели, а a и b — константы. Хотя графические интерфейсы пользователя в то время еще не существовали, закон Фиттса распространяется в том числе и на координатно-указательные устройства, а сегодня стал самым известным принципом человеко-машинного взаимодействия (Human-Computer Interaction, HCI). Возможно, поначалу это может казаться чем-то удивительным, но помните, что закон Фиттса в большей степени относится к человеческим моторным навыкам, чем к конкретному аппаратному обеспечению. Очевидное следствие данного закона состоит в том, что чем больше цель, тем проще в нее попасть. Следовательно, расширение области, реагирующей на щелчки мыши (области попадания), вокруг небольших элементов управления, с которыми в противном случае может быть сложно взаимодействовать (а увеличить их невозможно), зачастую повышает удобство использования.Это становится тем важнее, чем большую популярность завоевывают сенсорныеэкраны. Никому не нравится тыкать пальцем в экран десять раз подряд, чтобы попасть в эту мерзкую маленькую кнопочку, и все же подобные ситуации возникают каждый день. В других сценариях мы хотим, чтобы элемент выдвигался, когда пользователь подводит указатель мыши к краю окна, — как, например, в случае с автоматически скрываемым заголовком, который выскальзывает из-под верхней кромки при приближении указателя мыши. Это также включает необходимость увеличения области попадания (но только в одном направлении). Возможно ли это средствами чистого CSS?

Решение

Предположим, что у нас есть простая кнопка, например как показанная на рисунке, и мы хотим увеличить ее область попадания на  10px во всех направлениях. Мы уже применили к ней некоторую стилизацию, а также добавили курсор  cursor:pointer (про то как задать стили для курсора читайте здесь) , который не только обеспечивает возможность  взаимодействия с помощью мыши, но и помогает проверить, где действительно начинается область попадания. Самый простой способ расширить область попадания — создать прозрачную сплошную рамку, так как, в отличие от контуров и теней, взаимодействие мыши с рамками заставляет срабатывать события мыши на элементе. Например, для расширения области попадания элемента на  10px во всех направлениях достаточно такого простого кода:
border: 10px solid transparent;

Однако, как видно на рисунке, это плохое решение, так как оно заставляетнашу кнопку увеличиваться!

Причина кроется в том, что фоны по умолчанию в сфере удобства использования термин «возможность» (affordance) обозначает, что элемент управления дает очевидную видимую подсказку о том, каким образом мы можем с ним взаимодействовать. Например, объемный вид кнопки подсказывает, что на кнопку можно нажать, а вид дверной ручки намекает, что за нее можно потянуть или повернуть ее. Среди профессионалов не прекращаются дискуссии, следует ли считать изменение формы указателя мыши возможностью или визуальным ответом растягиваются на размер рамки. Старое доброе свойство  background-clip помогает ограничить фон предназначенным специально для него пространством:

border: 10px solid transparent;
background-clip: padding-box;

Как подтверждает рисунок, это решение прекрасно работает.

Но только до тех пор, пока у вас не возникнет необходимость создать настоящую рамку вокруг кнопки и вы не поймете, что уже использовали единственную доступную вам рамку для расширения области попадания. Что же делать? Все просто: вы можете имитировать (сплошную) рамку с помощью внутренней тени:
border: 10px solid transparent;
box-shadow: 0 0 0 1px rgba(0,0,0,.3) inset;
background-clip: padding-box;

ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/hit-area-border

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

box-shadow: 0 0 0 1px rgba(0,0,0,.3) inset, 0 .1em .2em -.05em rgba(0,0,0,.5);

Но если применить эту стилизацию, результат будет совершенно не похож на ожидаемый.

Это решение далеко от идеала и по другим причинам. Рамки влияют на разметку, что в определенных случаях может быть неприемлемо. Что же делать?
Можно удалить рамку и воспользоваться преимуществом того факта, что псевдоэлементы также захватывают взаимодействия с мышью, определенные для их родительских элементов. Затем мы можем наложить на нашу кнопку прозрачный псевдоэлемент, превышающий ее по размеру на 10px в каждом направлении:

button {
position: relative;
/* [остальные стили] */
}
button::before {
content: '';
position: absolute;
top: -10px; right: -10px;
bottom: -10px; left: -10px;
}

Это прекрасно работает, и пока ни один из псевдоэлементов больше никак не используется, эта кнопка ничему не мешает. Решение с псевдоэлементом необычайно гибкое — мы могли бы создать область попадания любого размера и формы и в любом месте, где только пожелаем, даже в стороне от самого элемента!

ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/hit-area

Десерт на сегодня - видео о том, как учитель приветствует каждого ученика перед уроком.

Прочитано 267 раз
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

Поиск по сайту

Связной трэвел

Google+