前回に続いてState of CSS 2021で知らなかったところをキャッチアップしたい
インタラクション
JavaScriptを使わなくてもページを操作するを制御することができればCSSでできるなら
CSS Scroll Snap
スクロールしたときに表示領域にピタッとスクロール位置がとまるよう制御をしてくれるやつ
CSS Scroll Snap - CSS: Cascading Style Sheets | MDN
overscroll-behavior
ページのレイヤーとモーダルのレイヤー両方にスクロールがある場合、スクロールチェーンが起きてしまう問題を制御してくれるやつ
いままでは、bodyにoverflow: hidden;をJavaScriptで付与することで、モーダルのレイヤーのスクロールで下のレイヤーが動かないようにしていたが、overscroll-behaviorでこれが制御できる
overscroll-behavior - CSS: カスケーディングスタイルシート | MDN
CSSでスクロールが連鎖するのを回避する古い方法とoverscroll-behaviorを使った新しいテクニック | コリス
いまのところEdgeやSafariは対応していないので導入はまだできなそう
touch-action
ユーザーが操作可能なタッチ操作を指定できるプロパティ
touch-action - CSS: カスケーディングスタイルシート | MDN
scroll-timeline
スクロール量に応じでどういうアニメーションをするかを指定できる
@scroll-timelineを使ってCSSのみでスクロールアニメーションを実現する | フロントエンドBlog | ミツエーリンクス
ただし、どのブラウザもまだ対応していない
タイポグラフィ
font-variant
フォントの形状を設定できる
たとえば、font-variant: small-caps;を指定するとスモールキャップ（欧文の小文字が小さな大文字の形で表示される）形状になる
他にはfont-variant-numeric: slashed-zero;を指定すると、数字の０がスラッシュ付きの形状になるなど
font-variant - CSS: カスケーディングスタイルシート | MDN
line-clamp
指定した行数分表示させることができるプロパティ
文末は3点リーダーで省略される
-webkit-line-clamp - CSS: カスケーディングスタイルシート | MDN
IE以外は使える
Variable fonts
通常のフォントは幅、太さ、スタイルごとに個別のフォントファイルを用意するが、バリアブルフォントは書体のさまざまなバリエーションを 1 つのファイルに組み込むことができる
可変フォントガイド - CSS: カスケーディングスタイルシート | MDN
ほとんどはウェイトの調整だけだが、書体によっては傾斜やフォント自体の形状など独自の数値を調整することができるとのこと
こちらが参考になった
