ユーザーのアンケート結果からその年のCSSの流行りや動向がわかるThe State of CSS 2020というサイトをご存知でしょうか。
さまざまなCSSプロパティをカテゴライズし、どのくらいのユーザーがそのプロパティを知っているか、使ったことがあるかがまとめられています。
私は、当社のPodcastでもこのState of CSSについてお話ししたのですが、今回は、実際にコードベースで2021年に活躍していくであろう3つのCSSプロパティについてご紹介します。
※対応ブラウザ状況について、最新の情報については適宜Can I useなどでご確認ください。
backdrop-filter
まず1つ目はbackdrop-filterです。State of CSSでは知らないと答えた人が49.9%と全体の半数いました。
このプロパティは、すりガラスのように後ろにあるものが見えづらくなるようなぼかし効果を適用したり、明度やコントラストなど色味の調整ができたりします。
その機能だけ聞くとfilterプロパティと似ているように感じますが、違いはそのフィルターの効果を受ける対象です。
filterは適用した要素自体の色味やぼけ具合が変化しますが、backdrop-filterは適用した要素の背後の領域の色味やぼけ具合が変化します。
2つのプロパティの比較
filterの例
backdrop-filterの例
実装例
最近のデザイントレンドにもなっているグラスモーフィズムの実装に対してまさにこの要素が使えます。
See the Pen backdrop-filter by hikaru hashimoto (@hashikaru) on CodePen.
対応ブラウザ状況
| Edge | Firefox | Chrome | Safari |
|---|---|---|---|
| ○ | △ | ○ | △ |
Firefoxでは実装を進めており、現在は設定エディター（about:configページ）でbackdrop-filterのフラグをfalseからtrueに変更すれば試せるようになります。
また、Safariではベンダープレフィックスの-webkit-を付ければ使うことができます。
全モダンブラウザ対応も近いですね。
scroll-snap
2つ目はscroll-snapです。こちらも知らないと答えた人が45.8%と認知率は低いものでしたが、実際に使ったことがあるという人は2019年に比べて11.6%から21.1%と約2倍の使用率で徐々に注目され始めているプロパティです。
scroll-snapを使うと、ユーザーが画面をスクロールしたときに特定の画面領域で止まるように制御できます。縦スクロールだけでなく横スクロールにも対応しています。
これは、1スクロール1コンテンツのようなレイアウトやカルーセルなどを手動で動かすときに使えます。
実装例
以下のサンプルにある通り、少しスクロールするだけで、次のスライドの中心位置に自動的に移動してくれます。
See the Pen scroll-snap by hikaru hashimoto (@hashikaru) on CodePen.
対応ブラウザ状況
| Edge | Firefox | Chrome | Safari |
|---|---|---|---|
| ○ | ○ | ○ | ○ |
scroll-snapはすべてのモダンブラウザで対応しています。
しかし、先ほど例に挙げたカルーセルには自動再生の機能などがあり、アクセシビリティの観点から一時停止する機能が必要になることが多いため、そういった機能を含めてCSSで対応・置き換えるということはできないことが多いでしょう。
このscroll-snapに限らず便利なプロパティが増えてきていますが、JavaScriptとうまく切り分けて使用していきましょう。
aspect-ratio
最後はaspect-ratioです。このプロパティはボックスのアスペクト比を定義できます。
State of CSSでは認知率は70%でしたが実際に使用している人は22.4%にとどまっていました。2020年の段階ではどのブラウザも対応していなかったことが、使用率に影響を与えていたと考えられます。
しかし今年に入ってEdgeとChromeの正式版がそれぞれ対応、またSafariもTechnology Preview 118から対応を進めており、Firefoxでも実装が進んでいるようなので、モダンブラウザのすべてで使えるようになれば使用率も徐々に上がっていくと思われます。
実装例
例えば、要素の幅に対してアスペクト比を使って高さを設定したい場合、これまでは1:1ならpadding-top: 100%、16:9ならpadding-top: 56.25%というようにpaddingを使う方法が一般的でした。
その計算や記述が不要になり、CSSで基準のwidthを指定し、aspect-ratioに比率を指定するだけでheightが自動的に算出され、アスペクト比を保つことができます。
以下のサンプルではすべてのボックスに共通の幅としてwidth: 30%を指定しており、高さについてはheightを指定せずにaspect-ratioの比率だけで確保できています。
See the Pen aspect-ratio by hikaru hashimoto (@hashikaru) on CodePen.
対応ブラウザ状況
| Edge | Firefox | Chrome | Safari |
|---|---|---|---|
| ○ | △ | ○ | × |
現状Firefoxでは、前述したものと同じく設定エディターでaspect-ratioのフラグを変更すれば試せるようになります。
あとがき
今回紹介したものは今までも代替手段があって実装できたものになりますが、新しいプロパティによってより便利に、手軽に実装できるようになっているので、ぜひ一度触ってみてください！
今年もさまざまなプロパティが登場し、ブラウザにも実装されていくと思うので、今後も発信していきたいと思います。