今回は６つのcss機能を紹介したいと思います。

該当機能を実現するために以前はjavascriptを使っていましたが、今はcssでできちゃいます。ただ、ブラウザによって、実装されていないのもは使用不可の場合もあります。

各機能の最後にリンクを貼るので、そちらで詳しい仕様や対応ブラウザなどを確認してください。

scroll-snap

こちらを使用することでスクロールの動きを変えられます。

通常のスクロール

See the Pen
by ryusinei (@ryusinei)
on CodePen.

snapを使用したらスクロールがある要素にくっつくようになります。

See the Pen
scroll-snap by ryusinei (@ryusinei)
on CodePen.

適用方法は、scroll-snap-typeを親要素に、scroll-snap-alignを子要素に指定すればokです。

対応ブラウザ

https://caniuse.com/?search=scroll-snap

MDN

https://developer.mozilla.org/ja/docs/Web/CSS/scroll-snap-type

https://developer.mozilla.org/ja/docs/Web/CSS/scroll-snap-align

 

gap

こちらはflexboxで余白を便利に指定できるプロパティです。

コンテナ中のアイテムの間に間隔をあけるために普段marginを使用しますが、代わりにgapを指定することができます。

コンテナにgapを指定すればokです。需要によって「row」と「column」二つの値を指定できます。

対応ブラウザ

https://caniuse.com/?search=gap

MDN

https://developer.mozilla.org/ja/docs/Web/CSS/gap

 

 

aspect-ratio

こちらは、要素に対してアスペクト比を簡単に指定して、レスポンシブな状態を簡単に保つプロパティです。

See the Pen
by ryusinei (@ryusinei)
on CodePen.

対応ブラウザ

https://caniuse.com/?search=aspect-ratio

MDN

https://developer.mozilla.org/ja/docs/Web/CSS/@media/aspect-ratio

 

 

position: sticky

こちらは、スクロールに応じて要素を固定表示にすることができます。

例えば、スクロールダウンで、ヘッダーを上に固定させたい場合などに、普段fixedとabsoluteやjavascriptで実現いていると思いますが、代わりにstickyを使用できます。

See the Pen
sticky by ryusinei (@ryusinei)
on CodePen.

対応ブラウザ

https://caniuse.com/?search=sticky

MDN

https://developer.mozilla.org/ja/docs/Web/CSS/position

 

 

:is()

こちらは、CSS指定を見やすくまとめる、疑似クラスの一つです。こちらを使用することで、少ないコードで多い要素を指定できます。

例えば、ボタンの色を変えるとしたら

See the Pen
by ryusinei (@ryusinei)
on CodePen.

見た通り、buttonが重複していますね。

isを使用すると下記のように見やすくなります。

See the Pen
by ryusinei (@ryusinei)
on CodePen.

つまり、要素がheader, nav, formの場合、ボタンの色を指定するように、要素をまとめて指定することができます。

対応ブラウザ

https://caniuse.com/?search=%3Ais()

MDN

https://developer.mozilla.org/ja/docs/Web/CSS/:is

@supports

これで、ブラウザが該当css機能を対応しているのか否かが判断できます。

例えば、こちらではdisplay:gridを対応しているのかをチェックしています。

See the Pen
by ryusinei (@ryusinei)
on CodePen.

対応しているのならdivをグリッドコンテナにします。

また、対応していないのかもチェックできます。

See the Pen
by ryusinei (@ryusinei)
on CodePen.

対応していなければ、代わりにしたいのを指定すればokです。

対応ブラウザ

https://caniuse.com/?search=%40supports

MDN

https://developer.mozilla.org/ja/docs/Web/CSS/@supports

 

終わりに

今回紹介した以外にもたくさんのCSSのプロパティがありますので、他に気になる機能や便利な機能を見つけ出したらぜひ共有できればと思います。

web標準仕様もどんどん進化しているので、それを理解して使いこなすことによって、エンジニアの作業がもっと楽になることを願います。