CSS box-shadow против контура - PullRequest
Новая
       28

CSS box-shadow против контура

0 голосов
/ 01 октября 2018

Мне не удалось найти дубликат, и вы можете найти кучу постов в блоге, в которых предлагается использовать box-shadow для состояния фокуса элемента вместо outline, так как он более гибкий с точки зрения стиля и также следуетborder-radius элемента, который вы разрабатываете в отличие от outline, который всегда остается прямоугольным.

Считается ли хорошей практикой заменять outline на box-shadow?Есть ли какие-либо предостережения от этого?

Ответы [ 2 ]

0 голосов
/ 02 октября 2018

Существует серьезное предостережение относительно использования box-shadow в качестве индикатора фокусировки.Он не работает в высококонтрастных темах Windows.

Когда включена высококонтрастная тема Windows, веб-браузеры, поддерживающие ее, будут переопределять определенные свойства CSS.Firefox, IE и Edge делают это, но браузеры на основе Chromium этого не делают (пока).

  • Цвета переднего плана переопределяются, чтобы соответствовать теме Windows.Это относится к тексту, границам и контурам.
    • Обратите внимание, что ключевое слово CSS transparent является значением цвета, и оно также здесь переопределяется.Прозрачная рамка становится видимой.
  • Цвета фона переопределяются в соответствии с темой Windows.
  • Фоновые изображения удаляются (включая CSS-градиенты) в IE и Firefox.
    • Край сохраняет фоновые изображения, но применяет сплошной цвет фона к тексту.Поэтому части фонового изображения могут быть не видны.
  • box-shadow не применяется, поэтому он не будет работать в качестве индикатора фокусировки.

Следующий стиль фокуса НЕ будет виден, когда действует высококонтрастная тема Windows: 

a:focus {
  box-shadow: 0px 0px 5px 5px rgba(0,0,255,1);
  outline: none;
}

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

a:focus {

  /* Visible in the full-colour space */
  box-shadow: 0px 0px 5px 5px rgba(0,0,255,1);

  /* Visible in Windows high-contrast themes */
  outline-colour: transparent;
  outline-width: 2px;
  outline-style: dotted;
}
0 голосов
/ 02 октября 2018

Считается ли хорошей практикой заменять контур контурной тенью?Есть ли какие-либо предостережения об этом?

У WCAG есть конкретный сбой для этого:

F78: сбой критерия успеха 2.4.7 из-за контуров элементов стиля играничит таким образом, что удаляет или делает невидимым визуальный индикатор фокуса

Обратите внимание, что пользователи могут захотеть настроить собственный индикатор контура в соответствии со своими особенностями (более высокая контрастность, определенный цвет, размер и т. д.)..).Поэтому, удалив его и заменив его box-shadow, вы не позволите их собственным настройкам иметь приоритет над вашими.

...