Проблемы с закругленными кнопками
От автора: хотя плоские, минимальные интерфейсы были в моде в течение большей части десятилетия, чисто прямоугольные кнопки не так распространены, как вы думаете. Такие дизайнеры, как я, часто «закругляют» углы, которые могут сделать интерактивный элемент менее привлекательным для клика.
Иногда мы округляем их чуть-чуть, смягчая очертание, но не теряя прямоугольника. Но в других случаях мы увеличиваем эти радиусы до тех пор, пока не сойдутся углы, образуя полукруг на каждом конце… форму «таблетки». Элементы в форме таблеток имеют дополнительное преимущество, заключающееся в плавном сворачивании в круг там, где есть недостаток пространства и доступна иконография.
В CSS мы создаем этот вид, устанавливая для элемента border-radius. Чем больше значение, тем больше скруглены углы. Просто, правда?
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Проблема 1: Размер целевого элемента при нажатии / клике
Легко забыть, что border-radius это не чисто визуальное изменение … эти потерянные угловые пиксели больше не кликабельны! Для меньших значений border-radius или более широких кнопок эта потеря в размере касания может быть незначительной. Но идеально круглая кнопка потеряет более 20% площади интерактивной поверхности в закругленных углах!
Проблема 2: Обрезка содержимого в IE11 и Safari
В дополнение к уменьшению площади интерактивной поверхности элемента Internet Explorer 11 также действует так, как будто для свойства overflow элемента button установлено значение hidden. Это может вызвать непреднамеренное обрезание наложенных элементов, таких как иконки уведомлений.
Подобная проблема также может возникать в Safari, но только для дочерних элементов с position отличным от relative или absolute.
Решение проблем
Мы можем решить эти проблемы, изменив макет несколькими способами. Сначала мы введем «внутренний» элемент, который представляет визуальную форму таблетки без уменьшения площади поверхности родительского элемента. Это также решит проблему обрезки в IE11, и сделает видимыми все иконки или другие наложения вне таблетки: