PatientZero Nov 2 at 10:25

Просто используй кнопку

Easy

3 min

9.3K

HTML * Accessibility * ReactJS * htmx * JavaScript *

Translation

+59

Comments 38

navferty Nov 2 at 10:38

Так и не понял, а в чём состоит аргументация тех, кто агитирует за использование div вместо button?

nin-jin Nov 2 at 10:57

Нет необходимости делать ресет стандартных стилей.
Стабильная кроссбраузерная стилизация без неожиданных сдвигов на пару пикселей.
Нет неожиданной отправки формы любой кнопкой в ней.
Можно реиспользовать тот же компонент кнопки для релизации и других кликабельных контролов.

vanxant Nov 2 at 12:15

Нет неожиданной отправки формы любой кнопкой в ней

так не надо лепить тип submit и не будет никаких отправок

Нет необходимости делать ресет стандартных стилей.

А кто сейчас не делает ресет стандартных стилей?

dominus_augustus Nov 2 at 13:42

Читаю когда ответы создателя лучшего фреймворка не покидает ощущение его оторванности от современной разработки

nin-jin Nov 2 at 14:48

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#type

Тот, кто не хочет неожиданных сайд эффектов.

muxa_ru Nov 2 at 15:06

Так и не понял, а в чём состоит аргументация тех, кто агитирует за использование div вместо button?

Полагаю, это стандартная аргументация "я подсмотрел в интернете вот такой вариант, по другому не умею и теперь весь мир должен под меня подстроиться."

nin-jin Nov 2 at 11:15

можно добавить [role="button"]

А можно role="tab"

не надо вмешиваться в порядок фокусировки.

tabindex="0" и не влияет на порядок.

Нужно прикрепить это событие к document

Не нужно.

Kahelman Nov 2 at 11:20

Сначала создаем себе проблемы а потом из героически преодолеваем … безумие и отвага !

urvanov Nov 2 at 11:45

Это девиз всего современного веба.

moscowman Nov 2 at 13:50

Меня лично бесит, когда табом или аддоном Surfingkeys нельзя добраться до какого-то элемента формы и приходится переносить руки на мышь.
Так лежат руки на месте и лежат, очень удобно и быстро, а тут туда-сюда, прицелься и тыкни.

SWATOPLUS Nov 2 at 17:01

Это все берется из-за магии тегов, потому что навешиваются доп. стили, которые могут вылезти неожиданно в каком-нибудь браузере.

Например есть вот эта таблица c дефолтными стилями: https://www.w3schools.com/cssref/css_default_values.php

a:link color: (internal value);

Этот (internal value) может различаться в браузерах, а хочется что бы было все единообразно.
Плюс эта таблица не раскрывает aria-атрибуты и читалка может по разному работать в разных браузерах, и поэтому приходиться ручками что-то дописывать.

И вот тут приходит мысль использовать div, самому все прописать и радоваться, что все везде одинаково работает. Но див не панацея, и самая частая задача где он не подходит это router-link. Казалось бы прописал на onclick смену роута, aria и все хорошо, но не работает функция открыть в новой вкладке. Поэтому приходиться использовать a-tag, делать preventDefault и переписывать стили.

Еще бывает когда используют <a href="#" /> для открывания модалки, но такая кнопка скролит в начало документа. Поэтому надо href="javascript:void(0)" или preventDefault, или вообще button.

В общем, что бы все работало красиво с a11y и единообразными стилями, нужно знать много тонкостей, а хочется быстро и просто.

Что бы лично я мог предложить:

Резервирование тега e (element) в HTML и гарантирование отсутствия каких либо aria, стилей и всего остального.
Введение дополнительных атрибутов, которые позволяют превратить e-тег в любой другой элемент например urlforopeninnewtab (попмини что все стандартные атрибуты пишутся без разделителей).
Стандартизация всех тегов, составления списка стилей (уже есть), aria и других атрибутов, которые применяются по умолчанию.

Тогда можно будет почитать этот список и понять, что же нужно будет переопределить для требуемого эффекта.

nin-jin Nov 2 at 17:07

приходиться использовать a-tag, делать preventDefault и переписывать стили

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

muxa_ru Nov 2 at 19:45

Этот (internal value) может различаться в браузерах, а хочется что бы было все единообразно.

Согласен, пользователям хочется чтобы было всё однообразно, чтобы в том браузере которым они пользуются, на всех сайтах ссылки были раскрашены одинаковым цветом.

Вы ведь про это однообразие говорили?

nin-jin Nov 2 at 19:50

Да-да, синим цветом даже на синем фоне. Они такое любят.

muxa_ru Nov 2 at 19:55

на белом

nin-jin Nov 2 at 19:59

А особенно они любят, когда в тёмном окружении сайты выжигают им сетчатку белым фоном.

muxa_ru Nov 2 at 20:03

И многим фон хабра выжег сетчатки?

Вы ведь отличить дефолтный фон браузера (на скриншоте со ссылками) от фона хабра, в который этот скриншот вставлен?

nin-jin Nov 2 at 22:24

muxa_ru Nov 2 at 22:57

История с тёмными темами очень старая. Каждый раз её пробовали продавать аудитории по новому и каждый раз это не получалось.

Вы ведь веб-разработчик, да?

Скажите, а кому должно быть удобно пользоваться веб-сайтом: аудитории веб-сайта или его разработчикам?

На чьи пристрастия надо ориентироваться?

luchezarnaja Nov 3 at 01:32

Терпеть не могу темные темы. Извините, если кто их очень любит)

flancer Nov 3 at 05:49

энергосбережение на мобильных устройствах

muxa_ru Nov 3 at 16:09

В многочисленных текстах, посвящённых тёмной теме, есть ответ на вопрос, кто её любит.

Это люди работающие в полутьме и посадившие себе зрение.

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

Update: ну и, тёмная тема на смартфонах, это чтобы по ночам в кровати думскролить и не мешать спать другому человеку.

kamunicorn Nov 4 at 14:29

Есть люди со светобоязнью, это уже про доступность

muxa_ru Nov 4 at 14:37

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

muxa_ru Nov 3 at 16:21

Кстати, Хабр мне поддакивает

urvanov Nov 3 at 05:19

Если бы мы не переопределяли стили элементов, а использовали бы стандартные, то по идее такой проблемы не должно бы было быть. Фон страницы и цвет ссылок был бы в соответствии с цветовым оформлением в браузере или в ОС. Таким, к какому привык пользователь.