Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

Paint containment

ペイントコンテインメントは、要素の子孫が要素のボックス外にはみ出して描画されないことをブラウザに伝えます。overflow: hidden に似た効果がありますが、ブラウザにレンダリング最適化のヒントも提供します。画面外にスクロールされた要素のペイントをスキップするなど、パフォーマンス向上に活用されます。

コンテインメントペイント最適化

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.properties.contain.paint
52
79
69
15.4
52
15.4
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
.card {
  contain: paint;
}
.offscreen-widget {
  contain: layout paint;
}

ライブデモ

contain: paint

CSS Contain: paint demo.

プレビュー全画面表示

contain: layout paint

CSS Contain: layout paint demo.

プレビュー全画面表示

containment none(comparison)

CSS containment none(comparison) demo.

プレビュー全画面表示

実務での使いどころ

  • オーバーフローコンテンツの最適なクリッピング

    子要素がコンテナ外にはみ出さないことをブラウザに保証し、不要なペイント処理をスキップしてレンダリングパフォーマンスを改善できます。

注意点

  • ペイントコンテインメントは要素を新しいスタッキングコンテキストにし、overflow: visible は事実上 hidden として扱われます。意図しないクリッピングに注意してください。

アクセシビリティ

  • ペイントコンテインメントによるクリッピングで重要なコンテンツが視覚的に隠れる場合、スクリーンリーダーはそのコンテンツにアクセスできますが、視覚的なユーザーは見逃す可能性があります。

参考リンク