Кнопка или ссылка?
Я знаю хабр не для жалоб,
но доколе
использовать ты будешь
— ссылки вместо кнопок<UserName />?
Автор иллюстрации <Marat Hilmanov> gray-monkey@yandex.ru
Если коротко:
Используйте для кнопок — кнопки, а для ссылок — ссылки.
Для кнопок использовать
ссылки
— не комильфо.
Это не исчерпывающее руководство по кнопкам и не пример невероятного дизайна, а лишь попытка показать, что есть разница между ссылками и кнопками.
Для кого эта статья?
В первую очередь для дизайнера который делает макет сайта, но не дорисовывает детали свойственные вебу. Своеобразная попытка объяснить, что веб-сайт лежит за пределами плоской полиграфии.
Во вторых для верстальщика к которому пришёл макет без состояний, чтобы было куда дизайнера послать.
В третьих чтобы вместо очередной тирады о разнице в кнопках\ссылках и нужности дизайна состояний, просто давать ссылку.
Содержание
Ссылки
Введение
<a href="javascript:;">Ссылка которая кнопка</a>Когда наводят указатель на ссылку которая кнопка то в левом нижнем углу появляется надпись javascript:;:
Или адрес с решёткой:
ПКМ на такой кнопке и контекстное меню любезно предложит:
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, вполне может статься так, что в скором времени их заменят на подобные аналоги.
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
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
Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.
Комментарии (77)
Ulop
27.03.2017 16:54Кстати, как он? Субъективное мнение пользователя. Стоит своих денег?
ad1Dima
16.12.2016 16:13-1Это особенность material design. Он действительно приподнята.
merlin-vrn
16.12.2016 21:37+4Укажите, какая материальная кнопка приподнимается, когда на неё нажимаешь?
ookami_kb
17.12.2016 00:56Не понимаю, почему минусят @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.
hdfan2
17.12.2016 06:53+4По мне, так это дебилизм. В целом МД неплох, но вот эти кнопки, поднимающиеся при нажатии, ведут себя совершенно противоположно всему действительно «материальному».
ookami_kb
17.12.2016 09:33Ну, я бы не назвал это дебилизмом, и оно не противоречит концепции. Тут важно помнить о том, что МД – это не скевоморфизм, и кнопка – это не копия физической кнопки. У объектов нет объема как такового, поэтому кнопка не может при нажатии утапливаться. Так что дизайнеры гугла выкрутились, сказав, что кнопка находится на некотором отдалении под стеклом, и когда подносишь палец к экрану, она «притягивается» к пальцу. Да, возможно, не очень изящно, и уж точно ломает стереотип (но ломка стереотипа – это не всегда плохо), но обратная ситуация в терминах МД (когда изначально кнопка была бы поднята и отбрасывала гигантскую тень, а при нажатии опускалась) былы бы, имхо, еще хуже.
Другое дело, что приведенный в статье пример (изначальный, сейчас его уже, похоже, заменили) не имел никакого отношения к МД за исключением этого нажатия-примагничивания. Там этот подход уж точно не был оправдан.
merlin-vrn
17.12.2016 09:43Вот это тот случай, когда инженеры (а точнее, дизайнеры) гугла облажались. Ведь можно было сделать активным утопленное положение кнопки, как бы "в глубине". И никаких пересудов не было бы, как и гигантской тени у неактивной кнопки.
ookami_kb
17.12.2016 09:49Не совсем понимаю, куда ее утапливать. Вот есть у вас основной контейнер страницы – это кусок картона. А над ним еще один кусок картона поменьше – это кнопка. Куда его можно утопить, не проткнув базовый слой? Тут либо менять всю концепцию МД, либо одно из двух.
merlin-vrn
17.12.2016 10:12Точно так же, как на куске картона она приподнимается — рисованием теней. Только тень должна быть не снаружи кнопки, а внутри — тогда это будет выглядеть, как будто дырка в странице, под ней кнопка, и страница отбрасывает на кнопку тень, получится как бы утопленная кнопка.
Примерно так:
ookami_kb
17.12.2016 10:40-1Ну вот как раз дырка в странице будет противоречить концепции МД.
merlin-vrn
17.12.2016 12:00+3А поднятая кнопка вместе с концепцией МД противоречит многолетнему опыту миллиардов человек.
Не очень как-то логично решать это противоречие в пользу концепции МД. Гораздо логичнее поменять концепцию. Другими словами, это порок концепции, ошибка.
ad1Dima
19.12.2016 08:58Согласно концепции, у объектов есть ширина, между слоями есть расстояние. Почему нельзя висящий в воздухе кусок картона нажатием положить на подложку (убрать между ними зазор)? Разве это не естественнее и метериальнее?
Единственное объяснение это то, что увеличившуюся тень под пальцем лучше видно, чем уменьшившуюся. (круглая кнопка вместе с тенью под некоторыми пальцами совсем пропадет)
vintage
17.12.2016 10:38Типичное, простое и всем понятное решение — при наведении кнопку приподнимать, а при нажатии возвращать на место.
merlin-vrn
17.12.2016 11:58Простое, да, но о том и речь, что совершенно непонятное. У меня как-то кнопки при поднесении пальца не нажимаются. Почему это должно происходить при наведении мыши, и, тем более, с чего вдруг это "понятное" поведение?
KasperGreen
17.12.2016 13:04Вероятно дело в производительности.
Если посмотрите мой пример посложнее, в котором кнопка ведёт себя похоже на настоящую, там теней вагон и маленкая тележка. Каждая такая тень ляжет нагрузкой на процессор.
МД напротив предлагает базовые флэт кнопки без теней вовсе. Единственное, что их выделяет это капс.
KasperGreen
17.12.2016 03:21Так CSS примера короче. Специально для вас добавил
Пример сложнее
Показать CSSbutton { 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); }
Kenya
16.12.2016 02:05+1Да, наведение и клик поменять бы. Вообще, если очень хочется сделать ссылку кнопкой, не стоит забывать про role=nitton
Writerim
16.12.2016 07:48+1Оффтоп — почему то мне всегда казалось, что у кнопок 6 состояний
Активна
Навели
Нажали
Отжали
Заблокирована
Ожидает
Нажать на кнопку, ну для примера — сохранить. По логике ни одно из состояний не подходит. Ни одно из них не «говорит» пользователю — «подожди».
GreenBee
16.12.2016 08:31Для состояния «Ожидает» обычно используют disabled и надпись «Подождите...» — костыль конечно, зато наглядно
madMxg
16.12.2016 09:58+2
pepelsbey
16.12.2016 11:37+1Спасибо за ссылку. Главное из моего доклада:
- Это всегда
<button> - Если не хватает, то
<a>
А вот слайды: https://pepelsbey.net/pres/push-it/
- Это всегда
soshnikov
16.12.2016 09:59+9Меня очень радует неизменное повышение уровня материалов на хабре.
Огромное спасибо за статью, за ваш труд.
Хотелось бы видеть продолжение. Очень интересуют тонкости использования тега title.vintage
16.12.2016 11:03Да, и расскажите, обязательно в каких случаях применять тег title, а в каких — атрибут. И как их не перепутать.
0Ilya
16.12.2016 13:30Иначе и вправду ведь напишет
KasperGreen
16.12.2016 14:15+1Ничего в голову кроме
<abbr>не пришло, но сарказм почувствовал.
Эта статья появилась не на пустом месте. Когда в очередной раз полез писать обработчики кнопок в готовый проект, в котором приходится дописывать состояния вместо дизайнера и верстальщика — взорвало на простыню. Теперь есть куда посылать.
KasperGreen
16.12.2016 12:13Спасибо. Добавил такой кусочек, чтобы не вводить в заблуждение
Для кого эта статья?
В первую очередь для дизайнера который делает макет сайта, но не дорисовывает детали свойственные вебу. Своеобразная попытка объяснить, что веб-сайт лежит за пределами плоской полиграфии.
Во вторых для верстальщика к которому пришёл макет без состояний, чтобы было куда дизайнера послать.
В третьих чтобы вместо очередной тирады о разнице в кнопках\ссылках и нужности дизайна состояний, просто давать ссылку.
laphroaig
16.12.2016 11:51Только сейчас заметил, что habracut — это кнопка
KasperGreen
16.12.2016 11:53это ссылка
<a class="button" href="https://habrahabr.ru/post/317736/#habracut">Читать дальше ></a>
Balek
16.12.2016 12:29Забыли про type=«button».
KasperGreen
16.12.2016 12:34Спасибо за замечание. Но статья получилась и так больно длинная.
type=buttonу кнопки необходим только если кнопка внутри формы, иначе она сделает сабмит. Если вы об этом конечно.Balek
16.12.2016 13:11Об этом. Мне кажется, указывать type и вне формы — правило хорошего тона. Хотя обычно я не сторонник таких перестраховок, но тут видимо сам обжигался.)
webkumo
16.12.2016 15:17-1Я один такой динозавр, который помнит, откуда родились кнопки?
Тег <input type="button"> и сейчас работает, и работал 10 лет назад (и древние браузеры тех эпох его сожрут, даже если не сожрут <button>KasperGreen
16.12.2016 15:24+1Так и до вёрстки таблицами дойти может.
Да и, что толку если древние браузеры его сожрут, а JS откажется работать в силу отсутствия новомодных штук.
Zzzuhell
16.12.2016 13:33+3В 2016 году это может показаться странным, но есть люди которые работают с сайтам посредством клавиатуры.
Вот за это — спасибо!
Прочувствовал это, серфя по интернету через TV-Box с пультом ДУ «вправо-влево-вверх-вних-ОК»
Alexufo
16.12.2016 16:31Разовых случаев не надо, чтобы понять что вас обманули не сайты а маркетологи. Это издевательство серфить при таких тормозах на телевизорах.
Zzzuhell
16.12.2016 16:46Это издевательство серфить при таких тормозах на телевизорах
тормозов не заметил
может потому, что у меня не СмартТВ, а андроид коробочка + обычный ТВ
Ну и серфинг на этом комбайне — не самоцель, а нечасто требуемая фичаKasperGreen
16.12.2016 16:58Браузер на плойке например предусматривает навигацию перекрестьем. Это удобнее чем двигать курсор аналоговым стиком.
Zzzuhell
16.12.2016 20:39Браузер на плойке например предусматривает навигацию перекрестьем.
А как оно работает? «Перекрестье» (оно же — D-Pad) просто позволяет прыгать по гиперссылкам на странице? Если да, то это один в один модель поведения моего пульта ДУ :)
И именно поэтому клево, когда активная ссылка (на которой сейчас фокус, но клика еще не было) подсвечивается.
hdfan2
16.12.2016 14:46+2Если вам не нравится синий цвет для ссылок, меняйте его, но обязательно ссылки подчёркивайте.
По-моему, как раз наоборот. Сейчас уже де-факто — ссылка всегда синяя, но уже почти нигде не подчёркнутая. За изменение цветов ссылок нужно бить, и желательно ногами.
semibiotic
16.12.2016 15:44+1Для любителей делать ссылки «javascript:;» (например в навигации сайта), IMHO, должен функционировать отдельный раздел ада, причем прижизненного.
mayorovp
16.12.2016 15:54+1Добавлю. Если делается не веб-сайт, а веб-приложение, и предполагаются регулярные переходы пользователя по "маршруту" из одних и тех же страниц — то для этих ссылок надо все-таки сделать состояние
:visitedнеотличимым от обычного состояния.
Alexufo
16.12.2016 16:27-5Так, а собственно от чего бомбануло то?
В 2016 году это может показаться странным, но есть люди которые работают с сайтам посредством > клавиатуры. У некоторых вовсе сломана мышь.
То что кого-то пользуется компьютером со сломанным железом в 2016 году это вас беспокоит, а то что у некоторых может быть в 2016 году IE6-7-8 это вас не беспокоит?) Это не это преступление против таких людей?))
Жалко, что не раскрыли паттерн с подчеркнутыми ссылками border-style dashed и dotted.
:visited, поможет пользователю не забыть какие странички он уже открывал и не открывать их повторно.
Ага, и через пару дней использования документации она вся становится фиолетовой до неизвестного юзеру события когда браузер посчитает за вас что вы снова все забыли и вернет стиль.
KasperGreen
16.12.2016 16:53Для IE6-7-8 есть полифил.
Паттерн с пунктирными ссылками не раскрыт потому, что это кнопка, а не ссылка. Ничего не мешает оформить кнопки как пунктирные ссылки. Благо паттерн Татьянычем раскрыт ещё до появления
<button>.
А для навигации, да. Можно пренебречь
:visitedоформлением. А вот в результатах поиска и статьях эта штука нужная. Как пример выдача гугла, когда через некоторое время повторяешь поисковый запрос или ищешь нечто похожее, это помогает понять какие сайты ты уже посещал и решить посещать их снова или нет.
zhigalin
16.12.2016 18:56+2То что кого-то пользуется компьютером со сломанным железом в 2016 году это вас беспокоит, а то что у некоторых может быть в 2016 году IE6-7-8 это вас не беспокоит?) Это не это преступление против таких людей?))
Шутничку невдомёк что есть люди с нарушениями моторики, деформированными или и вовсе отсутствующими конечностями и слепые…Alexufo
16.12.2016 22:47-2А почему не написали с проблемами зрения и испорченным цветовым восприятием? Тогда любой дизайн придется делать высококонтрастным и практически чернобелым используя ваш аргумент?
А для людей с нарушением моторики удобнее 350 раз таб щелкать чтобы разглядеть едва заметное выделение рамки чтобы попасть на кнопу "ответить" в данном топике?
Или может лучше размеры кнопок не меньше 1 на 2 см делать везде?
Давайте не будем притворятся, что псевдокласс focus решает главную проблему навигации для инвалидов.
zhigalin
17.12.2016 02:24А почему не написали с проблемами зрения и испорченным цветовым восприятием? Тогда любой дизайн придется делать высококонтрастным и практически чернобелым используя ваш аргумент?
А для людей с нарушением моторики удобнее 350 раз таб щелкать чтобы разглядеть едва заметное выделение рамки чтобы попасть на кнопу «ответить» в данном топике?
Или может лучше размеры кнопок не меньше 1 на 2 см делать везде?
Сарказм и argumentum ad absurdum здесь не уместны, ибо как контраст так и масштаб элементов регулируются браузером если особо одарённые десигнеры не вставляют ему палки в колёса.
главную проблему навигации для инвалидов
Не надо изобретать велосипед когда есть WAI-ARIAAlexufo
17.12.2016 03:25Не уместно прикрываться WAI-ARIA, и не ставить целью удобства в дизайне. Это имитация заботы.
Пара сотен ссылок на странице и к чертям летит вся забота.zhigalin
18.12.2016 17:56Или может лучше размеры кнопок не меньше 1 на 2 см делать везде?
Так это был не сарказм?
Тогда извиняюсь.
merlin-vrn
16.12.2016 21:50Это даёт даже больше свободы чем <input type="image" />
Вообще-то <input type="image" /> испокон веков посылает вместе с формой ещё и координаты клика (x=, y=) относительно самой картинки. Например, можно потом делать аналитику типа "по какой части кнопки обычно кликают". Другой способ это сделать подскажете (без javascript)?
KasperGreen
16.12.2016 22:14Поправил
Это даёт даже больше свободы в стилевом оформлении чем
<input type="image" />О координатах совсем забыл, так давно это использовал как и карты изображений. Спасибо, что напомнили.
novrm
17.12.2016 01:46-1Боюсь нарваться на непонимание, но ситуация как в кин-дза-дза: дальтоник оранжевого от зеленого не отличает.
Ссылка, будучи замаскированная под кнопку — сработает всегда «правильно», когда даже отключен скрипт JavaScript или сам JavaScript (что, конечно маловероятно)…
В отличии от кнопки — которая при отключенном скрипте — может «умереть» навсегда…
Мое предпочтение — отключаете скрипт и смотрите сможет ли страница «нормально» выполнить необходимый минимум или или нет при нажатии на кнопки/ссылки…
Хотя это, наверно, дело вкуса, а может и извращенный перфекционизм…ad1Dima
17.12.2016 07:49+2Ссылка, будучи замаскированная под кнопку — сработает всегда «правильно», когда даже отключен скрипт JavaScript или сам JavaScript (что, конечно маловероятно)…
Даже если это не ссылка а JavaScript?
ZoomLS
18.12.2016 23:09>>но доколе
Доколе, Вы будете заливать картинки чёрт знает куда, а не на хабрасторадж?KasperGreen
19.12.2016 01:08Доколе Хабрахабр не будет подгружать их как гитхаб
На своём хосте было удобнее обновлять скриншоты.
Перезалил. Спасибо, что напомнили.
MrCheater
Золотое правило для Web:
Если при нажатии на кнопку, пользователя отправит на другую страницу, то эта кнопка должна быть тегом
<a>. Ссылка с нее должна и копироваться нормально, и в статус-баре браузера отображаться.Starche
Позанудствую: исключая случай сабмита формы.
negodnik
Не соглашусь. Часто делаю сабмит в новую вкладку, это удобно.
musicriffstudio
золотое правило для любого UI — пользователю должно быть понятно что произойдёт если он куда-то тыкнет.
Сечас, в 2016 году, разницы между переходом по ссылке и процессом сабмита страницы (как это задумывалось 20 лет назад) визуально почти нет. Да и самого сабмита порой нет. А URL`ы нечитаемые, типа site.com/do?action=123). И дефолтовое поведение элементов HTML давно пало в неравной борьбе с требованиями маркетологов к внешнему виду.
nightwolf_du
musicriffstudio золотое правило —
делай ссылки — ссылками
кнопки — кнопками, а не , не div, не <что-то>.
список- списком.
таблицу — таблицей.
блок — блоком, абзац абзацем.
Делая, например, таблицу — дивами можно сломать голосовые браузеры, «семантичную верстку», испоганить клавиатурные эвенты — например переход табом между блоками, и.т.п.
С другой стороны, если политика вашего веба — ради 5% пользователей — не запариваться, то да, конечно, можно верстать как хочешь.
Kain_Haart
То-то в вашем комментарии абзацы сделаны не абзацами, а отбиты пустыми строками
KasperGreen
Это уже к парсеру хабрахабра вопрос.
С другой стороны здесь можно писать HTML.
Но писать его в одну строку неудобно.
Символ переноса строки преобразуется в
<br />Кроме того это действительно важно на сайте который разрабатываешь сам. CSS хабрахабра потрогать никто не даст, а вот у себя можно внутренние отступы и расстояние между абзацами настраивать.
Вообще мало ли чего можно нацээсэсить, а вот с
<br />будут некоторые сложности.