Safari先行CSSカタログ — :headingもcolor-mixもChrome未対応で安全に使う

/* Before: 6つ列挙する従来の書き方（全ブラウザ対応） */
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-wrap: balance;
}

/* After: Safari 27 では :heading に置き換え */
@supports selector(:heading) {
  .prose :heading {
    line-height: 1.4;
    letter-spacing: 0.02em;
    text-wrap: balance;
  }
}

/* 応用: 特定レベルだけ除外する例 */
@supports selector(:heading) {
  /* h1 以外の見出しにだけマージンを付ける */
  .prose :heading:not(h1) {
    margin-top: 2em;
  }
}
/* 未対応ブラウザ向けフォールバック */
@supports not selector(:heading) {
  .prose h2,
  .prose h3,
  .prose h4,
  .prose h5,
  .prose h6 {
    margin-top: 2em;
  }
}

<div id="hd1-wrap" style="font-family:sans-serif;">
  <p id="hd1-status" style="font-size:13px;padding:8px 12px;border-radius:6px;background:#f0f3f5;">判定中…</p>
  <div class="hd1-prose" style="margin-top:12px;">
    <h1 style="font-size:20px;margin:8px 0;">大見出し</h1>
    <h2 style="font-size:17px;margin:8px 0;">中見出し</h2>
    <h3 style="font-size:15px;margin:8px 0;">小見出し</h3>
    <p style="font-size:13px;color:#555;">対応時は青バー、未対応時は灰バーになります。</p>
  </div>
</div>
<style>
  .hd1-prose h1, .hd1-prose h2, .hd1-prose h3 {
    border-left: 6px solid #9fb0c3;
    padding-left: 8px;
  }
  @supports selector(:heading) {
    .hd1-prose :heading {
      border-left-color: #3b5ba9;
    }
  }
</style>
<script>
  (() => {
    let ok = false;
    try {
      ok = document.querySelector(':heading') !== null;
    } catch (err) {
      ok = false;
    }
    const st = document.getElementById('hd1-status');
    st.textContent = ok
      ? ':heading に対応：青バーが :heading 指定の証拠'
      : ':heading 未対応：灰バー（フォールバック表示）が正解';
    st.style.background = ok ? '#e4eaf4' : '#fdf0e6';
  })();
</script>

:root {
  --brand: #3b5ba9;
  --accent: #4fa3c4;
}

.card {
  /* 3色を比率付きで混色: ベース7割・アクセント2割・白1割 */
  --tint: color-mix(in oklab, var(--brand) 70%, var(--accent) 20%, white 10%);
  background: var(--tint);
  border: 1px solid color-mix(in oklab, var(--brand) 60%, black);
}

/* 不透明度だけ変える: Sass の transparentize() 相当が不要に */
.card-muted {
  color: alpha(var(--brand), 60%);
}
.card-faint {
  background: alpha(var(--tint, #3b5ba9), 12%);
}

@supports not (color: color-mix(in oklab, red 50%, blue)) {
  .card { background: #5a76b8; }
  .card-muted { color: #3b5ba9; }
  .card-faint { background: #eef1f6; }
}

<div id="mx1-wrap" style="font-family:sans-serif;">
  <p id="mx1-status" style="font-size:13px;padding:8px 12px;border-radius:6px;background:#f0f3f5;">判定中…</p>
  <div style="display:flex;gap:8px;margin-top:12px;">
    <div class="mx1-a" style="flex:1;height:64px;border-radius:8px;"></div>
    <div class="mx1-b" style="flex:1;height:64px;border-radius:8px;"></div>
    <div class="mx1-c" style="flex:1;height:64px;border-radius:8px;"></div>
  </div>
  <p style="font-size:12px;color:#555;">左から base / tint / faint。未対応時はベタ色フォールバックになります。</p>
</div>
<style>
  .mx1-a { background: #3b5ba9; }
  .mx1-b { background: #5a76b8; }
  .mx1-c { background: #eef1f6; }
  @supports (background: color-mix(in oklab, red 50%, blue)) {
    .mx1-a { background: #3b5ba9; }
    .mx1-b { background: color-mix(in oklab, #3b5ba9 70%, #4fa3c4 20%, white 10%); }
    .mx1-c { background: color-mix(in oklab, #3b5ba9 12%, white); }
  }
</style>
<script>
  (() => {
    const ok = CSS.supports('background', 'color-mix(in oklab, red 50%, blue)');
    const st = document.getElementById('mx1-status');
    st.textContent = ok
      ? 'color-mix に対応：3色混色パレットで表示中'
      : 'color-mix 未対応：ベタ色フォールバックが正解';
    st.style.background = ok ? '#e4eaf4' : '#fdf0e6';
  })();
</script>

.hero {
  color-scheme: light dark;
  /* ライト用とダーク用の背景画像を1行で切り替え */
  background-image: light-dark(
    url("/images/hero-light.avif"),
    url("/images/hero-dark.avif")
  );
  background-size: cover;
}

/* 色と画像の重ね合わせも宣言的に */
.banner {
  color-scheme: light dark;
  background-image: light-dark(
    image(#f0f3f5),
    image(#1c2733)
  );
}
.banner-overlay {
  /* 画像レイヤー + グラデーションの合成例 */
  background-image:
    linear-gradient(alpha(#1c2733, 30%), alpha(#1c2733, 30%)),
    light-dark(
      url("/images/banner-light.avif"),
      url("/images/banner-dark.avif")
    );
}

/* Popperなしツールチップの最小形（対応ブラウザ向け） */
.tip-anchor {
  position-anchor: normal;
  anchor-name: --tip-target;
}

.tip {
  position: absolute;
  position-anchor: --tip-target;
  /* アンカー下中央に配置し、はみ出し時は反転寄せ */
  inset-area: block-end span-inline-end;
  transform: translateX(-50%);
}

/* アンカーが無効・不可視のときは出さない */
@supports (inset-area: block-end) {
  .tip:not(:where(:anchor-valid, :anchor-visible)) {
    display: none;
  }
}

/* 未対応ブラウザ向け: 従来の絶対配置にフォールバック */
@supports not (position-anchor: --tip-target) {
  .tip {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
  }
}