Будьмо відверті — мало хто з нас сприймає елемент
<button> інакше, ніж просто засіб запуску якогось коду по кліку. І саме тому багато хто не бачить і різниці між кнопкою й просто дівом з addEventListener. А це, в свою чергу, призводить до хибного бачення <button> як просто клікалки з тупими стилями за замовчанням.Але це не так. Якщо заглянути далі цього сприйняття, то виявиться, що кнопка — це дещо більше. Насправді це справжній інтерактивний примітив бравзера, що не лише дозволяє себе натискати, але й володіє багатьма іншими аспектами — власною семантикою, очікуваною бравзером поведінкою, повною підримкою клавітурної взаємодії, власними правилами доступности, врешті-решт.
Якщо не зважати на це уваги, розробники рано чи пізно починають займатися "цікавими дослідами" і городити те, що має бути простою кнопкою, за допомогою дівів чи спанів. А іноді — десятків дівів чи спанів. Тут примітно, що насправді дуже легко знехтувати саме
<button>, адже на поверхні ми бачимо лише блок, який треба натиснути. І це чудово вміють усі інші елементи: навісимо onClick чи що у вас там у вашому улюбленому фреймворку, і задача ніби вирішується.Але згодом таке рішення часто вилазить боком, і ось розробник уже починає додавати те, що вже й так існує у простої кнопки: той самий правильний фокус, ту саму клавіатурну взаємодію, стани, а на завершення поринає з головою в імітацію доступности.
Взагалі, я раджу завжди ставити собі питання — чи є вже в бравзері те, що я намагаюсь зробити? Відверто, в більшості випадків відповідь однозначна — так. Звичайно, я розумію, що навіть зараз багато нативних контролів у бравзері не надають достатніх засобів для такої стилізації, яку часто вигадують наші любі дизайнери. Чи такого функціоналу, який вигадують наші любі стейхолдери.
І це підіймає доволі цікавий аспект розробки — ми часто сприймаємо інтерактивні елементи через призму того, як вони виглядають, а не що вони роблять. Несвідомо в такий спосіб ми жертвуємо і ефективністю інтерфейсу, і зручністю розробки. Бо замість того, аби узяти те, що вже працює і так, нам доводиться вигадувати колесо заново. Або кнопку.
<button> в цій історії є дуже цікавим прикладом, бо цей елемент або ігнорують, або використовують замість усього, що бодай якось клікається. Так, я про <a> в якості кнопки і <button> в якості гіперпосилань. Повірте, я таке бачив на власні очі.Я спеціально не говорю про поведінку
<button> в формах в цьому дописі, бо планую детальніше зупинитися на цій темі у наступному. Чому перезавантажується сторінка, якщо натиснути в кнопку всередині форми, чим це зумовлено, чому це не баг, і як зробити так, щоб цього не відбувалося — про це наступного разу.А сьогодні були просто ліричні роздуми про елемент
<button> і його роль в ширшій картині Всесвіту.Просто запамʼятайте — якщо, дивлячись на дизайн, у вас виникає підсвідоме бажання тицьнути в щось мишкою, то швидше за все це звичайна кнопка, а не оріґамі з
<div>.@babichdev
Збір на РЕБ для 115 ОМБр — кожна гривня важлива!