Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。
エフェクト Limited support

clip

絶対配置された要素の表示可能な領域を矩形（rect()）で定義する古いプロパティです。要素の一部を視覚的に隠すために使用されますが、CSS仕様では非推奨とされ、より柔軟な clip-path プロパティへの移行が推奨されています。レガシーコードの保守で見かけることがあります。

クリッピングレガシー

概要

絶対配置された要素の表示可能な領域を矩形（rect()）で定義する古いプロパティです。要素の一部を視覚的に隠すために使用されますが、CSS仕様では非推奨とされ、より柔軟な clip-path プロパティへの移行が推奨されています。レガシーコードの保守で見かけることがあります。

対応ブラウザ

デスクトップ

Chrome 1+
Edge 79+
Safari 1.3+
Firefox 1+

モバイル

Chrome Android 18+
Safari iOS 1+
Firefox Android 4+

基本構文

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」テクニックの一部で、スクリーンリーダー専用のテキスト提供に重要な役割を果たします。

参考リンク