CSS には、あまり知られていませんが便利な機能がいくつかあります。そのうちのいくつかを調べてみましょう。

1. CSSのscroll-snap-typeプロパティとscroll-snap-stopプロパティ

スクロール-スナップ-ストップ

親要素の下にある子要素ごとにこのプロパティを設定すると、トラックパッドまたはタッチ スクリーンで高速スクロールしているときに、次の要素が通過することがなくなります。

GIF :

例 ：

価値 ：

• 通常 : デフォルト値です。スクロールは デフォルトの動作です

• 常に: タッチパッドまたはタッチ スクリーンで高速スワイプ後、スクロールが停止し、次の要素がフォーカスされます。

スクロールスナップタイププロパティ

スライダーを水平にドラッグして放すと、効果が表示されます。
この効果は、ボックスをクリックし、左右の矢印キーを使用して移動すると発生します

GIF :

例 ：

価値 ：

• なし : これはデフォルト値です

• X : 効果は X 軸に設定されます

• Y : 効果は y 軸に設定されます

• 両方 : 効果は x 軸と y 軸に設定されます

• 必須 : スクロール終了後、スクロールは自動的にキャプチャポイントに移動します

2. CSS の place-items プロパティ

place-items プロパティに設定された値は、align-items プロパティと justify-items プロパティの両方に適用されます。

例 ：

価値 ：

• 開始 : アイテムをグリッド セルの先頭に揃えます

• End : 項目をグリッド セルの末尾に揃えます

• Center : 項目をグリッド セルの中央に揃えます

3. Css all プロパティ

要素またはその親に適用されるすべてのプロパティを初期値に変更します

例 ：

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

価値 ：

• Unset :要素または要素の親に適用されるすべてのプロパティを、継承可能な場合はその親の値に変更し、継承できない場合は初期値に変更します

4. CSS ユーザー選択プロパティ

ユーザーがテキストを選択できないようにします

例：

The text of this div element cannot be selected.

5. CSSのキャレットカラープロパティ

文字入力フィールドのカーソル（キャレット）の色を変更します。

6. CSSのtext-decoration-skip-inkプロパティ

text-decoration-skip-ink CSS プロパティは、グリフを線や下線の上に渡すときに上線と下線をどのように描画するかを指定します。

価値 ：

• なし：

例 ：

text-decoration-skip-ink: none;

• 自動:

例 ：

text-decoration-skip-ink: auto;

7. CSS pointer-events プロパティ

pointer-events プロパティは、要素が ポインター イベント.

例 ：

Google


 Google

価値：

• なし : デフォルト

• Auto: 要素はポインター イベントに反応しません

結論

CSS のあまり知られていない機能を調べました。あなたのアプリケーションに役立つ機能を学びました。