Accordions
Use the <details>
element
Borders on images that match the background color
If your website has a white background and you’re displaying images (such as user avatars), it’s likely that some images might have a white or near-white background as well, which can make them hard to distinguish. Using a subtle inset box shadow will create a visible border for these cases that is not really noticeable otherwise like a normal border would be:
box-shadow: inset 0 0 0 1px rgba(0 0 0 / 10%);
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.
Dropdown menus
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;
}
Layout
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};
`
Also detailed here by Andy Bell.
This does have a bug though if the user resizes their browser to be less than minColumnWidth
. You can fix it using a breakpoint, or using the min
CSS function as detailed in this post by Evan Minto, which is beginning to see good browser support.
I wrote a bit about this technique here: