Ввод цифровых данных: сравнение настроек браузеров по умолчанию

Спецификации целенаправленно умалчивают о том, как браузерам обращаться с пользовательским интерфейсом. В этой статье мы отдельно рассмотрим <input type="number">, вы будете удивлены, но спецификация говорит:

Спецификация не определяет пользовательский интерфейс, используемый браузерами

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

Разметка

<form>
  <label for="age">Enter your age</label>
  <input type="number" id="age" name="age">
</form>

Просто форма с вводом числовых данных, в демонстрациях на странице я добавил немного CSS, но базовая разметка будет везде одинаковой.

Как это делает Internet Explorer

Internet Explorer дает самое простое отображение по умолчанию среди всех браузеров. Инпут для чисел выглядит также как и простой текстовый инпут. Фактически, Internet Explorer не предлагает нам какой-либо пользовательский интерфейс, за исключением возможности очистить поле ввода от данных. Это достаточно удобная вещь, к сожалению, отсутствующая в других браузерах (иногда встречается в поле поиска type="search").

Как это делает Firefox

В Firefox появляется элемент, отсутствующий в ИЕ: кнопка для пошагового изменения значений или спиннер. В спиннере есть стрелки вниз и вверх, позволяющие соответственно, уменьшать и увеличивать значение.

Удаляется спиннер путем добавления CSS с использованием свойства appearance:

/* Remove controls from Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

К сожалению, мы можем только удалить этот элемент — каких-либо средств по контролю его внешнего вида у нас нет.

Как это делает Safari

Firefox и Safari похожи в обработке числового ввода. И там, и там есть спиннер и нет возможности быстрой очистки поля.

Мы также можем удалить спиннер из Safari, но другим способом, используя Shadow DOM:

/* Remove controls from Safari and Chrome */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: None;
  margin: 0; /* Removes leftover margin */
}

Еще один элемент, который мы можем стилизовать с помощью Shadow DOM это невидимый бокс, окружающий число:

/* Adds a box around the numeric value in Safari and Chrome */
input[type=number]::-webkit-textfield-decoration-container {
  border: 1px #ccc solid;
  background: #efefef;
}

Не будем сейчас обсуждать насколько это полезно. Но по-любому, приятно что Safari (и Chrome) предоставляют больше гибкости, чем предыдущие браузеры.

Как это делает Opera

Также как Firefox и Safari, в Opera есть управляющие элементы для изменения числа. Но Opera отображает их по-другому.

В Firefox и Safari (а также в Chrome) спиннер располагается внутри поля ввода, а в Opera он полностью выносится за его пределы. Еще более примечательным является внешний вид спиннера — две крупные кнопки с раздельными границами. Это уже самостоятельный интерфейс пользователя, расширяющий ширину поля ввода.

Удаление этого интерфейса не такая простая задача, хотя с адаптацией в Opera движка Blink это может вскоре измениться. Сейчас же это делается путем изменения типа формы на text и добавления паттерна, ограничивающего пользовательский ввод только цифрами:

<form>
  <label for="age">Enter your age</label>
  <input type="text" pattern="[0-9]*" id="age" name="age">
</form>

Следующим отличием будет выравнивание цифр по правой стороне. Похожим образом работает Excel, автоматически выравнивая цифры в ячейках по правому краю. Это применяется глобально, но может быть изменено путем увеличения специфичности селекторов.

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

Как это делает Chrome

Chrome оказывается где-то посередине. На первый взгляд, он отображает простое поле ввода, но если перевести курсор в правую часть этого поля, в нем появится спиннер, также как в Firefox и Safari.

Интересно, что Firefox, Safari, Chrome и Opera решили, что инструмент для количественного контроля нужен в пользовательском интерфейсе, в то время как IE не видит в этом необходимости. Chrome выделяется тем, что показывает спиннер только при наведении, скрывая его по умолчанию.

А если мы захотим придать такое же поведение Firefox? Нужно просто удалить элементы управления по умолчанию, как мы делали раньше и затем применить их с псевдо-классами :hover и :focus:

/* Remove controls from Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/* Re-applies the controls on :hover and :focus */
input[type="number"]:hover,
input[type="number"]:focus {
  -moz-appearance: number-input;
}

Хотя Chrome и Safari не настолько похожи между собой, как этого можно было ожидать, оба браузера используют теневой DOM для стилизации и манипуляции полем ввода. Поэтому все манипуляции со стилями поля ввода, которые были упомянуты в разделе о Safari, работают и в Chrome.

Как это делают Mobile Safari и Android

Mobile Safari и Android очень похожи при сравнении лоб в лоб. Оба похожи на ИЕ в том, что не предоставляют дополнительного интерфейса для ввода и отличны от него в том, что также не предоставляют интерфейса для быстрой очистки поля ввода. Из всех браузеров, мобильные демонстрируют самую скудную реализацию полей ввода чисел.

Но они распознают type="number" и после фокуса на поле ввода, сразу предлагают цифровую клавиатуру. Это уже неплохо и показывает важность указания правильного типа вводимых данных для упрощения жизни пользователей.

Результаты

Вот итоговая таблица со сравнением всех браузеров:

Заключение

Различное поведение браузеров может разочаровать. Но мы сталкиваем с ним в самых разных случаях уже долгое время. И так мы находим выходы и хаки.

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