CSS Recipes

csswebdevhowto

Accordions

Use the <details> element

Checkboxes

Instead of trying to get the styling right for IE 11, just add custom styles for browsers that support it well. You can do that by checking for support for the -webkit-appearance property:

@supports(-webkit-appearance: none) {
input[type="checkbox"] {
/* style up your checkbox for browsers that can handle it */
}
}

Of course, this idea comes from the great Jen Simmons.

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.

Grid

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;
}

Responsive tiled layout with CSS Grid and no media queries

This is great for making grid layouts of even-sized tiles where each tile never gets narrower than the specified min-width. But this does not work if you want to have items of varying widths. Stolen from this tweet by @thekitze.

const autoGrid = (minColumnWidth = 250, gap = 0) => css`
display: grid;
grid-template-columns: repeat(auto-fill, minmax(${minColumnWidth}px, 1fr));
grid-gap: ${gap};
`