notes/code/CSS Recipes

tagged: css, webdev, howto

Accordions

Use the <details> element: https://css-tricks.com/quick-reminder-that-details-summary-is-the-easiest-way-ever-to-make-an-accordion/

Here's how to make them simply and accessibly, with no JavaScript, using the :focus-within pseudo selector: https://css-tricks.com/solved-with-css-dropdown-menus

You can also use the <details> element: https://css-tricks.com/using-details-for-menus-and-dialogs-is-an-interesting-idea/ 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;
}