notes/code/CSS Recipes

tagged: css, webdev, howto


Use the <details> element:

Here's how to make them simply and accessibly, with no JavaScript, using the :focus-within pseudo selector:

You can also use the <details> element: Read more about this on the <details> page

Horizontal scrolling sections

Thanks to this tweet from Cassie Evans.

.container {
width: 100vw;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
.item {
flex: 0 0 auto;