はじめに：CSS が再び面白くなっています
以前は「CSS は難しくてブラウザ互換性の地獄」というのが定説でしたが、最近は様子が一変しました。:has()、@container、text-wrap: balance といった機能が Baseline に到達し、これまで JavaScript で書いていたハックを CSS 一行で置き換えられるケースが急増しています。
本記事では、最近の CSS コミュニティで話題になった新機能を 「実務でいつ、どう使うか」 という観点でまとめました。原文は CSS-Tricks の定期ニュースレター What's !important #18 で、Qiita 読者向けに再構成したものです。
💡 先に要点だけ:
- ツールチップ UX: 「遅延→即時（delayed-then-instant）」パターンが事実上の標準
interest invokers: Chrome のみ対応だが、progressive enhancement で今日から使用可能flex-wrap: balance:text-wrap: balanceの flex 版、Chrome で利用可能にclass prefix selector: 未対応だが、対応されれば文法が大きく変わる
それでは順に見ていきましょう。
実務で最も有用な3つ
1. 遅延→即時ツールチップ (Delayed-then-instant tooltips)
ツールチップ UX で最も多い失敗は 「ホバーで即表示、離脱で即非表示」 というパターンです。これだとマウスがかすめるたびにツールチップが点滅し、かえって邪魔になります。
正攻法は次のとおりです:
- 表示は少し遅延（誤発火を防ぐ）
- 非表示は即時（不要になった瞬間に消える）
/* 基本: 遅延表示 + 即時非表示 */
.tooltip-trigger {
position: relative;
}
.tooltip-trigger::after {
content: attr(data-tooltip);
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
padding: 6px 10px;
background: #1f2937;
color: #fff;
border-radius: 6px;
font-size: 13px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
/* 表示は 400ms 遅延、非表示は即時 */
transition: opacity 0s;
transition-delay: 0s;
}
.tooltip-trigger:hover::after {
opacity: 1;
transition: opacity 0.15s ease;
transition-delay: 0.4s; /* 表示遅延 */
}
⚠️ 注意: ホバー領域が小さすぎると、遅延が逆効果になります。マウスが少し外れて戻る間にツールチップが消えたり再表示されたりしてちらつくためです。その場合は遅延値を小さくするか、トリガー領域に padding を追加して広げてください。
2. interest invokers — ツールチップ・ポップオーバーの未来
上記パターンを CSS だけでより簡潔に処理する方法が interest invokers です。interest-delay-start と interest-delay-end の2つのプロパティで表示/非表示の遅延を制御します。
<button interestfor="my-popover">ホバーしてください</button>
<div id="my-popover" popover>こんにちは！ 👋</div>
button {
interest-delay-start: 0.4s; /* ホバー後 400ms で表示 */
interest-delay-end: 0s; /* 離脱で即時非表示 */
}
現在 Chrome のみ対応 ですが、未対応ブラウザでは従来動作（即時表示）にフォールバックするため、progressive enhancement の観点から 今日から導入しても安全 です。
3. flex-wrap: balance — flex でもバランス調整
text-wrap: balance がテキストの折り返しを美しくしてくれたのに対し、flex-wrap: balance は flex アイテムを行/列に均等配分します。カードリスト、タグクラウド、ナビゲーションメニューで特に有用です。
.tag-cloud {
display: flex;
flex-wrap: balance; /* 最終行に偏る現象を防止 */
gap: 8px;
}
従来は JS でアイテム数を数えて折り返しを調整したり、:nth-child ハックを使う必要がありましたが、それが不要になりました。
あわせて読みたい記事
- 「CSS ハイライト擬似要素 完全ガイド: search-text からアクセシビリティまで」 — Custom Highlight API ベースのハイライター（MicroLighter）と直結する深掘り記事です。
- 「Kimi Code CLI に Vercel プラグイン登場！エージェンティック開発時代の新標準」 — CSS 新機能を AI エージェントで自動マイグレーションする流れと親和性が高いです。
その他の注目すべき新機能
機能比較一覧
| 機能 | 対応状況 | 実務適用度 | 備考 |
|---|---|---|---|
interest invokers | Chrome のみ | ★★★★☆ | progressive enhancement で即導入可 |
flex-wrap: balance | Chrome 152+ | ★★★★★ | JS ハックを置換、即利用可 |
@supports named-feature() | Chrome のみ | ★★★☆☆ | 特殊ケースのクエリ用 |
class prefix selector | 未対応（提案段階） | ★★★★☆ | 対応されれば文法が一変 |
sibling-count() / sibling-index() | Baseline 到達 | ★★★★☆ | 兄弟要素のインデックスが CSS のみで |
text-box-trim / text-box-edge | Baseline 到達 | ★★★☆☆ | 垂直方向の微調整 |
alpha() | Chrome 152+ | ★★☆☆☆ | Safari/Firefox 対応待ち |
class prefix selector とは
まだどこも対応していませんが、文法がシンプルで有用なため、標準化が急速に進む可能性が高いです。
/* 新文法（提案） */
.something-* {
/* ... */
}
/* 従来: 属性セレクタ3種 */
[class^="something-"] { /* class="something-xxx" */ }
[class*=" something-"] { /* class="xxx something-xxx" */ }
[class*="something-"] { /* class="my-something-xxx" (誤検出リスク) */ }
従来の属性セレクタは誤検出や性能低下の問題がありましたが、prefix selector はこれを一挙に解決します。Tailwind のユーティリティクラスのように prefix ベースの命名を使うプロジェクトでは特に朗報です。
@supports named-feature()
@supports ではクエリできなかった非常に細かい機能の対応可否を確認できます。たとえば「アンカーポジショニングで transform を尊重するか？」といった問いに答えられます。
@supports named-feature(anchor-positioning-respects-transform) {
/* 最新ブラウザ向けの精密ポジショニング */
}
CSS Grid 情報を CSS 変数へ
Temani Afif が紹介したハックで、グリッドの行/列数と各セルの (x, y) 座標を CSS カスタムプロパティとして抽出できます。条件は すべてのカラム幅が等しい こと。これを活用すれば hover 近接度（proximity）のようなインタラクションも純粋な CSS で実装可能です。
⚠️ これらの機能の限界と注意点
- ブラウザ対応のばらつきが依然として大きい:
interest invokers、named-feature()、alpha()などは Chrome のみです。Safari/Firefox ユーザー比率が高いサービスでは必ずフォールバックを用意してください。 - Baseline 到達 ≠ 全ブラウザ対応: Baseline は「主要ブラウザで安定動作する」という意味ですが、旧バージョンユーザーは依然存在します。
@supportsで囲む習慣をつけましょう。 flex-wrap: balanceには性能コストがある: アイテムが数十個以上のリストではレイアウト計算が重くなる可能性があるため、実測プロファイリング後に適用してください。- 日本のエンタープライズ環境への注意: レガシープロジェクトではこれらの機能の多くが使用不可です。新規プロジェクトや社内管理画面など、最新ブラウザ限定環境から導入することを推奨します。
次のステップ学習の方向性
- Custom Highlight API: MicroLighter のようなライブラリのコードを直接読んでみてください。
::highlight()擬似要素とHighlightオブジェクトの使い方が核心です。 - Anchor Positioning:
@supports named-feature()がクエリする対象がこの仕様です。ツールチップ/ポップオーバー実装の未来です。 - Popover API + interest invokers: 両仕様を組み合わせれば、JS 一行なしで完全なツールチップシステムを構築できます。
- Baseline ダッシュボードの購読: web.dev の Baseline 状況を定期的にチェックすれば、「いつ導入しても安全か」を判断する基準が得られます。
まとめ：「今日から使えるもの」から始めましょう
CSS の新機能を見るたびに「ブラウザ対応がなければどうしよう」と先延ばしにする方が多いですが、progressive enhancement の観点 で捉えれば話は全く変わります。対応ブラウザではより良い UX を、未対応ブラウザでは従来と同じ UX を提供すればよいのです。
実務適用の優先順位を整理すると:
- 今日すぐ適用可能:
flex-wrap: balance、sibling-count()、text-box-trim - フォールバックと共に導入:
interest invokers、alpha() - 対応されたら導入:
class prefix selector、named-feature()
特に flex-wrap: balance は JS ハックを削除できるため、コードの複雑度が大幅に下がります。タグクラウドやカードグリッドがあるプロジェクトなら、今週中に試してみることをお勧めします。
CSS はもはや「スタイル言語」ではなく、「レイアウトとインタラクションを宣言的に表現する言語」 へと進化しています。この流れを逃さないでください。🚀