Lean Web ■ Part 4
The web got far too loud.
Pop-overs yelling for attention. Cookie banners. Newsletter modals before you have read a single sentence. Autoplay video. Scroll-jacking. Somewhere underneath all of that: content.
Most of this noise is solvable. Elegantly.
What the Browser Already Knows
CSS content-visibility: auto
renders only what is visible. No JavaScript required. The browser
skips layout and paint for everything below the fold until the user
scrolls to it.
<meta name="color-scheme">
respects system preferences without a single line of JavaScript.
Dark mode. Light mode. The operating system already told the browser
what the user wants.
prefers-reduced-motion
stops animating for those who asked. Not a progressive enhancement.
A basic courtesy that costs one media query.
One Dialog. Zero Banners.
If you must ask the user for preferences, build one dialog wizard. Three steps. Slides left-to-right (right-to-left for RTL locales). Clean, visual, asking everything once: cookies, theme, motion, newsletter.
The native
<dialog>
element provides the
backdrop
for free. It blocks background interaction without a single line of
JavaScript. showModal() handles focus trapping
automatically. ESC closes it by default. Accessible out of the box.
Store the preferences. Respect them. Done. Add a cog icon next to your menu. Let users change their mind whenever they want, exactly as every native application does. No more banners. No more interruptions.
The Native Toolkit
Every feature listed above ships with every modern browser. No npm packages. No framework. No build step.
<!-- System theme without JS -->
<meta name="color-scheme" content="light dark">
<!-- Respect motion preferences -->
<style>
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
</style>
<!-- One dialog, all preferences -->
<dialog id="prefs">
<!-- wizard steps here -->
</dialog>
<script>
document.getElementById('prefs').showModal();
</script>Focus trapping: automatic. Backdrop: built in. ESC to close: default. Accessibility: handled. The browser does the work. You write the content.
The Quietest Websites Are Often the Fastest
Every banner is a DOM node. Every modal is a layout recalculation. Every autoplay video is bandwidth your user did not consent to. Remove the noise and you remove the weight.
One dialog. Zero banners. Zero interruptions. Less noise. Same information.