Pull to refresh

Comments 77

Золотое правило для Web:
Если при нажатии на кнопку, пользователя отправит на другую страницу, то эта кнопка должна быть тегом <a>. Ссылка с нее должна и копироваться нормально, и в статус-баре браузера отображаться.

Позанудствую: исключая случай сабмита формы.
Не соглашусь. Часто делаю сабмит в новую вкладку, это удобно.
UFO just landed and posted this here
musicriffstudio золотое правило —
делай ссылки — ссылками
кнопки — кнопками, а не , не div, не <что-то>.
список- списком.
таблицу — таблицей.
блок — блоком, абзац абзацем.

Делая, например, таблицу — дивами можно сломать голосовые браузеры, «семантичную верстку», испоганить клавиатурные эвенты — например переход табом между блоками, и.т.п.

С другой стороны, если политика вашего веба — ради 5% пользователей — не запариваться, то да, конечно, можно верстать как хочешь.
То-то в вашем комментарии абзацы сделаны не абзацами, а отбиты пустыми строками

Это уже к парсеру хабрахабра вопрос.

С другой стороны здесь можно писать HTML.

Но писать его в одну строку неудобно.

Символ переноса строки преобразуется в <br />



Кроме того это действительно важно на сайте который разрабатываешь сам. CSS хабрахабра потрогать никто не даст, а вот у себя можно внутренние отступы и расстояние между абзацами настраивать.

Вообще мало ли чего можно нацээсэсить, а вот с <br /> будут некоторые сложности.
Состояние pressed больше похоже на приподнятую кнопку, а не нажатую.

Это особенность 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 примера короче. Специально для вас добавил


Пример сложнее

Кнопки которые похожи на настоящие


Показать 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);

}
Да, наведение и клик поменять бы. Вообще, если очень хочется сделать ссылку кнопкой, не стоит забывать про role=nitton
Оффтоп — почему то мне всегда казалось, что у кнопок 6 состояний
Активна
Навели
Нажали
Отжали
Заблокирована
Ожидает

Нажать на кнопку, ну для примера — сохранить. По логике ни одно из состояний не подходит. Ни одно из них не «говорит» пользователю — «подожди».
Для состояния «Ожидает» обычно используют disabled и надпись «Подождите...» — костыль конечно, зато наглядно
Мне показалось, что если я проголосую «неправильно», автор меня выследит
Меня очень радует неизменное повышение уровня материалов на хабре.
Огромное спасибо за статью, за ваш труд.
Хотелось бы видеть продолжение. Очень интересуют тонкости использования тега title.

Хватит так шутить, а то вы плохо знаете автора.

Да, и расскажите, обязательно в каких случаях применять тег title, а в каких — атрибут. И как их не перепутать.

UFO just landed and posted this here
Конечно же он серьёзно.
UFO just landed and posted this here

Ничего в голову кроме <abbr> не пришло, но сарказм почувствовал.


Эта статья появилась не на пустом месте. Когда в очередной раз полез писать обработчики кнопок в готовый проект, в котором приходится дописывать состояния вместо дизайнера и верстальщика — взорвало на простыню. Теперь есть куда посылать.

Угу. И про <input type=«submit»… > — тоже тему не раскрыли…

Спасибо. Добавил такой кусочек, чтобы не вводить в заблуждение


Для кого эта статья?

В первую очередь для дизайнера который делает макет сайта, но не дорисовывает детали свойственные вебу. Своеобразная попытка объяснить, что веб-сайт лежит за пределами плоской полиграфии.


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


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

Главное чтобы не было статей о верстке таблицами.

Только сейчас заметил, что habracut — это кнопка

это ссылка


<a class="button" href="https://habrahabr.ru/post/317736/#habracut">Читать дальше →</a>

Спасибо за замечание. Но статья получилась и так больно длинная. type=button у кнопки необходим только если кнопка внутри формы, иначе она сделает сабмит. Если вы об этом конечно.

Об этом. Мне кажется, указывать type и вне формы — правило хорошего тона. Хотя обычно я не сторонник таких перестраховок, но тут видимо сам обжигался.)

Я один такой динозавр, который помнит, откуда родились кнопки?
Тег <input type="button"> и сейчас работает, и работал 10 лет назад (и древние браузеры тех эпох его сожрут, даже если не сожрут <button>

Так и до вёрстки таблицами дойти может.

Да и, что толку если древние браузеры его сожрут, а JS откажется работать в силу отсутствия новомодных штук.
UFO just landed and posted this here

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

UFO just landed and posted this here

Браузер на плойке например предусматривает навигацию перекрестьем. Это удобнее чем двигать курсор аналоговым стиком.

UFO just landed and posted this here
Если вам не нравится синий цвет для ссылок, меняйте его, но обязательно ссылки подчёркивайте.

По-моему, как раз наоборот. Сейчас уже де-факто — ссылка всегда синяя, но уже почти нигде не подчёркнутая. За изменение цветов ссылок нужно бить, и желательно ногами.
Для любителей делать ссылки «javascript:;» (например в навигации сайта), IMHO, должен функционировать отдельный раздел ада, причем прижизненного.

Добавлю. Если делается не веб-сайт, а веб-приложение, и предполагаются регулярные переходы пользователя по "маршруту" из одних и тех же страниц — то для этих ссылок надо все-таки сделать состояние :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

Не уместно прикрываться WAI-ARIA, и не ставить целью удобства в дизайне. Это имитация заботы.
Пара сотен ссылок на странице и к чертям летит вся забота.

Или может лучше размеры кнопок не меньше 1 на 2 см делать везде?

Так это был не сарказм?
Тогда извиняюсь.
Это даёт даже больше свободы чем <input type="image" />

Вообще-то <input type="image" /> испокон веков посылает вместе с формой ещё и координаты клика (x=, y=) относительно самой картинки. Например, можно потом делать аналитику типа "по какой части кнопки обычно кликают". Другой способ это сделать подскажете (без javascript)?

Поправил


Это даёт даже больше свободы в стилевом оформлении чем <input type="image" />

О координатах совсем забыл, так давно это использовал как и карты изображений. Спасибо, что напомнили.

Боюсь нарваться на непонимание, но ситуация как в кин-дза-дза: дальтоник оранжевого от зеленого не отличает.

Ссылка, будучи замаскированная под кнопку — сработает всегда «правильно», когда даже отключен скрипт JavaScript или сам JavaScript (что, конечно маловероятно)…
В отличии от кнопки — которая при отключенном скрипте — может «умереть» навсегда…

Мое предпочтение — отключаете скрипт и смотрите сможет ли страница «нормально» выполнить необходимый минимум или или нет при нажатии на кнопки/ссылки…
Хотя это, наверно, дело вкуса, а может и извращенный перфекционизм…
Ссылка, будучи замаскированная под кнопку — сработает всегда «правильно», когда даже отключен скрипт JavaScript или сам JavaScript (что, конечно маловероятно)…

Даже если это не ссылка а JavaScript?
>>но доколе

Доколе, Вы будете заливать картинки чёрт знает куда, а не на хабрасторадж?
Доколе Хабрахабр не будет подгружать их как гитхаб

На своём хосте было удобнее обновлять скриншоты.


Перезалил. Спасибо, что напомнили.

Sign up to leave a comment.

Articles