popover

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

No JavaScript, just modern browser magic, thanks to the wonderful folks speccing for the web and building our browsers!

<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>
</div>

<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!).

Once again the popover attribute is doing some heavy-lifting here!

<button popovertarget="example-dialog">Toggle 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>

You can also control dialog elements with JavaScript like this:

This one is opened with .showModal() and closed with .close(), both called from 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>

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 seond 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

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.

show-popover opens this and hide-popover closes it!

<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>

Native input pickers

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

Note: Your mileage may vary with these elements; although, hand-written JS solutions also tend to vary wildly, and I think we can expect form elements to receive more love over the coming years. I would honestly tread very carefully with using some of these. Be wary of (the many) accessibility 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>

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

Note: This isn’t yet supported across the board with all input types, e.g. colour or date inputs.

Note: Unfortunately, this also has a number of issues in its implementation in browsers. See Adrian Roselli’s Under-Engineered Comboboxen for more details.

<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>

loading="lazy"

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="Chris Burnell’s avatar.">

hidden until-found

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

Again, 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!

<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>