Блог

У меня небольшая ошибка, из-за которой некоторые члены моей команды видят стили фокусировки по-разному на одном и том же элементе. Они используют Chrome 86 на Mac. Я использую Chrome 79.

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

Однако мои коллеги видят очень узкую границу размером 2 пикселя вокруг сфокусированного элемента.

Код для элемента:

 <button>
    <img ... />
</button>
  

Изображение внутри кнопки было overflow:hidden применено для создания эффекта обрезки по центру.

Вот фрагмент

 button {
    display: inline-flex;
    width: 100px;
    height: 100px;
    align-items: center;
    overflow: hidden;
    position: relative;
    margin-right: 8px;
    margin-top: 8px;
    border: 0;
    cursor: pointer;
}

img {
  margin: 0 auto;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    right: 50%;
    top: 50%;
    transform: translate(50%, -50%);
}  

 <button>
  <img src="https://picsum.photos/id/1062/100/50">
</button>  

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

Стиль фокусировки, который я вижу:

 outline: -webkit-focus-ring-color auto 5px;
  

Мои коллеги видят:

 outline: -webkit-focus-ring-color auto 2px;
  

Однако это не универсально в их браузерах. Они видят 5 пикселей на других элементах.

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

Мои основные вопросы

1. Что заставляет браузер выбирать толщину кольца фокусировки?
2. Может overflow:hidden ли быть причиной этой ошибки на изображении внутри?
3. Почему я не вижу проблему в Chrome 79?

Что заставляет браузер выбирать толщину кольца фокусировки?

Встроенная таблица стилей браузера («стили пользовательского агента»). Это может изменяться при каждом крупном обновлении браузера — это также зависит от платформы (например, Chrome 86 на Mac будет отображать вещи иначе, чем Chrome 86 в Windows 10) — поэтому вы не должны зависеть от каких-либо конкретных правил таблицы стилей user-agent, чтобы ваша веб-страница отображалась правильно.

Может overflow:hidden ли быть причиной этой ошибки на изображении внутри?

Я сомневаюсь в этом.

Почему я не вижу проблему в Chrome 79?

Потому что Chrome изменил свои стили пользовательских агентов для :focus и :focus-visible в Chrome 86.

Ранее в этом году Chromium был обновлен и получил новый внешний вид.

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

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

Мое кольцо фокусировки имеет размер всего 1 пиксель и черное, так что это дает вам представление о том, насколько разнообразны стили (Chrome 86.0.4240.111 в Windows).

Специальные возможности

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

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

Это просто не работает в реальном мире. Что делать, если ваш сайт имеет синий фон? (Да, я знаю, что браузеры становятся умнее при учете этого, но в плане доступности нам нужно поддерживать вплоть до IE8!). Кроме того, что делать, если у вас сложный виджет, который меняет цвет?

Стиль фокусировки чтобы он соответствовал веб-сайту, вы хотите, чтобы коэффициент контрастности окружающих элементов был не менее 3: 1. Для действительно сложных сайтов вам может потребоваться другой цвет кольца фокусировки в зависимости от расположения фона, чтобы сохранить этот коэффициент контрастности.

Создайте свои кольца фокусировки!

@Dai справедливо отметил, что этот раздел изначально был не очень понятным.

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

Учитывайте, где они размещены на странице (их окружение), чтобы обеспечить достаточный цветовой контраст (как упоминалось ранее, минимум 3: 1 с окружением) и убедитесь, что они хорошо видны (не зря их называют индикаторами видимого фокуса).

Как сказал @Dai, не используйте это как возможность попробовать проявить свои творческие способности, пурпурные кольца фокусировки шириной 20 пикселей не нужны (и, возможно, могут быть недоступны). Сделайте их простыми и согласованными по всему сайту.

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

Я склоняюсь к контуру размером 2 пикселя и смещению контура на 2 пикселя, чтобы убедиться, что он виден, поскольку небольшое пустое пространство вокруг элемента облегчает его просмотр.

 button {
    display: inline-flex;
    width: 100px;
    height: 100px;
    align-items: center;
    overflow: hidden;
    position: relative;
    margin-right: 8px;
    margin-top: 8px;
    border: 0;
    cursor: pointer;
}

img {
  margin: 0 auto;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    right: 50%;
    top: 50%;
    transform: translate(50%, -50%);
}

.better:focus{
  outline: 2px solid #333;
  outline-offset: 2px;
}  

 <h2>no image standard button</h2>

<button>
  button with text
</button>

<h2>standard</h2>

<button>
  <img src="https://picsum.photos/id/1062/100/50">
</button>

<h2>better</h2>
<button class="better">
  <img src="https://picsum.photos/id/1062/100/50">
</button>  

О, и :focus-visible будет здорово, когда он наберет обороты, но на данный момент у него не очень хорошая поддержка, поэтому убедитесь, что вы его заполняете, если используете его.

Контур при фокусировке, если он не задан в CSS, фактически определяется настройками браузера.

Здесь вы уже можете видеть, как разные браузеры ведут себя в разных браузерах на Windows и Mac. Поэтому я не удивлюсь, что эти настройки меняются от версии к другой.