Кнопка или ссылка?

  • Tutorial

Кнопка или ссылка?


Я знаю хабр не для жалоб,

но доколе

использовать ты будешь

ссылки вместо кнопок <UserName />

Девушка на картинке как бы спрашивает — Куда жать?


Автор иллюстрации <Marat Hilmanov> gray-monkey@yandex.ru


Если коротко:


Используйте для кнопок — кнопки, а для ссылокссылки.


Для кнопок использовать
ссылки
— не комильфо.


Разделитель


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


Разделитель


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


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


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


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


Разделитель


Содержание






Разделитель


Ссылки



Разделитель


Введение


<a href="javascript:;">Ссылка которая кнопка</a>

Когда наводят указатель на ссылку которая кнопка то в левом нижнем углу появляется надпись javascript:;:
javascript:;
Или адрес с решёткой:
https//site.name/page.html#


ПКМ на такой кнопке и контекстное меню любезно предложит:
Контекстное меню предлагает открыть ссылку в новой вкладке: сохранить, копировать…


ctrl + ЛКМ на такой кнопке откроют новую вкладку на которой будет ровно та страница, с которой она была открыта.


Кроме того такая ссылка с решёткой в качестве ссылки, станет :visited, если ещё не стала до этого, и приобретёт соотстветствующее стилевое оформление. Если дизайнер его конечно не зарезал, что в большинстве случаев конечно зря, о чём ниже.


В JavaScript скриптах для таких кнопок дополнительно используется e.preventDefault(), чтобы предотвратить действие кнопки по умолчанию (переход по ссылке) "— это костыль.

Разделитель


<a href="//link.url">Ссылка</a>


  • Если клик приведёт к смене адреса,
  • этот адрес можно скопировать,
  • отправить по электронной почте,
  • на него можно снова зайти,
  • это не адрес самой страницы
    — это ссылка.

Разделитель


У ссылки должны быть стили для обычного, :active, :visited, :focus и :hover состояний.



Разделитель


Антипаттерн


a {
    color: black !important;
    text-decoration: none !important;
    cursor: default !important;
}

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


Антипример с неразличимыми ссылками


И помните, если вы ставите !important и не очень понимаете почему вы без него не можете обойтись, то читайте это слово как импотент. Возможно вам нужно немного изменить селектор для того, чтобы перекрыть тот, который вам мешает.

Разделитель


Состояния


текст с различными состояниями ссылки


a — обычное состояние


a {
    color: #0645ad;
    cursor: pointer;
    text-decoration: none;
}

В обычном состоянии a должна быть синей или подчёркнутой, а лучше и синей и подчёркнутой, чтобы пользователь без наведения мыши понимал, что это — ссылка. Пользователь привык к тому, что синие слова на странице это ссылки, даже если они не подчёркнуты. Если вам не нравится синий цвет для ссылок, меняйте его, но тогда ссылки подчёркивайте.




a:hover — наведение


a:hover {
    text-decoration: underline;
}

Когда курсор находится над ссылкой, она становится :hover и в данном примере приобретает подчёркивание. Так пользователь поймёт, что это точно ссылка, на которую можно кликнуть.




a:focus — фокус клавиатуры


a:focus {
    text-decoration: underline;
}

Когда на ссылку устанавливается указатель, перемещаемый табулятором TAB ↹
она становится :focus. В 2016 году это может показаться странным, но есть люди которые работают с сайтам посредством клавиатуры. У некоторых вовсе сломана мышь. В любом случае, занулять :focus состояние — это преступление против таких людей.


Особые спецэфекты применять не обязательно, достаточно таких как у :focus.


CSS чтобы не писать дважды:


a:focus, a:hover {
    text-decoration: underline;
}



a:active — клик


a:active {
    color: #faa700;
}

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




a:visited — ранее посещённая страница


a:visited {
    color: #0b0080;
}

Можно все посмотреть‽

:visited, поможет пользователю не забыть какие странички он уже открывал и не открывать их повторно. Так вместе с :active и :hover мы чуточку разгрузим интернет от случайных загрузок, и сделаем его чуть лучше и быстре.


Разделитель




В эпоху HTML4 вместо кнопок использовались ссылки подчёрнутые пунктирной линией. Этот паттерн устарел.

Подчёркивание пунктирной линией рекомендуется для тултипов при наведении.
Например у <abbr> такое выделение поможет понять, что можно навести указатель и получить расшифровку.



Разделитель


