Заметки про React: “Замена кода на React на CSS :has псевдокласс Через CSS можно стилизова…”

Замена кода на React на CSS :has псевдокласс

Через CSS можно стилизовать дочерние элементы на основании родительского элемента:


.content .card {
  background: #f0f0f0;
}

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


.card:has(img) {
  border-top: 10px solid #fee6ec;
}

Псевдокласс :has поддерживается всеми основными браузерами, глобально 92% пользователей поддерживают его.

С помощью псевдокласса :has можно сделать многие фичи без написания кода на React. В своем блоге Надя Макаревич рассказала несколько примеров использования :has, которые заменяют код на React. Например, стилизация карточки и соседних карточек при фокусе на кнопки действий внутри карточки. Пример CSS стилей:


// Все карточки после карточки с фокусом на кнопку «открытия»
.card:has([data-action='open']:focus-visible) ~ .card,

// Все карточки перед карточкой с фокусом на кнопку «открытия»
.card:has(~ .card [data-action='open']:focus-visible) {
  filter: greyscale();
  background-color: #f6f7f6;
}

// Стиль карточки с фокусом на кнопку «открытия»
.card:has([data-action='open']:focus-visible) {
  transform: scale(1.02);
  border-top: 10px solid #c3dccf;
}

https://www.developerway.com/posts/replacing-react-with-css