Стилизуйте состояния hover, focus и active по-разному | by Uriy
Перевод статьи Zell Liew Style hover, focus, and active states differently
Много лет я стилизовал hover, focus и active одинаково. Я даже не могу вспомнить, когда я начал это делать таким образом. Вот пример кода, который я обычно использую:
// Not the best approach. I'll explain why in this article
.selector {
&:hover,
&:focus,
&:active {
// Styles here
}
}
Как только я начал уделять больше внимания доступности (и как следствие уделять больше внимания состоянию focus), я начал понимать, что мы не должны стилизовать состояния hover, focus и active одинаковым образом.
Состояния hover, focus и active не должны быть стилизованы одинаково.
Вот простая причина для этого: это разные состояния!
Сегодня, я хотел бы показать вам магический способ стилизовать эти три состояния без особых усилий.
Давайте начнем с hover.
Состояние hover инициируется, когда пользователь наводит свою мышь на элемент.
Состояние hover обычно представлено изменениями background-color (и\или color). Разница стилей между состоянием hover и его отсутствием не обязательно должна быть ярко выраженная, потому что пользователь уже знает, что он навел мышку на что-то.
button {
background-color: #dedede;
}button:hover {
background-color: #aaa;
}focus активируется, когда происходит фокусировка на элементе. Это может происходить в одном из двух случаев:
- Когда пользователь переключается с помощью кнопки tab между элементами
- Когда пользователь кликает на элемент, который поддерживает состояние focus
Следующие элементы поддерживают состояние focus:
- Ссылки (<a>)
- Кнопки (<button>)
- Элементы формы (input, textarea, и тому подобное)
- Элементы со свойством tabindex
Пара важных моментов:
- Пользователь не может переключиться с помощью кнопки tab на элемент со свойством tabindex=”-1″, но он может кликнуть на него, тем самым переключив элемент в состояние focus
- В браузерах Safari и Firefox (на Mac) клик на элемент button не вызывает состояние фокусировки.
Подробнее по этой ссылке https://zellwk.com/blog/inconsistent-button-behavior/ - Когда вы нажимаете на элемент <a>, фокус остается на <a> до тех пора, пока вы не уберете палец с мыши. Когда вы все же уберете палец, фокус будет смещен в другой элемент, если атрибут href указывает валидный id элемента на вашей странице.
В случае состояния focus нас больше интересует, когда пользователь переключается между элементами с помощью кнопки tab, нежели когда он кликает на них мышкой.
Когда пользователь жмет tab, он не знает на какой элемент будет смещен фокус. Он может только догадываться. И поэтому нам требуется явное изменение стилей, чтобы пользователь заметил, что изменился фокус.
Использование стилизации по умолчанию состояния focus в большинстве случаев достаточно. Если же вы хотите сделать свой собственный дизайн для состояния focus, то подумайте о следующих вещах:
- Использование css свойства outline.
- Создание анимации с движением.
- Изменение css свойства background-color.
- Изменение css свойства color.
Так как зачастую css свойства background-color и color используются для состояния hover, то имеет смысл использовать css свойство outline или анимации для состояния focus.
Вы можете комбинировать свойства outline, border и box-shadow, чтобы создать хорошо выглядящие стили для focus. Я писал об этом в статье “Создание своих стилей для focus” https://zellwk.com/blog/creating-focus-style/
button {
background-color: #dedede;
}button:hover {
background-color: #aaa;
}button:focus {
outline: none;
box-shadow: 0 0 0 3px lightskyblue;
}Когда вы взаимодействуете с различными вещами в реальной жизни, вы ожидаете ту или иную обратную связь. Например, если вы жмете кнопку, то вы ожидаете от кнопки быть нажатой.
Обратная связь так же полезна на веб-сайтах. Вы можете стилизовать нажатие кнопки с помощью состояния active.
Состояние active инициируется, когда вы взаимодействуете с элементами. Под взаимодействием понимается следующее:
- Удержание левой кнопки мыши на элементе (даже на тех, которые не поддерживают состояние focus).
- Удержание кнопки пробела (на элементах button).
button:active {
background-color: #333;
border-color: #333;
color: #eee;
}Два странных момента, на которые нужно обратить внимание:
- Удержание кнопки пробел вызывает состояние active на элементах button, но удержание кнопки ввод этого не делает.
- Нажатие на кнопку ввод активирует переход по ссылке, но не меняет их состояние на active. Нажатие на пробел не делает этого вообще.
Стили по умолчанию для ссылок
Ссылки имеют свой стиль по умолчанию. Они окрашиваются в красный цвет, когда вы по ним переходите.
Связь между состояниями active и focus
Когда вы зажимаете левую кнопку мыши на элементе, который поддерживает состояние focus, то вы переводите его в состояние active.
В тоже время вы так же вызываете состояние focus.
👆 Это условие работает для всех элементов, на которых возможна фокусировка, кроме ссылок и кнопок.
Для ссылок:
- Когда вы зажимаете левую кнопку мыши: инициализируются состояния active и focus в браузерах Firefox и Chrome, но в браузере Safari (проверено только на Mac) инициализируется только состояние active.
- Когда вы отпускаете левую кнопку мыши: состояние focus остается на ссылке (кроме тех случаев, когда ссылка ведет на элемент на той же самой странице), но в браузере Safari фокус переходит обратно на элемент body.
Для кнопок:
- Когда вы зажимаете левую кнопку мыши: инициализация состояний active и focus происходит только в браузере Chrome. Состояние focus не инициализируется при тех же самых действиях в браузерах Safari и Firefox (Mac). Я писал об этом странном поведении https://zellwk.
com/blog/inconsistent-button-behavior/
Если вы хотите, чтобы клик на кнопку переводил ее в состояние focus, то вам нужно использовать следующий JavaScript как можно раньше (зачем это делать, вы можете прочитать по ссылке выше).
document.addEventListener('click', event => {
if (event.target.matches('button')) {
event.target.focus()
}
})Как только вы использовали этот код, клик на кнопках будет вызывать следующее поведение:
- Когда вы зажимаете левую кнопку мыши: инициализуется состояние active во всех браузерах. При этом focus происходит только в Chrome.
- Когда вы отпускаете левую кнопку мыши: переключается состояние focus в браузерах Safari и Firefox (Mac). Фокус остается на кнопках в остальных браузерах.
Поведение кнопки в браузере Safari после добавления приведенного выше фрагмента JavaScript
Теперь вы знаете все о состояниях hover, focus и active.
Давайте поговорим о их стилизации.
Следующая магическая комбинация позволяет пользователю получать обратную связь, когда происходит изменение состояний hover, focus и active, и взаимодействовать с элементами.
Вот тот кусочек css, который вам потребуется:
.element:hover,
.element:active {
/* Change background/text color */
}.element:focus {
/* Show outline /*
}
Для пользователей мыши:
- Когда пользователь наводит на элемент, то меняются свойства background-color и\или color. Таким образом он получают обратную связь.
- Когда пользователь кликает на элемент, используется свойство outline. Таким образом он получают обратную связь.
Для пользователей клавиатуры:
- Когда пользователь переключается между элементами с помощью tab, то используется свойство outline. Таким образом он получают обратную связь.
- Когда пользователь взаимодействует с элементов, то меняются свойства background-color и\или color.
Таким образом он получают обратную связь.
Лучшее из двух миров!
- Я не очень тщательно проверял эту магическую комбинацию. Это лишь доказательство концепции. Я буду благодарен, если вы поможете мне различными тестами и дадите мне знает, как она будет использоваться в реальной жизни.
- Для ваших тестов не используете Codepen. Поведение состояния focus очень странно в Codepen. Если вы наведете на ссылку, то контур (outline) ссылки будет удален. Почему? Я не знаю. Иногда я думаю, что лучше проверять подобные вещи без всяких модных инструментов. Используйте старый добрый HTML, CSS и JS.
Как я уже упоминал ранее, нажатия на кнопки могут провоцировать странное поведение в браузерах Safari и Firefox (Mac). Если вы добавите фрагмент JavaScript, который я ранее показал вам, то магическая комбинация будет работать. Однако, это неидеальное решение.
Вот что происходит в случае Safari и Firefox (Mac):
- Когда пользователь зажимает левую кнопку мыши, ничего не меняется.
- Когда пользователь отпускает левую кнопку мыши, то происходит фокусировка на элементе.
Если для вас этого достаточно, то тогда магическая комбинация работает достаточно хорошо. Вам больше ничего не требуется.
Но если вы считаете иначе, то вам необходимо стилизовать состояния hover, focus и active независимо друг от друга.
.element:hover {
/* Change background/text color */
}.element:active {
/* Another change in background/text color */
}.element:focus {
/* Show outline /*
}Поведение кнопки в Safari, если вы применили все три стиля.
И это все! Надеюсь, что вы выучили сегодня что-то полезное.
Спасибо за чтение. Помогла ли вам эта статья? Если да, то я надеюсь, вы поделитесь ей. Это может помочь кому-то еще. Большое спасибо!
Герберт Гувер | Белый дом
Перейти к разделу
Выбрать
президенты
Джордж Вашингтон
Джон Адамс
Томас Джеферсон
Джеймс Мэдисон
Джеймс Монро
Джон Куинси Адамс
Эндрю Джексон
Мартин Ван Бюрен
Уильям Генри Харрисон
Джон Тайлер
Джеймс К.
Полк
Закари Тейлор
Миллард Филлмор
Франклин Пирс
Джеймс Бьюкенен
Абрахам Линкольн
Эндрю Джонсон
Улисс С. Грант
Резерфорд Б. Хейс
Джеймс Гарфилд
Честер А. Артур
Гровер Кливленд
Бенджамин Харрисон
Гровер Кливленд
Уильям МакКинли
Теодор Рузвельт
Уильям Ховард Тафт
Вудро Вильсон
Уоррен Г. Хардинг
Кэлвин Кулидж
Герберт Гувер
Франклин Д. Рузвельт
Гарри С. Трумэн
Дуайт Д. Эйзенхауэр
Джон Ф. Кеннеди
Линдон Б. Джонсон
Ричард М. Никсон
Джеральд Р. Форд
Джеймс Картер
Рональд Рейган
Джордж Буш-старший
Уильям Дж. Клинтон
Джордж Буш
Барак Обама
Дональд Дж. Трамп
Джозеф Р. Байден-младший
Биография президента Гувера и бывших президентов предоставлена Исторической ассоциацией Белого дома.
Перед тем, как стать 31-м президентом Америки с 1929 по 1933 год, Герберт Гувер добился международного успеха как горный инженер и всемирную известность как «Великий гуманитарный деятель», который кормил раздираемую войной Европу во время и после Первой мировой войны.
Сын Герберт Кларк Гувер, кузнец-квакер, принес на пост президента беспрецедентную репутацию инженера, администратора и гуманиста на государственной службе.
Родился в деревне Айова в 1874 году, вырос в Орегоне. Он поступил в Стэнфордский университет, когда он открылся в 1891 году, получив диплом горного инженера.
Он женился на своей возлюбленной из Стэнфорда Лу Генри, и они уехали в Китай, где он работал ведущим инженером Китая в частной корпорации. В июне 1900 г. восстание боксеров застало Гуверов в Тяньцзине. Почти месяц поселок находился под шквальным обстрелом. Пока его жена работала в больницах, Гувер руководил строительством баррикад, а однажды, рискуя жизнью, спасал китайских детей.
За неделю до того, как Гувер отпраздновал свое 40-летие в Лондоне, Германия объявила войну Франции, и американский генеральный консул попросил его помочь вернуть застрявших туристов домой. За шесть недель его комитет помог 120 000 американцев вернуться в Соединенные Штаты. Затем Гувер приступил к гораздо более сложной задаче — прокормить Бельгию, захваченную немецкой армией.
После того, как Соединенные Штаты вступили в войну, президент Вильсон назначил Гувера главой продовольственного управления.
Ему удалось сократить потребление продуктов, необходимых за границей, и избежать нормирования дома, но при этом кормить союзников.
После перемирия Гувер, член Высшего экономического совета и глава Американского управления помощи, организовал доставку продовольствия для миллионов голодающих в Центральной Европе. Он оказал помощь голодающей Советской России в 1921 году. Когда критик спросил, не помогает ли он таким образом большевизму, Гувер возразил: «Двадцать миллионов человек голодают. Какой бы ни была их политика, они будут накормлены!»
Проработав министром торговли при президентах Хардинге и Кулидже, Гувер стал кандидатом в президенты от республиканцев в 1928. Тогда он сказал: «Сегодня мы в Америке ближе к окончательной победе над бедностью, чем когда-либо прежде в истории любой страны». Его избрание, казалось, обеспечило процветание. Однако через несколько месяцев фондовый рынок рухнул, и нация погрузилась в депрессию.
После крушения Гувер объявил, что хотя он и будет поддерживать баланс федерального бюджета, он сократит налоги и увеличит расходы на общественные работы.
В 1931 году последствия из Европы усугубили кризис, несмотря на то, что президент представил Конгрессу программу, предусматривающую создание Финансовой корпорации реконструкции для помощи бизнесу, дополнительную помощь фермерам, столкнувшимся с потерей права выкупа заложенного имущества, банковскую реформу, ссуду штатам для пропитания безработных, расширение общественных работ и радикальная государственная экономия.
В то же время он повторил свое мнение о том, что хотя люди не должны страдать от голода и холода, забота о них должна быть прежде всего местной и добровольной обязанностью.
Его противники в Конгрессе, которые, по его мнению, саботировали его программу ради собственной политической выгоды, несправедливо изображали его бессердечным и жестоким президентом. Гувер стал козлом отпущения за депрессию и потерпел сокрушительное поражение в 1932 году. В 1930-е годы он стал сильным критиком Нового курса, предостерегая от тенденций к этатизму.
В 1947 году президент Трумэн назначил Гувера членом комиссии, которая избрала его председателем для реорганизации исполнительных департаментов.
Он был назначен председателем аналогичной комиссии президентом Эйзенхауэром в 1953 году. Благодаря рекомендациям обеих комиссий удалось добиться экономии во многих странах. На протяжении многих лет Гувер написал множество статей и книг, над одной из которых он работал, когда умер в возрасте 90 лет в Нью-Йорке 20 октября 1964 года.
Узнайте больше о супруге Герберта Гувера, Лу Генри Гувере.
Нет «стиля наведения» для классов :before-/:after-pseudo? — CSS
arc9098845005 1
Эй, ребята,
, пожалуйста, взгляните на это упражнение:
https://www.codecademy.com/paths/front-end-engineer-career-path/tracks/fecp-22-improved-styling -with-css/modules/wdcp-22-learn-secondary-navigation/уроки/ui-breadcrumb-nav/упражнения/UI-breadcrumb-nav-styles
В соответствии с последними шагами стрелки-хлебные крошки должны окрашиваться ПОЛНОСТЬЮ в синий цвет при наведении курсора, или я ошибся?
Я не понимаю, почему кончики и хвосты моих стрелок не меняют цвет.
Только «тело» станет синим… Вот CSS, который я написал для этого упражнения. Какие-либо предложения?
.breadcrumb {
выравнивание текста: по левому краю;
}
.breadcrumb li {
}
.breadcrumb a {
color: #fff;
фон: темно-голубой;
украшение текста: нет;
позиция: относительная;
высота: 30 пикселей;
высота строки: 30 пикселей;
выравнивание текста: по центру;
поле справа: 15 пикселей;
заполнение: 0 5px;
}
.breadcrumb a::before,
.breadcrumb a::after {
content: “”;
позиция: абсолютная;
бордюр: сплошной;
граница-ширина: 15px 5px;
}
.breadcrumb a::before{
слева: -10px;
цвет границы: темно-голубой;
цвет границы слева: прозрачный;
}
.breadcrumb a::after{
осталось: 100%;
цвет границы: прозрачный;
}
.breadcrumb a:hover {
background-color: blue;
.
breadcrumb a:hover:before {
цвет границы: синий;
цвет границы слева: прозрачный;
}
.breadcrumb a:hover:after {
border-left-color: blue;
}
Киративвд 2
Привет,
Если у вас все еще возникают проблемы с этим уроком, внимательно посмотрите на свой CSS, особенно на этот раздел:
arc9098845005 3
Привет @kirativewd,
Я проверил этот раздел, что я точно не скопировал, так это «::» для «::before» и «::after», но это не изменило поведение. Это все еще не работает.
Что я заметил, так это то, что консоль не окрашивает разделы «a:hover:before» и «a:hover:after» обычно красным (как другие псевдоклассы).