Пример нестандартного оформления ссылок:


Пример на котором состояния ссылок оформленны нестандартно


Разделитель


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

Разделитель


HTML5 <button>Кнопка</button>


  • Если клик не меняет адрес страницы,
  • адрес нельзя скопировать
  • и нельзя этим адресом поделиться — это кнопка.

В кнопке позволителен капс, при условии, что вы не используете аббревиатуры. Особенно в неочевидных местах.
Если у вас встречаются аббревиатуры, то верхний регистр в кнопке не желателен, выделяйте их другим способом. Не искушайте пользователей тапать по тому, что не тапается. У пользователей тачскрина нет возможности подсмотреть :hover или :focus состояние. Ну или есть, но происходит это всё не очень удобно, обычно уже после свершившегося тапа.

Разделитель


Доступность


<button /> может быть недоступен на архаичных браузерах или устройствах. У кнопок не применятся стили без специальных JavaScript скриптов.
Но вас это не должно беспокоить. На таких устройствах часто и JavaScript не работает. И быть может CSS.


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

Что JSΩ, то JSॐ! Как говорится.

Разделитель


Поведение внутри формы


<button> по умолчанию имеет атрибут type=submit даже если его не прописать.


Ещё этот атрибут может принимать значения reset для сброса заполнения в форме
и button чтобы исключить влияние на форму. Правила хорошего тона предполагают,
что везде нужно писать <button type="button">Кнопка</button>.


Но на деле можно ограничится полной записью только внутри <form></form>,
type=submit в остальных местах ни на, что не влияет.


Это кстати отличный сбособ для стилизации кнопки отправки формы.
В отличии от <input type="submit" value="Кнопка" />, в содержимое
button можно писать любой HTML код, а не только текст.
Например
<button>
  <img src="/images/icon.svg" title="Красная таблетка" alt="Иконка" />
  <span style="color: red;">Красный</span> <span style="color: blue;">Синий</span>
</button>


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

Разделитель


Состояния


Похожи на состояния у ссылок за исключением того, что у кнопок нет состояния :visited, зато есть состояние :disabled.
Обычно дефолтное оформление браузера выпиливается основательно, иногда с нейтрализацией отображения состояний отличных от обычного.
Да. Этот гайд для тебя, любитель превратить веб-страницу в бумажный аналог.


Стилей для этих штучек понадобится немного больше, но всё не так страшно. Кроме того ребята из Twitter и отчасти Google уже позаботились о реализации велосипеда.
Тёплый ламповый Bootstrap "и новомодный MaterializeCSS, например.



Разделитель


Отображение


Так выглядит <button>Кнопка</button> в моём Chrome 54:
отображение состояний кнопки
На картинке button, button:hover, button:focus, button:active соответственно.


Без излишеств. Но учитывая движение Google в направлении Material Design, вполне может статься так, что в скором времени их заменят на подобные аналоги.


Material Design кнопки серые стандартные
Material Design кнопки синие



Разделитель


CSS


Для наглядности — мой вариант велосипеда который выглядит странновато, но для примера сойдёт.
Состояния кнопки в порядке: обычное, наведение, клик, отключена
Обычная, наведение, клик, отключена соответственно.


button — обычное состояние


button {
    background: none;
    outline: none;
    border: none;
    text-transform: uppercase;
}



button:hover, button:focus — при наведении


button:hover, button:focus {
    color: hsla(108, 12%, 0%, 1);
    box-shadow: -1px 1px 2px hsla(108, 62%, 42%, 1);
    background-color: hsla(108, 62%, 92%, 1)
}



button:active — в момент клика


button:active {
    color: hsla(108, 42%, 32%, 1);
    box-shadow: -2px 4px 8px hsla(64, 64%, 42%, 1);
    background-color: hsla(64, 64%, 92%, 1);
}



button:disable — отключена


button:disabled {
    color: hsla(0, 0%, 64%, 1);
    background: none;
    box-shadow: none;
    opacity: 1;
}


Разделитель


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


Посмотреть в живую на JSFiddle


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


