HTML Can Do That

popover

Browser Support: popover →

Light dismiss, Esc to close, no managing z-index to wrangle it onto a top later. All managed with popover and popovertarget (and popovertargetaction) attributes in HTML. (MDN)

<button popovertarget="example-popover">Toggle popover</button>
<div id="example-popover" popover>
	<p>No JavaScript, just modern browser magic, thanks to the wonderful folks speccing for the web and building our browsers!</p>
	<button popovertarget="example-popover" popovertargetaction="hide">Close</button>
</div>

<dialog>

Browser Support: dialog →

Similar thing going on as popover here, except this time with a dedicated element for modal dialog boxes. (MDN)

See command / commandFor below for another, more recently-landing feature that allows us to open and close dialog elements (and will be useful for lots of other non-JS functionality, one day!).

<button popovertarget="example-dialog">Toggle &lt;dialog&gt; popover</button>
<dialog id="example-dialog" popover>
	<p>Closed with just HTML via <code>&lt;form method="dialog"&gt;</code>, opened with the <code>popover</code> attribute.</p>
	<button popovertarget="example-dialog" popovertargetaction="hide">Close</button>
</dialog>

Even though it’s sort of against the spirit of this page, I want to include this short snippet of how to interact with dialog elements in JavaScript:

<button id="example-dialog-js-open">Open dialog</button>
<dialog id="example-dialog-js">
	<p>This one is opened with <code>.showModal()</code> and closed with <code>.close()</code>, both called from JavaScript.</p>
	<button id="example-dialog-js-close">Close</button>
</dialog>

document.getElementById("example-dialog-js-open").addEventListener("click", () => {
	document.getElementById("example-dialog-js").showModal()
})
document.getElementById("example-dialog-js-close").addEventListener("click", () => {
	document.getElementById("example-dialog-js").close()
})

Grouped <details>

Browser Support: details name →

A shared name attribute turns a group of <details> into an exclusive accordion. Open one and the others close automatically. Magic! (MDN)

<details name="example-group">
	<summary>First</summary>
	<p>Open the second one and watch this close on its own.</p>
</details>
<details name="example-group">
	<summary>Second</summary>
	<p>First one’s hidden now.</p>
</details>

command & commandfor

Browser Support: invoker commands →

Separate HTML buttons controlling one popover. No scripting. (MDN)

Note: So far only show-modal, close, request-close, toggle-popover, show-popover, and hide-popover have landed stable in browsers. We can look forward to invokers supported in the future to increment/decrement values, interact with media elements, copy text, etc.

<button command="show-popover" commandfor="example-command-popover">Open</button>
<button command="hide-popover" commandfor="example-command-popover">Close</button>
<dialog id="example-command-popover" popover>
	<p><code>show-popover</code> opens this and <code>hide-popover</code> closes it!</p>
	<button command="hide-popover" commandfor="example-command-popover">Close</button>
</dialog>

loading="lazy"

Browser Support: loading-lazy-attr →

This image defers loading until it’s near the viewport. Not an IntersectionObserver in sight. (MDN)

<img src="/images/avatar@2x.jpeg" loading="lazy" width="200" height="200" alt="a photo portait of Chris Burnell’s face">

hidden until-found

Browser Support: hidden until-found →

Navigating to the fragment link below reveals the hidden section. The browser automatically removes hidden="until-found". (MDN)

Note: This one’s still pretty new and only really plays nicely with browser default search, and not so well with screen reader search implementations, for example. Still, one to keep in the back pocket for another day down the road!

<a href="#example-until-found">Jump to hidden content</a>
<div id="example-until-found" hidden="until-found">
	<p>Yahaha! You found me!</p>
</div>

Colour, Date & Time, Range Inputs

Browser Support: input-color →, input-range →, input-datetime →

Colour, range, and date pickers, built right into the browser. (MDN: Color Input, MDN: Range Input, MDN: Color Input)

Warning! Some of these elements feel a little unfinished. I’m hoping that we can expect form elements to receive some more love over the coming years, but at this point in time, the implementations shipping in browsers are still lacking. I would tread very carefully with using some of these. You can expect things like the default browser styles of these elements to vary pretty wildly between browsers and for the accessibility experienecs to be very poor. Be wary of the many pitfalls!

Colour

Range

Date

<label>Colour <input type="color" value="#5f8aa6" autocomplete="off"></label>
<label>Range <input type="range" min="0" max="100" value="50" autocomplete="off"></label>
<label>Date <input type="date" autocomplete="off"></label>

<datalist>

Browser Support: datalist →

Native autocomplete suggestions, no dropdown library required. (MDN)

Warning! Support for this across input types is still pretty spotty, and there are also a number of issues in its implementation in browsers. See Adrian Roselli’s Under-Engineered Comboboxen for more info. You might even want to skip using this for now, and keep an eye on it to see if it improves over the new few years.

<label>Favourite HTML element <input type="text" id="example-datalist-input" list="example-datalist" autocomplete="off"></label>
<datalist id="example-datalist">
	<option value="a">
	<option value="abbr">
	<option value="address">
	<!-- ... -->
</datalist>