html: styling details

The <details/> tag is one of my favorites. I’ve written about it several times already in “Details Tags And Choosing Your Own Adventure On The Web” and “HTML: A Second Look At Details”.

This post is mostly about styling the tag (which I cover a bit in my “Second Look”).

There are lots of good resources on styling and animating the <details/> tag - in fact, I already covered some of this in my “Second Look”, but I keep finding myself scouring the internet for them since the API is a little different than other tags. This is especially true because of the [open] attribute.

Styling [Open]

details {
  background: white;
  color: black;
}

details[open] {
  background: black;
  color: white;
}

Or, if you’re using a preprocessor that allows nesting:

details {
    position: fixed;
    left: 0;
    bottom: 0;
    font-size: 1rem;
    width: 100%;
    &[open] {
        background: white;
        color: black;
    }
}

The key thing here is that [open] is an attribute of the <details/> tag and so there’s no whitespace between the two - even when using the &. (This always trips me up and sends me on a journey to figure out why my css isn’t being applied!)

I’ll return in time to add more ways to style and animate the <details/> tag - but that’s it for now.

Resources

• Styling And Animating Details | JustMarkup.com