От автора: стили кнопок — это то, что нередко вызывает вопросы. В HTML есть множество «кнопок». Как переопределить стили кнопок по умолчанию: примеры кода и инструмент тестирования — об этом в статье.
Мы имеем:
<button>Button</button> <input type="button" value="Button">
Плюс, хорошо это или плохо, людям нравится иметь ссылки, которые стилизованы так, чтобы соответствовать внешнему виду других кнопок на сайте.
<a href="#0" class="button">Button</a>
Одна из проблем заключается в том, чтобы все эти элементы выглядели одинаково. Мы рассмотрим несколько способов достижения этого.
Еще одна проблема — заставить людей правильно их использовать
Для меня это стало сюрпризом — но я достаточно часто слышу это, чтобы начать беспокоюсь — все больше и больше разработчиков используют div для кнопок. Как и в других случаях, они просто берут что-то универсальное, для чего можно задать любые стили и подстраивают это по мере необходимости. Энди Белл объясняет, почему настоящая кнопка лучше:
«Итак, элементы button — это головная боль с применением стилей? Это не значит, что вы должны прикрепить события JavaScript к div или <a href=»#»>. Видите ли, когда вы используете кнопку button, вы автоматически получаете события клавиатуры. Вы также помогаете пользователям экранных дикторов, потому что они будут правильно объявлять элемент».
И вот Энди еще предоставляет нам фрагмент CSS, который поможет получить кнопку с аккуратными стилями:
Это определение стилей просто может быть ментальным блоком
Это немного трудно для понимания. Кнопки странные! У них много стилей по умолчанию (которые взяты из «Таблицы пользовательских агентов»), которые варьируются в разных браузерах, и это означает, что вам нужно поработать, чтобы сделать их именно такими, как вам нужно.
Видите эти странности?
Без каких-либо стилей кнопка выглядит немного маленькой и имеет border/border-radius/box-shadow по умолчанию.
Просто установив размер шрифта, мы потеряем все эти значения по умолчанию, но у нее появился новый вид по умолчанию: с границами и квадратным углами, с градиентом фона и без тени. Это по существу -webkit-appearance: button;.
Для кнопок назначено собственное семейство шрифтов, поэтому они не наследуются от каскада, если вы не укажете это явно.
Вот таблица стилей для кнопок пользовательского агента Chrome:
Firefox все по-другому. В видео выше установив border: 0; мы удалили границу в Chrome — но также и фон? В Firefox не так:
Я только указываю на эти моменты, чтобы донести следующую мысль: я понял, что кнопки действительно ведут себя странно в браузерах. Если еще принять во внимание дюжину других браузеров, мобильных устройств и то, что мы хотим, чтобы все эти разные элементы выглядели одинаково (см. начало статьи), и я по-хорошему начинаю понимать тех людей, которые не хотят иметь с этим дело.
Никогда не лишне проконсультироваться с Normalize
Normalize делает довольно много полезной работы:
/** * 1. Изменяет стили шрифтов во всех браузерах. * 2. Удаляет отступы в Firefox и Safari. */ button,
input,
optgroup,
select,
textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */
} /** * Показывает выходящий за границы контент в IE. * 1. Показывает выходящий за границы контент в Edge. */ button,
input { /* 1 */ overflow: visible;
} /** * Удаляет наследование преобразования текста в Edge, Firefox и IE. * 1. Удаляет наследование преобразования текста в Firefox. */ button,
select { /* 1 */ text-transform: none;
} /** * Корректирует невозможность задать стили для кликабельных типов в iOS и Safari. */ button,
[type="button"],
[type="reset"],
[type="submit"] { -webkit-appearance: button;
Я был немного удивлен, узнав, что стили форм не распространяются на кнопки — это действительно странно. Но в элементах форм есть и другие, более странные вещи.
Тестирование стилей
Я чувствую, что решение данной проблемы — все же большой блок CSS. Это то, что предоставил Энди, и вы, скорее всего, придете к нему самим, просто поработав немного тяжелее, чем обычно, чтобы установить правила стилей для кнопок.
Тем не менее, я чувствовал себя обязанным создать небольшой инструмент для тестирования, чтобы вы могли включать и выключать стили и видеть, как все они объединяются в любом браузере:
A11y
Самая главное здесь — использовать правильные оригинальные элементы, поскольку вы получаете кучу функционала и доступности по умолчанию. Но вы также можете получить и нужные стили!
Пока мы говорим о кнопках, я буду использовать ту же цитату, что и в нашем посте на MDN «Когда использовать элемент Button»:
Предупреждение: будьте осторожны при маркировке ссылок с помощью role button. Ожидается, что кнопки будут запускаться с помощью клавиши «Пробел», а ссылки — с помощью клавиши «Ввод». Другими словами, когда ссылки используются, чтобы вести себя как кнопки, добавление только role=»button» не является достаточным. Также необходимо добавить обработчик ключевого события, который прослушивает клавишу «Пробел», чтобы обеспечить соответствующее поведение.
Вам не нужно указывать role=»button» для button, потому что эти элементы уже являются кнопками, но если вы собираетесь сделать любой другой элемент, похожим на кнопку, вам нужно сделать больше, чем просто имитировать функционал.
Кроме того, не забывайте о стилях :hover и :focus! Как только вы разберетесь в стилях для состояния по умолчанию, это не должно составить вам труда, но они определенно будут вам нужны!
button:hover,
button:focus { background: #0053ba;
} button:focus { outline: 1px solid #fff; outline-offset: -4px;
} button:active { transform: scale(0.99);
}
Автор: Chris Coyier
Источник: https://css-tricks.com/
Редакция: Команда webformyself.