freecoding.school100% FREE · NO SIGNUP
Neon DistrictISSUE #38 of 50

content-visibility · render skip

PrismaVSJank the Janitor
Prisma sayscontent-visibility:auto skips rendering off-screen content until it’s scrolled near.

content-visibility: auto tells the browser not to render an element's contents until they're about to enter the viewport — dramatically speeding up long pages. Pair with contain-intrinsic-size to reserve space so the scrollbar doesn't jump. One of the highest-impact CSS performance features.

Power-ups you unlock

Jank the Janitor attacks — common mistakes

Boss battleApply content-visibility:auto with contain-intrinsic-size to heavy sections.

Example code

<!doctype html><html><head><meta charset="utf-8">
<style>.sec{content-visibility:auto;contain-intrinsic-size:200px;background:#140a28;color:#e6e0ff;margin:8px 0;padding:20px}</style></head><body style="background:#06040d;padding:20px"><div class="sec">section 1</div><div class="sec">section 2 (renders as you reach it)</div></body></html>
▶ Open the interactive comic issue
‹ Contain · Layout · Paint · Style IsolationDark Mode · Color-Scheme + Prefers ›