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

How to Create a “Skip to Content” Link

Skip links are little internal navigation links that help users move around a page. It’s possible you’ve never actually seen one before because they’re often hidden from view and used as an accessibility enhancement that lets keyboard users and screen readers jump from the top of the page to the content without have to go through other elements on the page first.

In fact, you can find one right here on CSS-Tricks if you crack DevTools open.… Read article “How to Create a “Skip to Content” Link”

Article

Don’t comma-separate :focus-within if you need deep browser support

I really like :focus-within. It’s a super useful selector that allows you to essentially select a parent element when any of its children are in focus.

Say you wanted to reveal some extra stuff when a <div></div> is hovered…

div:hover .extra-stuff {
  /* reveal it */
}

That’s not particularly keyboard-friendly. But if something in .extra-stuff is tab-able anyway (meaning it can be focused), that means you could write it like this to make it a bit more accessible:… Read article “Don’t comma-separate :focus-within if you need deep browser support”

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. 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 element, a common accessibility requirement for modals, and a notoriously difficult one.

Disclaimer: The <dialog demos in this … Read article “A CSS Approach to Trap Focus Inside of an Element”

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 “Keeping Parent Visible While Child in :focus”

Almanac

:focus-within

The :focus-within pseudo selector in CSS is a bit unusual, although well-named and rather intuitive. It selects an element if that element contains any children that have :focus.

form:focus-within {
  background: lightyellow;
}

Which works like this…

<!-- this form will be selected -->
<form action="#">

  <!-- when this input is in focus -->
  <input type="text"/>

</form>
Read article “:focus-within”