TL;DR
Aaron T. Grogg argues many common UI behaviors can be implemented using native HTML and CSS primitives instead of JavaScript, reducing download and runtime cost. He demonstrates patterns — details/summary for accordions, input+datalist for autofiltered suggestions, and the popover API for modals and offscreen navigation — while noting browser and accessibility limitations.
What happened
In a recent piece, web developer Aaron T. Grogg lays out practical examples of substituting small bits of JavaScript with built-in HTML and CSS features. He shows how the <details> and <summary> elements can replace typical accordion components, how an <input> paired with a <datalist> can supply autofiltering suggestion lists, and how the emerging popover attribute and dialog element can handle modals and off‑canvas navigation without script. Each pattern includes basic markup, styling hints and a reference CodePen. Grogg also points out current interoperability and accessibility caveats — for example, Firefox has limits with certain datalist input types and some popover modes aren’t implemented on all platforms — and links to MDN resources and a longer companion article on reducing JavaScript. His conclusion encourages handing off trivial UI wiring to HTML/CSS so JavaScript can focus on capabilities those specs can’t yet provide.
Why it matters
- Reducing reliance on JavaScript can cut download, decompression and evaluation costs for users.
- Native elements can simplify code maintenance by handling common UI behaviors without bespoke scripting.
- Offloading trivial UI tasks lets remaining JS focus on complex logic that HTML/CSS can’t address yet.
- Browser and accessibility gaps mean developers must still verify behavior across platforms before removing JS.
Key facts
- Details/summary can be used as an HTML-only accordion and support an open attribute to control default state.
- You can make multiple <details> act like radio buttons by giving them the same name attribute.
- An <input> paired with <datalist> provides an autofiltering suggestions dropdown for textual inputs.
- At the time of writing, Firefox limits datalist behavior to textual input types and mobile support is incomplete.
- The popover attribute (with dialog or other elements) can provide auto, hint and manual popover behaviors.
- Hint popovers are not supported in Firefox and iOS variants, per the article.
- Popover elements default to position: fixed and can be moved on- and off-screen with CSS transforms; ::backdrop can be styled for overlays.
- Grogg links to MDN documentation and related popover and dialog resources for implementation and compatibility details.
- Article published by Aaron T. Grogg on Dec 27, 2025; he also points readers to a longer companion article for more no‑JS/low‑JS options.
What to watch next
- Browser rollout and implementation of the popover attribute and its hint/manual variants — not confirmed in the source.
- Datalist behavior on mobile devices and improvements to accessibility for native suggestion lists.
- Whether major browsers extend support for non-text datalist input types (e.g., date, time) beyond current limits.
Quick glossary
- details/summary: HTML elements that let authors hide and reveal content natively; summary acts as the visible trigger and details contains the collapsible content.
- datalist: An HTML element that provides a set of predefined options to an associated input, enabling native suggestion lists and autofiltering in supported contexts.
- popover API/attribute: Markup and related behavior that allows elements (often dialog) to act as transient overlays or side panels, with modes like auto, hint and manual.
- light dismiss: A UX behavior where an overlay or popover closes automatically when the user clicks outside it or presses Escape.
Reader FAQ
Can accordions be built without JavaScript?
Yes — the <details> and <summary> elements provide native accordion-like behavior and support an open attribute to control default state.
Is datalist fully supported across browsers and input types?
No. The article notes Firefox is currently limited to textual input types and there are mobile and accessibility limitations.
Do popovers work the same in all browsers and on iOS?
Not entirely. The piece states hint popovers are unsupported in Firefox and all iOS variants at the time of writing.
Should all JavaScript be removed in favor of HTML/CSS?
Not confirmed in the source.
Replacing JS with just HTML by Aaron T. Grogg published on Dec 27, 2025 For many years now, JavaScript has been the workhorse of the web. If you wanted to…
Sources
- Replacing JavaScript with Just HTML
- Modern CSS Techniques That Replace JavaScript (and …
- Replace JavaScript With CSS: A Lightweight Approach To …
- HTML, CSS, & JavaScript Explained with Analogies
Related posts
- Why Reliability Requires Functional Programming and Algebraic Data Types
- Pfizer passed on early GLP‑1 research in the early 1990s, says Flier
- An ounce of silver now fetches a higher price than a barrel of oil