Expa

Expa 

Исследую галактику фронтенда 🚀

6subscribers

80posts

Новые дефолтные курсоры над полями форм

Не знаю, застали вы или нет, но раньше мы очень много спорили, нужно ли ставить 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
Subscription levels4

<div>

$1.3 per month
Ты как <div> — без тебя не собрать ни один интерфейс.
Этот уровень — отличный способ сказать «спасибо» за статьи, переводы и новости.

<section>

$6.5 per month
Как <section> задаёт структуру странице, так и ты помогаешь проекту расти и становиться системнее.
- У тебя будет возможность участия в голосованиях за будущие темы и статьи.
- Ты получаешь доступ к еженедельному дайджесту фронтенд-новостей раньше остальных.

<main>

$13 per month
Главный контент — здесь.
На этом уровне ты получаешь максимальную ценность и прямое влияние на развитие канала.
- Возможность задать свой вопрос и получить персональный ответ/разбор.
Subscription Spots Are Limited

h1

$1 940 per month
На этой странице ты одинок.
Это просто шутка 😊
Go up