» » » Оформляйте стили наведения, фокуса и активного состояния по-разному

 

Оформляйте стили наведения, фокуса и активного состояния по-разному

Автор: admin от 6-11-2019, 05:25, посмотрело: 65

Оформляйте стили наведения, фокуса и активного состояния по-разному
В течение многих лет я оформлял состояния элементов :hover, :focus и :active одинаково. Не помню точно, когда именно начал это делать. Но это далеко не лучший подход. Почему, постараюсь объяснить в этой статье.



стилизовать его по-своему, помните об этих четырёх моментах:




  • Добавление обводки (outline)

  • Создание анимаций

  • Изменение background-color

  • Изменение color



  • Поскольку изменение свойств background-color и color часто производится при :hover, имеет смысл состояние :focus оформлять с помощью обводки или анимации.



    Вы можете использовать комбинации свойств outline, border и box-shadow для создания интересных стилей фокуса. Как это можно сделать, я описал в статье "Creating a custom focus style".



    button {
      background-color: #dedede;
    }
     
    button:hover {
      background-color: #aaa;
    }
     
    button:focus {
      outline: none;
      box-shadow: 0 0 0 3px lightskyblue;
    }
    


    Оформляйте стили наведения, фокуса и активного состояния по-разному


    Стилизация активного состояния (:active)



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



    На веб-сайтах этот отклик также полезен. Можно стилизовать момент «нажатия кнопки» с помощью :active. Вызывается это состояние, когда вы взаимодействуете с элементом. Под взаимодействием в данном случае подразумевается:




    1. Удержание левой кнопки мыши на элементе (даже когда он не в фокусе)

    2. Удержание кнопки пробела (на кнопках)



    button:active {
      background-color: #333;
      border-color: #333;
      color: #eee;
    }
    


    Оформляйте стили наведения, фокуса и активного состояния по-разному


    Две особенности, которые следует принять к сведению:




    1. Удержание пробела вызывает состояние :active у кнопок (

    2. Enter запускает ссылки но не вызывает активное состояние. Пробел не запускает ссылки вообще



    Стили ссылок по умолчанию



    Ссылки имеют стили активного состояния по умолчанию. При нажатии они становятся красными



    Оформляйте стили наведения, фокуса и активного состояния по-разному


    Взаимосвязь между :active и :focus



    При удержании левой кнопку мыши на фокусируемом элементе, вызывается его активное состояние. Но одновременно с этим вызывается и состояние фокуса.



    Когда вы отпускаете левую кнопку мыши, фокус остаётся на элементе.



    Это относится к большинству фокусируемых элементов, кроме ссылок и кнопок.



    Для ссылок:




    1. При удержании левой кнопки мыши в Firefox и Chrome вызываются состояния :active и :focus. В Safari – только состояние :active (проверено только на Mac OS)

    2. Если отпустить кнопку мыши, :focus остаётся на ссылке (если атрибут href не ссылается на id на этой же странице). В Safari фокус возвращается на



    Для кнопок:




    1. Когда вы удерживаете левую кнопку мыши: оба состояния :active и :focus вызываются только в Chrome. Состояние :focus совсем не вызывается в Safari и Firefox (Mac). Я написал про это странное поведение здесь.



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



    document.addEventListener('click', event => {
      if (event.target.matches('button')) {
        event.target.focus()
      }
    })
    


    Добавление этого кода изменит поведение нажатия кнопок на следующее:




    1. При удержании кнопки мыши, :active вызывается во всех браузерах, :focus только в Chrome

    2. Если отпустить кнопку мыши, вызывается :focus в Safari и Firefox (Mac OS). :focus остаётся на кнопке во всех браузерах



    Оформляйте стили наведения, фокуса и активного состояния по-разному
    Поведение кнопок в Safari после добавления фрагмента JS-кода



    Теперь, когда вы знаете всё необходимое о состояниях hover, focus и active, я хочу поговорить о стилизации всех трёх



    Волшебная комбинация



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



    .element:hover,
    .element:active {
      /* Изменить цвет фона/текста  */
    }
     
    .element:focus {
      /* Показать обводку */
    }
    


    Для пользователей мыши:




    1. Когда пользователь наводит на элемент, меняется background-color (и/или color). Происходит отклик.

    2. Когда пользователь кликает на элемент, показывается обводка фокуса. Происходит отклик.



    Оформляйте стили наведения, фокуса и активного состояния по-разному


    Для пользователей клавиатуры:




    1. Когда пользователь выбирает элемент кнопкой Tab, показывается обводка фокуса. Происходит отклик.

    2. Когда они взаимодействуют с элементом, меняется background-color (и/или color). Происходит отклик.



    Оформляйте стили наведения, фокуса и активного состояния по-разному


    Лучшее из обоих миров!




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

    2. Если будете проверять, не используйте Codepen. Состояние фокуса для ссылок в Codepen ведёт себя очень странно. Если навести курсор на ссылку, обводка фокуса удалится. Почему? Я не знаю. Порой мне кажется, что лучше всего проверять подобные вещи без использования дополнительных инструментов. Просто старые добрые HTML, CSS, JS.



    Не волшебная (но может даже лучше) комбинация



    Как я упомянул выше, клики на кнопки имеют странное поведение в Safari и Firefox на Mac OS. Если вы добавили фрагмент javascript-кода, который я предлагал выше, магическая комбинация всё еще работает. Но не идеально.



    Вот что произойдёт в Safari и Firefox на Mac OS:




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

    2. Когда пользователи отпускают кнопку, элемент получает фокус



    Оформляйте стили наведения, фокуса и активного состояния по-разному


    Если вы считаете, что этого достаточно, то волшебная комбинация работает. Можете на этом и остановиться.



    Но если вы считаете такое поведение недостаточно доступным, может возникнуть желание стилизовать состояния :hover, :focus и :active по отдельности.



    .element:hover {
      /* Изменить цвет фона/текста  */
    }
     
    .element:active {
      /* Иные изменения в цвете фона и текста */
    }
     
    .element:focus {
      /* Показать обводку */
    }
    


    Оформляйте стили наведения, фокуса и активного состояния по-разному
    Поведение кнопки в Safari, если были стилизованы все три состояния



    Вот и всё! Благодарю за чтение и надеюсь, сегодня вы узнали что-то новое.

    Источник: Хабр / Интересные публикации

    Категория: Веб-разработка, Game Development

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

    Добавление комментария

    Имя:*
    E-Mail:
    Комментарий:
    Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
    Введите два слова, показанных на изображении: *