Paint containment

概要

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

対応ブラウザ

基本構文

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

実務での使いどころ

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

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

注意点

アクセシビリティ

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

参考リンク

• MDN Web Docs — Paint containment