5個のプロパティ
要素にマウスを重ねた時のカーソルの形状を指定するプロパティです。
cursor: pointer;
要素の可視性を制御するプロパティです。display: noneと違い、要素は非表示になりますが領域(スペース)は確保されたままになります。アニメーションやトランジションと組み合わせて使用されることが多いです。
/* 基本的な使い方 */
.hidden-element {
visibility: hidden;
}
.visible-element {
visibility: visible;
}
ユーザーがテキストを選択できるかどうかを制御するプロパティです。
user-select: none;
要素がマウスイベントのターゲットになるかどうかを制御するプロパティです。
pointer-events: none;
要素のレンダリングを制御し、画面外の要素の処理をスキップしてパフォーマンスを向上させるプロパティです。
.article {
content-visibility: auto;
contain-intrinsic-size: 1000px;
}