Новые дефолтные курсоры над полями форм
Не знаю, застали вы или нет, но раньше мы очень много спорили, нужно ли ставить cursor: pointer для <button>. Холивар заключался в том, что по умолчанию у кнопок стоит курсор default и это якобы соответствует поведению нативных приложений. Другие же, адекватные люди, говорили, что пользователю нужно подсказать, что с элементом можно взаимодействовать, например, с помощью смены курсора на pointer. Тут ведь ещё проблема в том, что не все интерактивные элементы выглядят как интерактивные. То есть это касалось не только кнопок, но и других элементов, на которые можно тыкнуть.
В CSS Working Group обсудили, какие курсоры должны использоваться для элементов форм и приняли официальное решение.
Что решили:
- cursor: pointer — для кнопок, выпадающих списков, чекбоксов, радиокнопок и других элементов, на которые можно нажать
- cursor: grab — для ползунков (range), а при перетаскивании — grabbing
- cursor: not-allowed — для отключённых элементов (disabled)
- cursor: default — для элементов с readonly и групп <optgroup>.
В основе решения лежит уже упомянутое решение адекватных людей. Курсор должен подсказывать пользователю, что можно сделать с элементом. pointer означает возможность нажатия, text — ввод текста, а grab — перетаскивание.
Ладно, теперь без накидывания и для полноты картины напишу, что на самом деле они обсудили. Это для тех, кто читает до конца =)
Сейчас если добавить <button> на страницу, то у него по умолчанию будет указано свойство appearance: auto. С внедрением новой спецификации CSS Form Control Styling Level 1 этот дефолт изменится на appearance: base. Именно для этого режима CSSWG решила использовать cursor: pointer у кнопок и некоторых других элементов форм. Подчеркну, что тип курсора меняется из-за appearance: base, а не потому что элемент "кнопка".
Дисскусия: https://github.com/w3c/csswg-drafts/issues/14251
