CSSコンテンツ可視性ジェネレーターとは
CSSコンテンツ可視性ジェネレーターは、長いページを高速化するためのcontent-visibilityとcontain-intrinsic-sizeのCSSを生成します。 出力は公開サイトに使う前に確認しやすい形で表示されます。
Quick answer
Use content-visibility: auto to skip rendering off-screen elements until they approach the viewport. This can improve initial page load performance on long pages with many repeated sections.
Limitations
- Browser support varies. Chrome 85+, Edge 85+, Firefox 125+, and Safari 18.2+ support content-visibility. Older browsers ignore the property and render all content as normal.
- Anchor links may not scroll correctly to elements with content-visibility: auto because the browser has not rendered the target area before the scroll attempt.
使い方
- 必要な値を入力します。
- 結果パネルの出力を確認します。
- ページに合う部分だけコピーします。
- 公開前にブラウザとホスティング環境で確認します。
主な用途
- 公開前の繰り返し作業を短くする。
- マークアップ、CSS、チェックリストを準備する。
- 静的サイトで見落としやすい小さなミスを減らす。