If you’ve ever read the WeAreDevelopers Magazine before, you’ll know we love showing developers how to take advantage of native platform features and avouid over-engineering UI’s with frameworks or pre-built components.
So, when we came across Théodore Lefèvre’s CSS-related educational content on socials, we knew our audience would want to know more.
After appearing on our weekly LIVE show and sharing some fantastic tips and tricks, we thought we’d take a closer look at some of the features highlighted by Theo, so you can start using them today.
Modals without JavaScript with <dialog>
The next time you find a modal in the wild, take a look at the source code and the chances are you’ll see a complicated mess of <div>’s with all kinds of hacky approaches used to handle focus trapping, keyboard navigation, backdrop handling, scroll-locking, and, of course, toggling the modal to open and close.
The native <dialog> element solves those problems automatically.
Opening it requires exactly one line, making use of the showModal() and close() methods:
Once open, the browser blocks interaction with the page behind it, traps focus, and adds a backdrop, which you can style with the ::backdrop pseudo-class:
Dialogs also expose their state via the open attribute, which means you can animate them cleanly with CSS:
Of course, you could use JavaScript to add or remove the [open] attribute, but alternatively you could submit a form with method="dialog" to automatically dismiss it.
Finally, to prevent page scrolling while the dialog is open, simply look for an [open] dialog within the body:
It’s that simple! Check out Theo’s video walkthrough below:
Accordions with <details> and <summary>
Accordions are another UI pattern people routinely over‑engineer with JavaScript, handling toggling, open-and-close animations, and ensuring only one is open at any one time.
All of this can be handled with the native <details> and <summary> elements, like so:
Immediately, it’s keyboard accessible, screen‑reader friendly and still functional with JavaScript disabled. It even opens automatically when the browser finds hidden text via search.
If you want an accordion open by default, just add open:
You can also link multiple accordions together so only one stays open at a time by sharing a name attribute:
Styling and transitions are driven entirely by CSS using the open attribute:
For smooth height animations, the ::details-content pseudo‑element lets you animate without JavaScript:
Even the default disclosure arrow can be replaced with your own icon using CSS, so as well as working well, it’ll look great, too.
See it in action below: