2026年6月1日

2026年春Baseline再定義：CSS安全実装の作例とプロンプト

Baselineの進化が変える「安全な実装」の定義

2026年4月、Webプラットフォームの互換性基準「Baseline」が再定義された。従来の「主要ブラウザすべてで安定して使える」という緩い基準から、「全ての主要ブラウザで同一の動作が保証され、かつ将来も後方互換性が維持される」という厳格な基準へと移行した。この変化は、開発者が「安全だ」と判断して採用した機能が突然互換性問題を起こすリスクを大幅に低減する。

2026年4月の新機能：Safari対応が鍵を握る

CSS Anchor Positioning がついにBaseline入り

CSS Anchor Positioning（CSSアンカーポジショニング）が、Safari 17.4以降の対応によりBaselineに追加された。これにより、ツールチップやポップオーバーの相対配置が、JavaScriptなしで実現可能になる。CSS-Tricksのレポートによれば、Safariの実装は他ブラウザと極めて高い互換性を示しており、移行コストは実質ゼロ。ただし、Chrome 125以降に存在した一部の試験的な配置プロパティ（anchor-scrollなど）はSafari未対応のため、注意が必要。

実装の際の落とし穴：position-anchorプロパティで指定したアンカー要素がdisplay: noneになると、位置計算が失敗する。この挙動は全ブラウザで統一されたが、動的なUIではテスト必須。

::checkmark疑似要素が全ブラウザ対応

チェックボックスやラジオボタンの装飾を容易にする::checkmark疑似要素が、Firefox 135以降で対応され、全ブラウザで利用可能になった。従来は:checked疑似クラスと隣接セレクタで代用していたが、::checkmarkを使うとスタイルの独立性が高まり、アクセシビリティにも優れる。ただし、Safariでの初期実装ではcontentプロパティの変更が効かないバグがあったが、2026年4月のアップデートで修正済み。

letter-spacingアニメーションの新パラダイム

CSS-Tricksの記事で紹介された、letter-spacingを利用したテキスト出現アニメーションは、これまでclip-pathやopacityに依存していた手法を刷新する。具体的な実装例として、以下のようなCSSが提案されている。

@keyframes reveal {
  0% { letter-spacing: -0.5em; opacity: 0; }
  100% { letter-spacing: normal; opacity: 1; }
}

この手法の優位点：letter-spacingを負の値から開始すると、ブラウザのレンダリングエンジンがテキストを描画しないため、パフォーマンスが向上する。ただし、長い単語では文字が重なり見づらくなるため、word-spacingと組み合わせるのが現実的。

なぜ今、Baselineの厳格化が起きたのか

背景には、AIによるコード生成の急増がある。GitHub CopilotやClaudeが出力するCSSコードの互換性リスクを軽減するため、W3Cと主要ブラウザベンダーが「安全な機能のリスト」を機械可読な形で提供する必要に迫られた。Baselineの定義変更は、AIが出力するコードの「信頼性」を担保するためのインフラ整備と言える。

2026年夏以降の展望

次にBaseline入りが期待されるのは、view-timeline（スクロール駆動アニメーション）とCSS color-mix()関数。特にview-timelineはChromeとEdgeで先行実装されてきたが、FirefoxとSafariの対応がまだ不安定。2026年後半には全ブラウザ対応が完了する見込みで、その時点で「安全な実装」として採用が急加速すると予測する。

開発者が今すぐ取るべき3つの行動

Baseline対応機能だけに限定したスターターCSSテンプレートの整備 — AIコード生成のベースに使うことで、互換性リスクを初期から排除できる。
SafariのWebDriverをCIに組み込む — 特にAnchor Positioningや::checkmarkはSafariで稀に描画が崩れるケースが報告されている。WebKit nightly buildを使った自動テストが有効。
letter-spacingアニメーションのアクセシビリティチェック — 視覚障碍者向けにprefers-reduced-motionメディアクエリでアニメーションを無効化する。併せて、スクリーンリーダーがletter-spacingの変化を読み飛ばさないよう、WAICのガイドラインに従った実装が必要。

参照

この記事を書いた人

理人と理子

ギフプロのブログを運営している理人（リト）と理子（リコ）です！理は知性を表す漢字でもあるので、AIを連想させる名前にしてもらいました。ブログの内容はAIで作成しているところもありますが、読者の方にとって有意義な情報になるように完全自動化ではなく、人の目も通して作成しています！