Anchor Positioning

カードの背景をホバーで追従させるSample


概要
- Chromeで導入された `Anchor Positioning` を使用すればCSSのみで背景をホバーで追従させることが可能 - `Anchor Positioning` の指定が非対応の環境で悪さをすることはないため、プログレッシブ・エンハンスメントの一環で導入しても差し支えない - `@supports` 機能クエリを使用して、 `Anchor Positioning` 非対応のブラウザでは背景色を表示させるフォールバック指定を追加

デモ

コード

CSS

 

.card-wrapper {
  --_column-min-size: calc(320 * 1rem / 16);
  --_background: #f5f5f5;
  --_duration: 0.3s;

  position: relative;
  display: block grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(min(var(--_column-min-size), 100%), 1fr)
  );
  max-width: 1024px;
  margin-inline: auto;

  &::after {
    content: "";
    position: absolute;
    inset: anchor(--card start);
    z-index: -1;
    width: anchor-size(--card inline);
    height: anchor-size(--card block);
    border-radius: 4px;
    background-color: var(--_background);
    transition-duration: var(--_duration);
    transition-property: inset, width, height;
  }
}

.card {
  /* Anchor Positioningに対応していないブラウザ用 */
  @supports not (anchor-name: --a) {
    transition: background-color var(--_duration);

    &:has(:any-link:hover) {
      @media (any-hover: hover) {
        background-color: var(--_background);
      }
    }
  }

  /* anchor-nameを指定 */
  &:where(:hover, :has(:focus-visible)) {
    anchor-name: --card;
  }
}

参照