12個のプロパティ
要素にマウスを重ねた時のカーソルの形状を指定するプロパティです。pointer、text、move、not-allowedなど多数の値があり、ユーザーに操作のフィードバックを与える重要なUIプロパティです。
cursor: pointer;要素の可視性を制御するプロパティです。display: noneと違い、要素は非表示になりますが領域（スペース）は確保されたままになります。アニメーションやトランジションと組み合わせて使用されることが多いです。
/* 基本的な使い方 */
.hidden-element {
visibility: hidden;
}
.visible-element {
visibility: visible;
}ユーザーがテキストを選択できるかどうかを制御するプロパティです。none、text、all、autoなどの値があり、UI要素のテキストが誤って選択されるのを防ぐために使用されます。
user-select: none;要素がマウスイベントのターゲットになるかどうかを制御するプロパティです。none、auto、visiblePainted等の値があり、透明なオーバーレイの実装やクリック可能領域の制御に使用されます。
pointer-events: none;要素のレンダリングを制御し、画面外の要素の処理をスキップしてパフォーマンスを向上させるプロパティです。
.article {
content-visibility: auto;
contain-intrinsic-size: 1000px;
}スクロール動作をスムーズにするか、即座に移動するかを指定するプロパティです。smooth指定でスムーススクロールが有効になり、アンカーリンクやJavaScriptでのスクロール操作が滑らかになります。
scroll-behavior: auto;スクロールスナップコンテナの動作を定義するプロパティです。カルーセルやフルページスクロールの実装に使用します。
scroll-snap-type: x mandatory;スクロールスナップ時の子要素の配置位置を指定するプロパティです。scroll-snap-typeと組み合わせて使用します。
scroll-snap-align: start;スクロール領域の境界に達した時の動作を制御するプロパティです。auto、contain、noneの値があり、スクロールチェーン（親要素へのスクロール伝播）を防ぐのに便利です。
overscroll-behavior: contain;ユーザーが要素のサイズを変更できるかどうかを指定するプロパティです。none、both、horizontal、verticalの値があり、textareaのリサイズ動作を制御できます。
resize: vertical;スクロールスナップを使用してスムーズなスクロール体験を提供します。scroll-snap-typeとscroll-snap-alignを組み合わせて使用します。
scroll-snap-type: x mandatory; scroll-snap-align: start;テキストエリアや入力欄のサイズを入力内容に合わせて自動で伸縮させるプロパティです。field-sizing: contentを指定するだけで、これまでJavaScriptで実装していたtextareaの自動リサイズが不要になります。
textarea {
field-sizing: content;
min-height: 3lh;
max-height: 12lh;
}