昨今のフロントエンドのCSS開発においては、タスクランナーやフレームワークの活用により煩雑なベンダープレフィックスの付与を意識する必要がありませんし、IE11のサポート終了により実戦に投入できるCSSプロパティも格段に増えました。
たった数行の記述で複雑な機能が実装可能だったり、再現が難しかったデザインへも対応できるようになったことは喜ばしいことです。
そこで今回は有名サイトで実装されているそんな最新のCSSテクニックをあらためて確認してみたいと思います。
以下で引用しているサイトは2022年9月7日現在に確認したものであり、それ以降は更新により変更されている可能性があります。
「Apple」のすりガラス風グロナビ
See the Pen すりガラス by p_toro (@p_toro) on CodePen.
backdrop-filter: saturate(180%) blur(20px);
backdrop-filter - CSS: カスケーディングスタイルシート | MDN
"backdrop-filter" | Can I use... Support tables for HTML5, CSS3, etc
saturate → 入力画像の彩度を上げたり下げたりします。
blur → 入力画像にガウシアンぼかし（ガウス関数をもちいて画像をぼかす処理）を適用します。
- saturateで調整することにより、鮮やかな印象になっています。
- 現在は-webkit-のプレフィックスが必須です。
- Firefox（104.0）ではblurは効いているものの、saturateは適用されていませんでした。
「apple」のグラデーションテキスト
See the Pen グラデーションテキスト by p_toro (@p_toro) on CodePen.
background-clip: text;
-webkit-text-fill-color: transparent;
background-clip - CSS: カスケーディングスタイルシート | MDN
Background-clip: text | Can I use... Support tables for HTML5, CSS3, etc
-webkit-text-fill-color - CSS: カスケーディングスタイルシート | MDN
CSS property: -webkit-text-fill-color | Can I use... Support tables for HTML5, CSS3, etc
「-webkit-text-fill-color」についてMDNには「この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。」と強めの注意書きがあります。
- 該当ページ冒頭に登場する「すべてが新しいデザイン。」の部分です。
- 当プロパティが効かないブラウザにはcolorが適用されます。
- JavaScriptでスクロール値と連動してbackground-positionを変更することで変化させています。
- 「-webkit-text-fill-color」は非標準のプロパティであり、AutoPrefixerではベンダープレフィックスを付与できないため自分で書く必要があります。
「TESLA」のフルページスワイプ
See the Pen フルページスワイプ by p_toro (@p_toro) on CodePen.
scroll-snap-type: y mandatory;
scroll-snap-type - CSS: カスケーディングスタイルシート | MDN
CSS property: scroll-snap-type | Can I use... Support tables for HTML5, CSS3, etc
scroll-snap-type → スナップ点が存在する場合に、スクロールコンテナーにどれだけ厳密にスナップ点を強制するかを、スナップする要素の親要素に設定します。「mandatory（義務的な、強制の）」ではスナップ点への吸着が強く、「proximity（近接）」では吸着が弱いです。
scroll-snap関連
scroll-snap-align: start;
scroll-snap-stop: always;
scroll-snap-align - CSS: カスケーディングスタイルシート | MDN
CSS property: scroll-snap-align | Can I use... Support tables for HTML5, CSS3, etc
scroll-snap-stop - CSS: カスケーディングスタイルシート | MDN
CSS property: scroll-snap-stop | Can I use... Support tables for HTML5, CSS3, etc
scroll-snap-align → スクロールスナップ位置を指定します。「2つの値を指定すると、1番目がブロック、2番目がインラインとなる」らしいのですが、2つの値を指定すべきケースとその仕様・挙動を把握できなかったため詳細は割愛します。
scroll-snap-stop → スクロールコンテナーが可能なスナップ位置を「通り過ぎる」ことを許可するかどうかを定義します。
scroll-snap-alignはMDNによると「Safariは現在のところ、2つの値の構文を誤った順序で実装しており、最初の値がインラインで次の値がブロックになっています」とのことです。
- 表示領域の高さ指定が必須です。
- MDNに「現在スクロール中でなければ」という注釈がありますが、この影響のためかワンテンポ遅れて動作するような感覚があります。カスタムや微調整が必要な場合にはJSによる実装のほうがよいかもしれません。
- とはいえ「トレードオフ」で考えると、簡潔なコードで実装できるメリット（実装・メンテナンスコスト減）は魅力的です。
「NIKE」の商品カルーセル
See the Pen カルーセル by p_toro (@p_toro) on CodePen.
※デベロッパーツールで表示デバイスをスマホにしていただくと操作しやすいです。scroll-snap-type: x mandatory;
※「TESLA」のフルページスワイプとの差は「指定している軸の違い」であり、説明が重複するのでこちらでは割愛します。
「airbnb」の追従メニュー
See the Pen スティッキーメニュー by p_toro (@p_toro) on CodePen.
position: sticky;
position - CSS: カスケーディングスタイルシート | MDN
CSS position:sticky | Can I use... Support tables for HTML5, CSS3, etc
- スティッキーアイテム → sticky（粘着する）を適用した要素。ビューポートのポジションが定義したポジションと一致するとフロートします。
- スティッキーコンテナ → スティッキーアイテムをラップする親要素。スティッキーアイテムがフロートすることができる最大のエリアになります。
- スティッキーコンテナ内にスティッキーアイテムが唯一の要素だった場合、うまく機能しません。
まとめ
ご紹介したCSSはみなとても便利なものばかりで、JavaScriptを用いずともこのようなリッチな表現が実装できるということを再認識できて勉強になりました。
ただ、いずれも何も考えずコピペするのではなく、きちんと仕様を確認し各種プロパティの挙動を理解したうえで活用していくことが大切だと思いました。