Комментарии 77
Золотое правило для Web:
Если при нажатии на кнопку, пользователя отправит на другую страницу, то эта кнопка должна быть тегом <a>. Ссылка с нее должна и копироваться нормально, и в статус-баре браузера отображаться.
делай ссылки — ссылками
кнопки — кнопками, а не , не div, не <что-то>.
список- списком.
таблицу — таблицей.
блок — блоком, абзац абзацем.
Делая, например, таблицу — дивами можно сломать голосовые браузеры, «семантичную верстку», испоганить клавиатурные эвенты — например переход табом между блоками, и.т.п.
С другой стороны, если политика вашего веба — ради 5% пользователей — не запариваться, то да, конечно, можно верстать как хочешь.
Это уже к парсеру хабрахабра вопрос.
С другой стороны здесь можно писать HTML.
Но писать его в одну строку неудобно.
Символ переноса строки преобразуется в <br />
Кроме того это действительно важно на сайте который разрабатываешь сам. CSS хабрахабра потрогать никто не даст, а вот у себя можно внутренние отступы и расстояние между абзацами настраивать.
Вообще мало ли чего можно нацээсэсить, а вот с
<br /> будут некоторые сложности.
Это особенность material design. Он действительно приподнята.
Укажите, какая материальная кнопка приподнимается, когда на неё нажимаешь?
Не понимаю, почему минусят @a1Dima. Всё правильно он сказал, по гайдлайнам material design кнопка приподнимается при нажатии: https://material.io/guidelines/components/buttons.html#buttons-raised-buttons
Raised buttons behave like a piece of material resting on another sheet – they lift and fill with color on press.
Ну, я бы не назвал это дебилизмом, и оно не противоречит концепции. Тут важно помнить о том, что МД – это не скевоморфизм, и кнопка – это не копия физической кнопки. У объектов нет объема как такового, поэтому кнопка не может при нажатии утапливаться. Так что дизайнеры гугла выкрутились, сказав, что кнопка находится на некотором отдалении под стеклом, и когда подносишь палец к экрану, она «притягивается» к пальцу. Да, возможно, не очень изящно, и уж точно ломает стереотип (но ломка стереотипа – это не всегда плохо), но обратная ситуация в терминах МД (когда изначально кнопка была бы поднята и отбрасывала гигантскую тень, а при нажатии опускалась) былы бы, имхо, еще хуже.
Другое дело, что приведенный в статье пример (изначальный, сейчас его уже, похоже, заменили) не имел никакого отношения к МД за исключением этого нажатия-примагничивания. Там этот подход уж точно не был оправдан.
Вот это тот случай, когда инженеры (а точнее, дизайнеры) гугла облажались. Ведь можно было сделать активным утопленное положение кнопки, как бы "в глубине". И никаких пересудов не было бы, как и гигантской тени у неактивной кнопки.
Не совсем понимаю, куда ее утапливать. Вот есть у вас основной контейнер страницы – это кусок картона. А над ним еще один кусок картона поменьше – это кнопка. Куда его можно утопить, не проткнув базовый слой? Тут либо менять всю концепцию МД, либо одно из двух.
Точно так же, как на куске картона она приподнимается — рисованием теней. Только тень должна быть не снаружи кнопки, а внутри — тогда это будет выглядеть, как будто дырка в странице, под ней кнопка, и страница отбрасывает на кнопку тень, получится как бы утопленная кнопка.
Примерно так: 
Ну вот как раз дырка в странице будет противоречить концепции МД.
А поднятая кнопка вместе с концепцией МД противоречит многолетнему опыту миллиардов человек.
Не очень как-то логично решать это противоречие в пользу концепции МД. Гораздо логичнее поменять концепцию. Другими словами, это порок концепции, ошибка.
Единственное объяснение это то, что увеличившуюся тень под пальцем лучше видно, чем уменьшившуюся. (круглая кнопка вместе с тенью под некоторыми пальцами совсем пропадет)
Типичное, простое и всем понятное решение — при наведении кнопку приподнимать, а при нажатии возвращать на место.
Вероятно дело в производительности.
Если посмотрите мой пример посложнее, в котором кнопка ведёт себя похоже на настоящую, там теней вагон и маленкая тележка. Каждая такая тень ляжет нагрузкой на процессор.
МД напротив предлагает базовые флэт кнопки без теней вовсе. Единственное, что их выделяет это капс.
Так CSS примера короче. Специально для вас добавил
Пример сложнее
button {
margin: .8rem;
font-size: 1.42rem;
padding: 1rem;
background: hsla(180, 90%, 64%, 1);
color: hsla(180, 90%, 12%, 1);
text-shadow: 1px 1px 1px hsla(180, 90%, 32%, 1);
box-shadow: -4px 4px 0 0 hsla(180, 90%, 22%, .87), -3px 4px 3px hsla(180, 42%, 11%, 1), 2px 4px 4px hsla(180, 42%, 11%, 1), -4px 1px 0 0 hsla(180, 90%, 32%, 1), inset 0 0 1px 0 hsla(180, 90%, 90%, 1);
border: 1px hsla(180, 90%, 42%, 1) solid;
border-top-color: hsla(180, 90%, 56%, 1);
border-radius: 5px;
outline: none;
position: relative;
transition: all .22s ease-in;
}
button:hover, button:focus {
background: hsla(420, 90%, 42%, 1);
color: hsla(420, 90%, 12%, 1);
text-shadow: 1px 1px 1px hsla(420, 90%, 32%, 1);
border: 1px hsla(420, 90%, 22%, 1) solid;
border-top-color: hsla(420, 90%, 56%, 1);
box-shadow: -4px 4px 0 0 hsla(420, 90%, 22%, .87), -3px 4px 3px hsla(420, 42%, 11%, 1), 2px 4px 4px hsla(420, 42%, 11%, 1), -4px 1px 0 0 hsla(420, 90%, 32%, 1), inset 0 0 1px 0 hsla(420, 90%, 90%, 1);
}
button:active {
background: hsla(420, 90%, 42%, 1);
color: hsla(420, 90%, 12%, 1);
text-shadow: 1px 1px 1px hsla(420, 90%, 32%, 1);
transform: translate(-4px, 4px);
border: 1px hsla(420, 90%, 22%, 1) solid;
border-top-color: hsla(420, 90%, 56%, 1);
box-shadow: 0 0 0 0 hsla(420, 90%, 22%, .87), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 0 hsla(420, 90%, 32%, 1), inset 1px 1px 4px 0 hsla(420, 90%, 22%, 1);
}
button:disabled {
background: hsla(420, 0%, 64%, 1);
color: hsla(180, 0%, 12%, 1);
text-shadow: 1px 1px 1px hsla(180, 0%, 32%, 1);
transform: translate(-4px, 4px);
border: 1px hsla(420, 0%, 22%, 1) solid;
border-top-color: hsla(420, 0%, 56%, 1);
box-shadow: 0 0 0 0 hsla(420, 0%, 22%, .87), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 0 hsla(420, 0%, 32%, 1), inset 1px 1px 4px 0 hsla(420, 0%, 22%, 1);
}
Активна
Навели
Нажали
Отжали
Заблокирована
Ожидает
Нажать на кнопку, ну для примера — сохранить. По логике ни одно из состояний не подходит. Ни одно из них не «говорит» пользователю — «подожди».
Добавил сложный пример с состоянием загрузки
Спасибо за ссылку. Главное из моего доклада:
- Это всегда
<button> - Если не хватает, то
<a>
А вот слайды: https://pepelsbey.net/pres/push-it/
Огромное спасибо за статью, за ваш труд.
Хотелось бы видеть продолжение. Очень интересуют тонкости использования тега title.
Хватит так шутить, а то вы плохо знаете автора.
Да, и расскажите, обязательно в каких случаях применять тег title, а в каких — атрибут. И как их не перепутать.
Ничего в голову кроме <abbr> не пришло, но сарказм почувствовал.
Эта статья появилась не на пустом месте. Когда в очередной раз полез писать обработчики кнопок в готовый проект, в котором приходится дописывать состояния вместо дизайнера и верстальщика — взорвало на простыню. Теперь есть куда посылать.
Спасибо. Добавил такой кусочек, чтобы не вводить в заблуждение
Для кого эта статья?
В первую очередь для дизайнера который делает макет сайта, но не дорисовывает детали свойственные вебу. Своеобразная попытка объяснить, что веб-сайт лежит за пределами плоской полиграфии.
Во вторых для верстальщика к которому пришёл макет без состояний, чтобы было куда дизайнера послать.
В третьих чтобы вместо очередной тирады о разнице в кнопках\ссылках и нужности дизайна состояний, просто давать ссылку.
Главное чтобы не было статей о верстке таблицами.
Спасибо за замечание. Но статья получилась и так больно длинная. type=button у кнопки необходим только если кнопка внутри формы, иначе она сделает сабмит. Если вы об этом конечно.
Я один такой динозавр, который помнит, откуда родились кнопки?
Тег <input type="button"> и сейчас работает, и работал 10 лет назад (и древние браузеры тех эпох его сожрут, даже если не сожрут <button>
Если вам не нравится синий цвет для ссылок, меняйте его, но обязательно ссылки подчёркивайте.
По-моему, как раз наоборот. Сейчас уже де-факто — ссылка всегда синяя, но уже почти нигде не подчёркнутая. За изменение цветов ссылок нужно бить, и желательно ногами.
Добавлю. Если делается не веб-сайт, а веб-приложение, и предполагаются регулярные переходы пользователя по "маршруту" из одних и тех же страниц — то для этих ссылок надо все-таки сделать состояние :visited неотличимым от обычного состояния.
Так, а собственно от чего бомбануло то?
В 2016 году это может показаться странным, но есть люди которые работают с сайтам посредством > клавиатуры. У некоторых вовсе сломана мышь.
То что кого-то пользуется компьютером со сломанным железом в 2016 году это вас беспокоит, а то что у некоторых может быть в 2016 году IE6-7-8 это вас не беспокоит?) Это не это преступление против таких людей?))
Жалко, что не раскрыли паттерн с подчеркнутыми ссылками border-style dashed и dotted.
:visited, поможет пользователю не забыть какие странички он уже открывал и не открывать их повторно.
Ага, и через пару дней использования документации она вся становится фиолетовой до неизвестного юзеру события когда браузер посчитает за вас что вы снова все забыли и вернет стиль.
Для IE6-7-8 есть полифил.
Паттерн с пунктирными ссылками не раскрыт потому, что это кнопка, а не ссылка. Ничего не мешает оформить кнопки как пунктирные ссылки. Благо паттерн Татьянычем раскрыт ещё до появления <button>.
А для навигации, да. Можно пренебречь :visited оформлением. А вот в результатах поиска и статьях эта штука нужная. Как пример выдача гугла, когда через некоторое время повторяешь поисковый запрос или ищешь нечто похожее, это помогает понять какие сайты ты уже посещал и решить посещать их снова или нет.
То что кого-то пользуется компьютером со сломанным железом в 2016 году это вас беспокоит, а то что у некоторых может быть в 2016 году IE6-7-8 это вас не беспокоит?) Это не это преступление против таких людей?))
Шутничку невдомёк что есть люди с нарушениями моторики, деформированными или и вовсе отсутствующими конечностями и слепые…
А почему не написали с проблемами зрения и испорченным цветовым восприятием? Тогда любой дизайн придется делать высококонтрастным и практически чернобелым используя ваш аргумент?
А для людей с нарушением моторики удобнее 350 раз таб щелкать чтобы разглядеть едва заметное выделение рамки чтобы попасть на кнопу "ответить" в данном топике?
Или может лучше размеры кнопок не меньше 1 на 2 см делать везде?
Давайте не будем притворятся, что псевдокласс focus решает главную проблему навигации для инвалидов.
А почему не написали с проблемами зрения и испорченным цветовым восприятием? Тогда любой дизайн придется делать высококонтрастным и практически чернобелым используя ваш аргумент?
А для людей с нарушением моторики удобнее 350 раз таб щелкать чтобы разглядеть едва заметное выделение рамки чтобы попасть на кнопу «ответить» в данном топике?
Или может лучше размеры кнопок не меньше 1 на 2 см делать везде?
Сарказм и argumentum ad absurdum здесь не уместны, ибо как контраст так и масштаб элементов регулируются браузером если особо одарённые десигнеры не вставляют ему палки в колёса.
главную проблему навигации для инвалидов
Не надо изобретать велосипед когда есть WAI-ARIA
Это даёт даже больше свободы чем <input type="image" />
Вообще-то <input type="image" /> испокон веков посылает вместе с формой ещё и координаты клика (x=, y=) относительно самой картинки. Например, можно потом делать аналитику типа "по какой части кнопки обычно кликают". Другой способ это сделать подскажете (без javascript)?
Ссылка, будучи замаскированная под кнопку — сработает всегда «правильно», когда даже отключен скрипт JavaScript или сам JavaScript (что, конечно маловероятно)…
В отличии от кнопки — которая при отключенном скрипте — может «умереть» навсегда…
Мое предпочтение — отключаете скрипт и смотрите сможет ли страница «нормально» выполнить необходимый минимум или или нет при нажатии на кнопки/ссылки…
Хотя это, наверно, дело вкуса, а может и извращенный перфекционизм…
Доколе, Вы будете заливать картинки чёрт знает куда, а не на хабрасторадж?
Кнопка или ссылка?