clip
clip は CSS のプロパティで、要素のどの部分が可視であるかを定義します。 clip プロパティは絶対配置された要素、つまり position:absolute または position:fixed を持つ要素だけに適用されます。
対応ブラウザ
注釈 1件
実装メモ
- Safari は「clip: auto」を「clip: rect(auto, auto, auto, auto)」と誤って解釈します。
注釈 1件
実装メモ
- iOS 上の Safari は、`clip: auto` を `clip: rect(auto, auto, auto, auto)` として誤って解釈します。
基本構文
CSS
.visually-hidden {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
width: 1px;
height: 1px;
}ライブデモ
実務での使いどころ
-
視覚的に隠すがスクリーンリーダーには読ませる
要素を視覚的に非表示にしつつ、スクリーンリーダーからはアクセス可能な「visually hidden」パターンに使用されます。
注意点
- clip プロパティは非推奨です。新規プロジェクトでは clip-path を使用してください。ただし visually-hidden パターンでは互換性のためまだ使われています。
アクセシビリティ
- clip: rect(1px, 1px, 1px, 1px) は「visually hidden」テクニックの一部で、スクリーンリーダー専用のテキスト提供に重要な役割を果たします。