Не разделяйте запятой :focus-within для лучшей кроссбраузерной поддержки

Псевдокласс :focus-within позволяет выбрать родительский элемент, когда любой из его дочерних элементов находится в фокусе. Допустим, что нужно показать дополнительные элементы, когда на <div> наведен курсор:

CSS

div:hover .extra-stuff {
  /* показать */
}

Чтобы переводить фокус на элементы класса .extra-stuff, расположенные на вкладках, можно использовать следующий код:

CSS

div:hover .extra-stuff,
div:focus-within .extra-stuff {
  /* показать */
}

Но возникает другая проблема. Браузеры игнорируют весь селектор, если не понимают какую-то его часть. Поэтому браузер, который не поддерживает псевдокласс :focus-within, проигнорирует приведенный выше CSS-кода. Поэтому селектор :hover не сработает.

Чтобы этого не случилось, используем приведенный ниже код.

CSS

div:hover .extra-stuff {
  /* показать */
}
div:focus-within .extra-stuff {
  /* показать */
}

Так уже лучше, но будет слишком много повторений. Но если использовать препроцессор Sass:

SCSS

@mixin reveal {
  .extra-stuff {
     transform: translateY(0);
  }
}
div:hover {
  @include reveal;
}
div:focus-within {
  @include reveal;
}

По-моему, это отличный пример использования нативных CSS-миксинов.

Данная публикация представляет собой перевод статьи «Don’t comma-separate :focus-within if you need deep browser support» , подготовленной дружной командой проекта Интернет-технологии.ру

Меню