はじめに：CSSはもはや「ただのスタイリング」ではない
この数週間、Chrome、Safari、Firefoxともに新機能リリースはありませんでしたが、Web開発教育コミュニティから非常に質の高いコンテンツが多数公開されました。本記事では、その中から実務にすぐ活用できる、あるいは今後備えておくべきCSSトレンドを3つ厳選して解説します。
- CSS View Transitions で動画の再生状態を維持する
- CSS Masonry レイアウトの現在地と未来
- CSS Cascade Layers を使ったメディアクエリの「命名」テクニック
それぞれの技術の背景、実装方法、そして国内開発現場（特にレガシーシステムとの共存）での注意点を合わせてお届けします。
本記事は海外開発者コミュニティの議論を基に再構成しています。(根拠資料: CSS-Tricks What's Important #4)
1. CSS View Transitions で動画状態を保持する
問題の背景
ユーザーが動画を視聴中に別ページへ遷移し、戻ってきたら動画が最初から再生し直される——この体験、皆さんも一度は経験したことがあるでしょう。特に教育系プラットフォームやメディアサイトでは、UXを著しく損ねます。
解決策：pageswap と pagereveal イベントの活用
Chris Coyier が提案する方法は、マルチページビュートランジション（MPA View Transitions） を利用するものです。同一ページ内では簡単ですが、ページ間をまたぐ場合は sessionStorage を使って状態を保存・復元します。
// ページ離脱時に動画状態を保存
window.addEventListener('pageswap', (event) => {
const video = document.querySelector('video');
if (video) {
const videoState = {
currentTime: video.currentTime,
paused: video.paused,
playbackRate: video.playbackRate
};
sessionStorage.setItem('videoState', JSON.stringify(videoState));
}
});
// 新しいページ到着時に動画状態を復元
window.addEventListener('pagereveal', (event) => {
const savedState = sessionStorage.getItem('videoState');
if (savedState) {
const video = document.querySelector('video');
if (video) {
const { currentTime, paused, playbackRate } = JSON.parse(savedState);
video.currentTime = currentTime;
video.playbackRate = playbackRate;
if (!paused) {
video.play();
}
}
// 復元後はセッションをクリア（任意）
sessionStorage.removeItem('videoState');
}
});
補足: この方法ではわずかに音声が途切れることがあります（技術的には「偽装」遷移です）が、ユーザー体験は大幅に改善されます。
audio要素やiframeにも同様に適用可能です。
実務適用のポイント
- CodePen 2.0 がプライベートベータを開始し、複数ファイルプロジェクトをサポートするようになりました。CodePen上でView Transitionsをテストできるようになったのは大きな進歩です。ベータ申し込みをおすすめします。
- 日本の開発現場では依然としてMPA（従来型マルチページ）の案件も多いため、このテクニックは特に有用です。
2. CSS Masonry レイアウト：ついにブラウザがネイティブ対応へ？
現状
CSS Masonry レイアウト、すなわち display: grid-lanes は、現時点ではどのブラウザも正式サポートしていません。しかし、Firefox、Safari、Chrome/Edge のすべてがトライアル中 であり、比較的早期に実用化される可能性があります。
Jen Simmons 氏によれば、当面はポリフィル（polyfill）を使用する必要があります。Sunkanmi Fafowora 氏が display: grid-lanes の詳細ガイドを公開しているので、そちらも参照してください。
なぜ重要か？
Pinterest や Dribbble のようなピンタレストスタイルのレイアウトを実装する際、従来は JavaScript ライブラリ（Masonry.js など）に依存する必要がありました。CSS ネイティブでサポートされれば、パフォーマンスとアクセシビリティの両面で大きなメリットが生まれます。
| 項目 | 現行手法（JSライブラリ） | CSSネイティブ（将来） |
|---|---|---|
| パフォーマンス | レイアウト計算にJSが必要 | ブラウザが直接計算、高速 |
| アクセシビリティ | 追加処理が必要 | セマンティックHTMLと自然に統合 |
| メンテナンス性 | 外部ライブラリに依存 | CSSのみで管理、依存関係減少 |
| 学習コスト | ライブラリAPIの習得が必要 | CSS Gridの知識で十分 |
注意点
- まだ標準化が完了していないため、プロダクションで使用する場合はポリフィルとプログレッシブエンハンスメント戦略を併用してください。
@supportsクエリを使ってネイティブサポートの有無を検出することを推奨します。
3. CSS メディアクエリに「名前」を付ける（Cascade Layers 活用術）
Kevin Powell のテクニック
Kevin Powell 氏が紹介した方法は、CSS Cascade Layers を利用してメディアクエリに実質的に「名前」を与えるというものです。@custom-media が全ブラウザでサポートされるまでの間、有効な代替手段となります。
/* Cascade Layers を使ったメディアクエリの「命名」 */
@layer base, layout, theme;
@layer base {
body {
font-size: 16px;
}
}
@layer layout {
/* モバイルファーストのレイアウト */
.container {
display: block;
}
}
@layer layout {
/* デスクトップレイアウト - レイヤー順で制御 */
@media (min-width: 768px) {
.container {
display: grid;
grid-template-columns: 1fr 3fr;
}
}
}
より良い方法：@custom-media
Adam Argyle 氏によれば、@custom-media が Firefox Nightly でトライアル中です。この機能が定着すれば、以下のようにさらに直感的に記述できるようになります。
/* 未来の方法（現時点では全ブラウザ未対応） */
@custom-media --tablet (min-width: 768px);
@custom-media --desktop (min-width: 1024px);
@media (--tablet) {
.container { ... }
}
合わせて読みたい記事
- マイクロソフト Maia 200、AI推論のために生まれた超高性能アクセラレータの深層分析
- NVIDIA DLSS 4.5 公開：超解像度強化と動的マルチフレーム生成でゲームグラフィックスの新地平を拓く
まとめ
この他にも、Vale の CSS リセット（svg:not([fill]) { fill: currentColor; } のような便利なスニペット）、ブラウザの仕組みを解説するインタラクティブガイド、相対カラー構文を使ったアニメーションテーマ、モーダル vs ページ vs オーバーレイの判断フレームワークなど、非常に多くの有益な情報がありました。特に、OS レベルのテキストスケーリングをウェブでも尊重するメタタグ が Chrome Canary でトライアル中というニュースは、アクセシビリティの観点から非常に心強いものです。
CSS はもはや単なる「スタイリング言語」ではなく、複雑な UI 状態管理やレイアウトをブラウザネイティブで処理できる強力なツールへと進化しています。新しい機能を先取りし、ポリフィルやテクニックで備えておくことが、実務での競争力を左右します。
次のステップとしての学習方向性:
- CSS Cascade Layers を完全に理解する
@custom-mediaと Container Queries を実際に試す- View Transitions API を SPA/MPA それぞれの環境でテストする