clip
非推奨;: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。
警告: 作成者は、代わりに clip-path プロパティを使用することをお勧めします。
clip は CSS のプロパティで、要素のどの部分が可視であるかを定義します。 clip プロパティは絶対配置された要素、つまり position:absolute または position:fixed を持つ要素だけに適用されます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
clip 非推奨 | 1 | 12 | 1 | 1 | 18 | 1 |
auto 非推奨 | 1 | 79 | 1 | 1 | 18 | 1 |
| その他 | ||||||
css.types.shape 非推奨 は CSS のデータ型で、ある領域の具体的な形状を表します。この領域は、clip プロパティが適用される要素の一部を表します。 | 1 | 12 | 1 | 1.3 | 18 | 1 |
| CSS タイプ | ||||||
rect 非推奨 `rect()` | 1 | 12 | 1 | 1.3 | 18 | 1 |
注釈 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」テクニックの一部で、スクリーンリーダー専用のテキスト提供に重要な役割を果たします。