6 CSS snippets every front-end developer should know in 2023
Toolbelt worthy, powerful, and stable CSS you can use today.
I believe every front-end developer should know how to use container queries, create a scroll snap experience, avoid position: absolute
with grid, swiftly hammer out a circle, use cascade layers, and reach more with less via logical properties. Here's a quick overview of each of those expectations.
1. A container query #
The top requested CSS feature for 10 years straight, is now stable across browsers and available for you to use for width queries in 2023.
.panel {
container: layers-panel / inline-size;
}
.card {
padding: 1rem;
}
@container layers-panel (min-width: 20rem) {
.card {
padding: 2rem;
}
}
@container
- Chrome 105, Supported 105
- Firefox 110, Supported 110
- Edge 105, Supported 105
- Safari 16, Supported 16
container
- Chrome 105, Supported 105
- Firefox 110, Supported 110
- Edge 105, Supported 105
- Safari 16, Supported 16
2. Scroll snap #
Well orchestrated scroll experiences set your experience apart from the rest, and scroll snap is the perfect way to match system scroll UX while providing meaningful stopping points.
.snaps {
overflow-x: scroll;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
}
.snap-target {
scroll-snap-align: center;
}
.snap-force-stop {
scroll-snap-stop: always;
}
Learn more about the potential of this CSS feature in this huge and inspiring Codepen collection of around 25 demos.
scroll-snap-type
- Chrome 69, Supported 69
- Firefox 99, Supported 99
- Edge 79, Supported 79
- Safari 11, Supported 11
scroll-snap-align
- Chrome 69, Supported 69
- Firefox 68, Supported 68
- Edge 79, Supported 79
- Safari 11, Supported 11
scroll-snap-stop
- Chrome 75, Supported 75
- Firefox 103, Supported 103
- Edge 79, Supported 79
- Safari 15, Supported 15
overscroll-behavior
- Chrome 63, Supported 63
- Firefox 59, Supported 59
- Edge 18, Supported 18
- Safari 16, Supported 16
3. Grid pile #
Avoid position absolute with a single cell CSS grid. Once they're piled on top of each other, use justify and align properties to position them.
.pile {
display: grid;
place-content: center;
}
.pile > * {
grid-area: 1/1;
}
grid
- Chrome 57, Supported 57
- Firefox 52, Supported 52
- Edge 16, Supported 16
- Safari 10.1, Supported 10.1
4. Quick circle #
There are lots of ways to make circles in CSS, but this is definitely the most minimal.
.circle {
inline-size: 25ch;
aspect-ratio: 1;
border-radius: 50%;
}
aspect-ratio
- Chrome 88, Supported 88
- Firefox 89, Supported 89
- Edge 88, Supported 88
- Safari 15, Supported 15
5. Control variants with @layer #
Cascade layers can help insert variants discovered or created later, into the right place in the cascade with the original set of variants.
/* file buttons.css */
@layer components.buttons {
.btn.primary {
…
}
}
Then, in some entirely different file, loaded at some other random time, append a new variant to the button layer as if it was there with the rest of them this whole time.
/* file video-player.css */
@layer components.buttons {
.btn.player-icon {
…
}
}
@layer
- Chrome 99, Supported 99
- Firefox 97, Supported 97
- Edge 99, Supported 99
- Safari 15.4, Supported 15.4
6. Memorize less and reach more with logical properties #
Memorize this one new box model and never have to worry about changing left and right padding or margin for international writing modes and document directions again. Adjust your styles from physical properties to logical ones like padding-inline
, margin-inline
, inset-inline
, and now the browser will do the adjusting work.
button {
padding-inline: 2ch;
padding-block: 1ch;
}
article > p {
text-align: start;
margin-block: 2ch;
}
.something::before {
inset-inline: auto 0;
}
padding-inline
- Chrome 87, Supported 87
- Firefox 66, Supported 66
- Edge 87, Supported 87
- Safari 14.1, Supported 14.1
margin-block
- Chrome 87, Supported 87
- Firefox 66, Supported 66
- Edge 87, Supported 87
- Safari 14.1, Supported 14.1
inset-inline
- Chrome 87, Supported 87
- Firefox 63, Supported 63
- Edge 87, Supported 87
- Safari 14.1, Supported 14.1