Показать 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), 1px 5px 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, 92%, 56%, 1) solid;
    border-top-color: hsla(180, 92%, 64%, 1);
    border-radius: 5px;
    outline: none;
    position: relative;
    transition: all .22s ease-in;
}
button:hover {
    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, 92%, 56%, 1) solid;
    border-top-color: hsla(420, 90%, 64%, 1);
    box-shadow: -4px 4px 0 0 hsla(420, 90%, 22%, .87), -3px 4px 3px hsla(420, 42%, 11%, 1), 1px 5px 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:focus {
      background: hsla(108, 90%, 42%, 1);
      color: hsla(108, 90%, 12%, 1);
      text-shadow: 1px 1px 1px hsla(108, 90%, 32%, 1);
      border: 1px hsla(108, 92%, 56%, 1) solid;
      border-top-color: hsla(108, 90%, 64%, 1);
      box-shadow: -4px 4px 0 0 hsla(108, 90%, 22%, .87), -3px 4px 3px hsla(108, 42%, 11%, 1), 1px 5px 4px hsla(108, 42%, 11%, 1), -4px 1px 0 0 hsla(108, 90%, 32%, 1), inset 0 0 1px 0 hsla(108, 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, 92%, 22%, 1) solid;
    border-top-color: hsla(420, 92%, 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(420, 0%, 12%, 1);
    text-shadow: 1px 1px 1px hsla(420, 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:disabled.in_ajax
{
    background: hsla(108, 22%, 64%, 1);
    color: hsla(108, 22%, 12%, 1);
    text-shadow: 1px 1px 1px hsla(108, 22%, 32%, 1);
    transform: translate(-4px, 4px);
    border: 1px hsla(108, 22%, 22%, 1) solid;
    border-top-color: hsla(108, 22%, 56%, 1);
    box-shadow: 0 0 0 0 hsla(108, 22%, 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);

}


Разделитель


Дизайнеру


Ты цээсэсов можешь и не знать, но состояния отрисовать обязан!

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


текст с различными состояниями ссылки


Состояния кнопки в порядке: обычное, наведение, фокус, клик, отключена, в состоянии загрузки


Ребята из Google сделали такой макет.

Разделитель


Спасибо


Спасибо, что дочитали. Всё здесь написаннное не является 100% истиной в последней инстанции.
Репозиторий



Разделитель


GitHub


Ссылка на репозиторий этой статьи. Если хотите дополнить или исправить, присылайте пожалуйста Pull Request


Разделитель




Процесс рисования

Only registered users can participate in poll. Log in, please.

Для кнопок ты используешь

Share post

Similar posts

AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 77

    +7

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

      +14
      Позанудствую: исключая случай сабмита формы.
        0
        Не соглашусь. Часто делаю сабмит в новую вкладку, это удобно.
        +7
        золотое правило для любого UI — пользователю должно быть понятно что произойдёт если он куда-то тыкнет.

        Сечас, в 2016 году, разницы между переходом по ссылке и процессом сабмита страницы (как это задумывалось 20 лет назад) визуально почти нет. Да и самого сабмита порой нет. А URL`ы нечитаемые, типа site.com/do?action=123). И дефолтовое поведение элементов HTML давно пало в неравной борьбе с требованиями маркетологов к внешнему виду.
          0
          musicriffstudio золотое правило —
          делай ссылки — ссылками
          кнопки — кнопками, а не , не div, не <что-то>.
          список- списком.
          таблицу — таблицей.
          блок — блоком, абзац абзацем.

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

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

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

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

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

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



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

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

          Это особенность material design. Он действительно приподнята.

            +4

            Укажите, какая материальная кнопка приподнимается, когда на неё нажимаешь?

              0

              Не понимаю, почему минусят @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.
                +4
                По мне, так это дебилизм. В целом МД неплох, но вот эти кнопки, поднимающиеся при нажатии, ведут себя совершенно противоположно всему действительно «материальному».
                  0

                  Ну, я бы не назвал это дебилизмом, и оно не противоречит концепции. Тут важно помнить о том, что МД – это не скевоморфизм, и кнопка – это не копия физической кнопки. У объектов нет объема как такового, поэтому кнопка не может при нажатии утапливаться. Так что дизайнеры гугла выкрутились, сказав, что кнопка находится на некотором отдалении под стеклом, и когда подносишь палец к экрану, она «притягивается» к пальцу. Да, возможно, не очень изящно, и уж точно ломает стереотип (но ломка стереотипа – это не всегда плохо), но обратная ситуация в терминах МД (когда изначально кнопка была бы поднята и отбрасывала гигантскую тень, а при нажатии опускалась) былы бы, имхо, еще хуже.


                  Другое дело, что приведенный в статье пример (изначальный, сейчас его уже, похоже, заменили) не имел никакого отношения к МД за исключением этого нажатия-примагничивания. Там этот подход уж точно не был оправдан.

                    0

                    Вот это тот случай, когда инженеры (а точнее, дизайнеры) гугла облажались. Ведь можно было сделать активным утопленное положение кнопки, как бы "в глубине". И никаких пересудов не было бы, как и гигантской тени у неактивной кнопки.

                      0

                      Не совсем понимаю, куда ее утапливать. Вот есть у вас основной контейнер страницы – это кусок картона. А над ним еще один кусок картона поменьше – это кнопка. Куда его можно утопить, не проткнув базовый слой? Тут либо менять всю концепцию МД, либо одно из двух.

                        0

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


                        Примерно так:

                          –1

                          Ну вот как раз дырка в странице будет противоречить концепции МД.

                            +3

                            А поднятая кнопка вместе с концепцией МД противоречит многолетнему опыту миллиардов человек.


                            Не очень как-то логично решать это противоречие в пользу концепции МД. Гораздо логичнее поменять концепцию. Другими словами, это порок концепции, ошибка.

                              0
                              Согласно концепции, у объектов есть ширина, между слоями есть расстояние. Почему нельзя висящий в воздухе кусок картона нажатием положить на подложку (убрать между ними зазор)? Разве это не естественнее и метериальнее?

                              Единственное объяснение это то, что увеличившуюся тень под пальцем лучше видно, чем уменьшившуюся. (круглая кнопка вместе с тенью под некоторыми пальцами совсем пропадет)
                            0

                            Типичное, простое и всем понятное решение — при наведении кнопку приподнимать, а при нажатии возвращать на место.

                              0

                              А как определить наведение на мобильниках/планшетах?

                                +2

                                Никак. По этой причине, кстати, кнопка всегда должна выглядеть как кнопка, а не просто разноцветные буквы.

                                  0

                                  Так вот и я о том же. Предложенный Вами способ работать не будет на этих устройствах, а МД претендует на универсальность.

                                    0

                                    И как он "определяет наведение на мобильниках/планшетах"?

                                0

                                Простое, да, но о том и речь, что совершенно непонятное. У меня как-то кнопки при поднесении пальца не нажимаются. Почему это должно происходить при наведении мыши, и, тем более, с чего вдруг это "понятное" поведение?

                        0

                        Вероятно дело в производительности.


                        Если посмотрите мой пример посложнее, в котором кнопка ведёт себя похоже на настоящую, там теней вагон и маленкая тележка. Каждая такая тень ляжет нагрузкой на процессор.


                        МД напротив предлагает базовые флэт кнопки без теней вовсе. Единственное, что их выделяет это капс.

                  0

                  Так 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);
                  
                  }
                  +1
                  Да, наведение и клик поменять бы. Вообще, если очень хочется сделать ссылку кнопкой, не стоит забывать про role=nitton
                    +1
                    Оффтоп — почему то мне всегда казалось, что у кнопок 6 состояний
                    Активна
                    Навели
                    Нажали
                    Отжали
                    Заблокирована
                    Ожидает

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

                        Добавил сложный пример с состоянием загрузки

                        +6
                        Мне показалось, что если я проголосую «неправильно», автор меня выследит
                          +2
                          Вот доклад на эту же тему от pepelsbey с обсуждением сабжа
                            +1

                            Спасибо за ссылку. Главное из моего доклада:


                            1. Это всегда <button>
                            2. Если не хватает, то <a>

                            А вот слайды: https://pepelsbey.net/pres/push-it/

                              0

                              12 слайд для меня. Спасибо

                            +9
                            Меня очень радует неизменное повышение уровня материалов на хабре.
                            Огромное спасибо за статью, за ваш труд.
                            Хотелось бы видеть продолжение. Очень интересуют тонкости использования тега title.
                              +1

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

                                0

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

                                  0
                                  Ты серьезно?
                                  Это вообще проходят на первых занятиях по изучению html, надеюсь ты пошутил.
                                    0
                                    Конечно же он серьёзно.
                                    0
                                    Иначе и вправду ведь напишет
                                      +1

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


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

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

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


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

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


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


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

                                        0

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

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

                                          это ссылка


                                          <a class="button" href="https://habrahabr.ru/post/317736/#habracut">Читать дальше →</a>
                                          0
                                          Забыли про type=«button».
                                            0

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

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

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

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

                                                Да и, что толку если древние браузеры его сожрут, а JS откажется работать в силу отсутствия новомодных штук.
                                              +3
                                              В 2016 году это может показаться странным, но есть люди которые работают с сайтам посредством клавиатуры.

                                              Вот за это — спасибо!
                                              Прочувствовал это, серфя по интернету через TV-Box с пультом ДУ «вправо-влево-вверх-вних-ОК»
                                                0

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

                                                  0
                                                  Это издевательство серфить при таких тормозах на телевизорах

                                                  тормозов не заметил
                                                  может потому, что у меня не СмартТВ, а андроид коробочка + обычный ТВ
                                                  Ну и серфинг на этом комбайне — не самоцель, а нечасто требуемая фича
                                                    0

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

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

                                                      А как оно работает? «Перекрестье» (оно же — D-Pad) просто позволяет прыгать по гиперссылкам на странице? Если да, то это один в один модель поведения моего пульта ДУ :)
                                                      И именно поэтому клево, когда активная ссылка (на которой сейчас фокус, но клика еще не было) подсвечивается.
                                                        0

                                                        Именно так

                                                +2
                                                Если вам не нравится синий цвет для ссылок, меняйте его, но обязательно ссылки подчёркивайте.

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

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

                                                      –5

                                                      Так, а собственно от чего бомбануло то?


                                                      В 2016 году это может показаться странным, но есть люди которые работают с сайтам посредством > клавиатуры. У некоторых вовсе сломана мышь.

                                                      То что кого-то пользуется компьютером со сломанным железом в 2016 году это вас беспокоит, а то что у некоторых может быть в 2016 году IE6-7-8 это вас не беспокоит?) Это не это преступление против таких людей?))


                                                      Жалко, что не раскрыли паттерн с подчеркнутыми ссылками border-style dashed и dotted.


                                                      :visited, поможет пользователю не забыть какие странички он уже открывал и не открывать их повторно.

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

                                                        0

                                                        Для IE6-7-8 есть полифил.


                                                        Паттерн с пунктирными ссылками не раскрыт потому, что это кнопка, а не ссылка. Ничего не мешает оформить кнопки как пунктирные ссылки. Благо паттерн Татьянычем раскрыт ещё до появления <button>.


                                                        А для навигации, да. Можно пренебречь :visited оформлением. А вот в результатах поиска и статьях эта штука нужная. Как пример выдача гугла, когда через некоторое время повторяешь поисковый запрос или ищешь нечто похожее, это помогает понять какие сайты ты уже посещал и решить посещать их снова или нет.

                                                          0

                                                          согласен

                                                          +2
                                                          То что кого-то пользуется компьютером со сломанным железом в 2016 году это вас беспокоит, а то что у некоторых может быть в 2016 году IE6-7-8 это вас не беспокоит?) Это не это преступление против таких людей?))

                                                          Шутничку невдомёк что есть люди с нарушениями моторики, деформированными или и вовсе отсутствующими конечностями и слепые…
                                                            –2

                                                            А почему не написали с проблемами зрения и испорченным цветовым восприятием? Тогда любой дизайн придется делать высококонтрастным и практически чернобелым используя ваш аргумент?


                                                            А для людей с нарушением моторики удобнее 350 раз таб щелкать чтобы разглядеть едва заметное выделение рамки чтобы попасть на кнопу "ответить" в данном топике?
                                                            Или может лучше размеры кнопок не меньше 1 на 2 см делать везде?


                                                            Давайте не будем притворятся, что псевдокласс focus решает главную проблему навигации для инвалидов.

                                                              0
                                                              А почему не написали с проблемами зрения и испорченным цветовым восприятием? Тогда любой дизайн придется делать высококонтрастным и практически чернобелым используя ваш аргумент?
                                                              А для людей с нарушением моторики удобнее 350 раз таб щелкать чтобы разглядеть едва заметное выделение рамки чтобы попасть на кнопу «ответить» в данном топике?
                                                              Или может лучше размеры кнопок не меньше 1 на 2 см делать везде?

                                                              Сарказм и argumentum ad absurdum здесь не уместны, ибо как контраст так и масштаб элементов регулируются браузером если особо одарённые десигнеры не вставляют ему палки в колёса.

                                                              главную проблему навигации для инвалидов

                                                              Не надо изобретать велосипед когда есть WAI-ARIA
                                                                0

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

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

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

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

                                                            0

                                                            Поправил


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

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

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

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

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

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

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

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


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

                                                              Only users with full accounts can post comments. Log in, please.