`popover` & `popovertarget` give you dropdown menus w/ light-dismiss for free.

<button popovertarget="menu">Options</button>

<nav id="menu" popover>
<ul>
<li><a href="/settings">Settings</a></li>
<li><a href="/profile">Profile</a></li>
</ul>
</nav>

#StylishHTML

Breadcrumb separators belong in CSS, not HTML. Just use the `::after` pseudo-element.

nav > ol > li:not(:last-child)::after {
content: " / ";
color: lightgray;
padding: 0 0.5em;
}

The `:not(:last-child)` ensures no trailing separator after the final item.

#StylishHTML

I cloned Laravel Cloud's breadcrumbs as a simple <nav> with <a> links and [popover]s. If you'd like to see a video walkthru of how exactly I built this, let me know. I've been considered resurrecting my YouTube channel and sharing more videos here. Would you watch?

#StylishHTML

In addition to closing <dialog>s, the `command` and `commandfor` attributes are wonderful for opening dialogs. You can open dialogs in either a modal (`show-modal`) or non-modal (`show`) state.

#StylishHTML

Another tip on closing <dialog>s involves the new `closedby` attribute. Putting `closedby="any"` on a <dialog> adds light-dismiss functionality to the dialog, meaning users can close the dialog with the Esc keyboard shortcut.

#StylishHTML

<dialog>s with forms have a simple HTML-only way to implement "Cancel" buttons. In addition to POST and GET, <form>s inside of <dialog>s can make use of the DIALOG `method`. This allows the submit button to close the dialog without submitting the form to the backend.

#StylishHTML

Coming in the next version of Safari, and already in Chrome and Edge, you can now create <textarea>s that auto-grow with the `field-sizing: content` rule.

#StylishHTML

Have a small scroll container where you want to de-emphasize the scrollbar, like in a popover? Say hello to `scrollbar-color` and `scrollbar-width`

#StylishHTML

Double-dashed IDs and the enhanced `attr()` CSS function allow us to bind popovertargets with their popovers without having to create distinct anchor-names.

Learn more at MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/attr and https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/anchor-name

#StylishHTML