Skip to main content
CSS is fun and cool and I like it.
Article

A CSS Approach to Trap Focus Inside of an Element

I recently read this article by Keith Grant which introduced the newly arrived <dialog></dialog>. Excited by this new UI element, I immediately sat down to experiment with it to see how it can be used effectively as a modal — the most common use of it. While experimenting, I discovered a neat CSS trick on how to trap focus within the <dialog></dialog> element, a common accessibility requirement for modals, and a notoriously difficult one.

Disclaimer: The <dialog></dialog> demos in … Read article

Article

Keeping Parent Visible While Child in :focus

Say we have a <div></div>.

We only want this div to be visible when it's hovered, so:

div:hover { 
  opacity: 1; 
}

We need focus styles as well, for accessibility, so:

div:hover,
div:focus { 
  opacity: 1; 
}

But div's can't be focused on their own, so we'll need:

<div tabindex="0">
</div>

There is content in this div. Not just text, but links as well.

<div tabindex="0">
  <p>This little piggy went to market.</p>
  <a href="#market">Go to market</a>
</div>

This is … Read article

icon-link icon-logo-star icon-search icon-star